스케일 하드 SVG 이미지 I가 <code>svg</code> 그래프 (원 가장자리 다발)를 포함 <code>div</code> 요소가 페이지로드

Question

에 DIV 크기에 기초하여, 및 I 또한 svg 요소 viewBox 특성을 설정. 그래프의 노드 및 가장자리 좌표는 지정된 화면 크기 (따라서 div 크기로 지정됨)에 대해 하드 코드 된 px입니다. 원하는 div 크기로 그래프가 잘로드되고 브라우저 창의 크기가 조정되는 동안 위아래로 크기가 조정됩니다.

그러나 svg 이미지는 이전에 지정한 div 크기로 동일하게 유지되므로 다른 화면/div 크기로 페이지가로드 될 때마다 내 문제가 발생합니다. 이렇게하면 브라우저/화면 크기를 줄이기에는 너무 큰 이미지가 생성됩니다. 바로 div 요소 후,

<svg id="mygraph" preserveAspectRatio="xMidYMid meet"> 

및 자바 스크립트를 사용하여 viewBox 속성을 설정 :

나는하여 svg 요소에 대해 다음과 같이 설정

<script type="text/javascript"> 
    document.getElementById("mygraph").setAttribute("viewBox", "0 0 " + $("#graphdiv").width() + " " + $("#graphdiv").height()); 
</script> 

이 문제가 해결되지 않습니다. 그래서 내가 뭘 더 할 수 있을까?

Answer 1

viewBox는 svg 내부에서 사용되는 좌표계를 정의하며 svg의 크기는 변경하지 않습니다. viewBox가있는 경우 svg의 폭과 높이 (예 : CSS 사용) 만 설정하면 해당 크기로 렌더링됩니다.