SVG 태그에 여분의 공간이 있습니다.

Question

HTML5의 SVG 요소에 이상한 크기 문제가 있습니다. 내가 의심하는 것보다 훨씬 많은 공간을 차지하고있다. 이미지의 각 작은 사각형은 폭과 높이가 "20"인 rect 요소입니다.

SVG 요소의 높이와 너비는 20 * 10 = 200이어야하지만 크기는 680x508이어야합니다.

은 현재 검사 된 SVG 요소를 볼 수 있습니다 ->http://i.stack.imgur.com/xrofn.png

html로는 다음과 같은 :

<svg> 
    <rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/> 
    ... 
    </svg> 

내가 Node.js를하고 mustache.js를 실행하고 있음을 주목해야한다.

편집 : 분명히 SVG는 너비/높이가 확실하지 않을 때 뭔가를합니다. 수동으로 설정하면 문제가 해결됩니다.

<svg height="200" width="200"> 

Answer 1

SVG 뷰포트는 상위 요소에 의해 결정된 것 같습니다.

http://www.w3.org/TR/SVG/coords.html는

SVG 사용자 에이전트는 SVG 사용자 에이전트가 문서를 렌더링 할 수있는로 뷰포트를 결정하는 상위 사용자 에이전트와 협상 ..

당신은 크기를 지정할 수 있다고 widht 및 height를 사용하여 SVG 뷰포트보기

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200"> 
    <rect x='0' y='0' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='20' height='20' width='20' stroke='black' stroke-width=''/> 
    <rect x='0' y='40' height='20' width='20' stroke='black' stroke-width=''/> 
    ... 
</svg> 

Answer 2

너비 및 높이 특성의 기본값 < svg> 요소는 100 %입니다. 이는 SVG 뷰포트가 해당 컨테이너에 따라 달라짐을 의미합니다. 일반적으로이 값은 CSS에 의해 결정됩니다.

원하는 경우 너비와 높이 속성을 설정할 수 있지만 this example처럼 CSS 만 사용할 수 있습니다.