SVG 높이 및 너비를 노드의 너비와 높이로 설정하십시오.

SVG 요소의 너비와 높이를 text 노드 안에있는 텍스트 너비와 동일하게 만드는 방법이 있습니까? SVG 높이 및 너비를 노드의 너비와 높이로 설정하십시오.

가 여기에 SVG 마크 업입니다 :

<span>I want </span> 

<svg width="100%" height="80px"> 
    <text x="0" y="0" fill="white"> 
    THESE WORDS 
    </text> 
</svg> 

<span>to be an SVG</span>

가 이상적으로, 나는 SVG 인라인 요소 (같은 span 노드)로 취급 할

여기 데모입니다.

나는이 같은 렌더링 할 :

THESE WORDS

I want THESE WORDS to be an SVG

은 SVG입니다.

svg 노드에서 width="auto" height="auto"을 수행하면 전혀 렌더링되지 않습니다.

SVG 요소를 텍스트 요소의 너비에 자동으로 맞추려면 어떻게합니까?

출처

2015-01-20 Joshua Soileau

SVG + CSS 솔루션에 대해 잘 모르겠습니다. SVG 요소는 의미에서 더 크기가 없다는 것을,

// get the bounding box for the text element 
var bbox = text.getBBox(); 

// set the svg width/height accordingly 
svg.setAttribute('width', bbox.width); 
svg.setAttribute('height', bbox.height); 

// set the viewbox accordingly 
svg.setAttribute('viewBox', bbox.x + ' ' + bbox.y + ' ' + bbox.width + ' ' + bbox.height);

Modified Codepen

getBBox() in the SVG spec

귀하의 일반적인 문제는 다음과 같습니다

당신은 크기를 조정하는 몇 가지 자바 스크립트를 사용할 수 다른 이미지들처럼. 캔버스는 이론상 무제한 크기입니다. 크기를 결정하기 위해 브라우저는 포함 된 모든 요소를 사용하고, 렌더링하고, 렌더링 된 좌표를 가져 와서 최대 경계 상자를 계산해야합니다. Afaik는 브라우저를 사용하지 않습니다.

출처

2015-01-20 15:20:16 Sirko

일반 텍스트 노드 인 것처럼 SVG'text '를 새 줄로 바꾸려면 어떨까요? http://codepen.io/Tiger0915/pen/zxwpqK –

SVG 자체는 텍스트를위한 수단이 없습니다. 쌈. 포장이 필요한 경우,''를 사용하여 HTML (및 포장 기능)을 SVG에 임베드합니다. 단일 SVG 요소로 모든 인라인 요소 속성을 모방 할 수는 없습니다. – Sirko

' '라고하더라도 SVG 내부를 감싸고 SVG 요소를 감쌀 수 없습니다! – Sirko

SVG 높이 및 너비를 노드의 너비와 높이로 설정하십시오.

답변

관련 문제