ems에서 SVG 다각형을 어떻게 스케일합니까?

Question

저는 HTML5 문서에 <svg> 요소를 직접 포함하고 있으며, 페이지의 글꼴 크기로 반복되는 배경 패턴의 크기를 조정하려고합니다. 문제는 없지만 SVG는 CSS 단위를 지원하므로 크기를 ems로 지정할 수 있습니다.

SVG 사양 claims SVG의 "coordinates 및 lengths은 모두 장치 식별자를 지정하거나 지정하지 않고 지정할 수 있습니다."

<rect x='1em' y='2em' width='3em' height='4em' /> 
<circle cx='6em' cy='7em' r='8em' /> 

그러나 다각형 (예를 들어) 자신이 오류가 발생합니다 있도록 단어 "좌표"의 completely different definition 대신 1을 그리는이 : 그리고, 참으로,이 두 내가 바라던 정확히 무엇을 할 EM 삼각형 :

<polygon points='0 0, 0 1em, 1em 0' /> 

Paths 같은 방법입니다 - 당연하게도, 그들은 이미 다른 목적을 위해 문자를 사용하고 있기 때문이다.

그리고 transformations 같은 "규모"A "수"는 "좌표"하지 또는 "길이"을 기대하므로이 역시 허용되지 않습니다 (브라우저가 자동으로 "변환"속성을 무시하는 것 같다) :

<polygon points='0 0, 0 1, 1 0' transform='scale(1em)' /> 

그래서 1 em 삼각형을 그릴 방법을 알아낼 수 없을 것입니다. 훨씬 더 복잡한 것은 없습니다. 합리적인 방법을 간과하고 있습니까? 부당한 방법은 어떨까요? 포기해야하고 대신 <canvas> 요소를 사용하거나 더 악화해야합니까?

Answer 1

내부의 <svg> 요소에 폴리곤을 래핑하여 원하는대로 배율을 조정할 수 있습니다. viewBox는 포함하고있는 객체의 좌표계를 제어하고 height 및 width 속성은 보이는 객체의 크기를 제어합니다.

<svg xmlns="http://www.w3.org/2000/svg"> 
    <svg viewBox="0 0 1 1" height="1em" width="1em" y="7em"> 
     <polygon points='0 0, 0 1, 1 0' /> 
    </svg> 
    <circle cx='6em' cy='7em' r='2em' /> 
</svg> 

Answer 2

모든 항목에 변형을 적용하고 em 또는 다른 단위를 사용할 수 있습니다. 예를 들어

이 잘 작동합니다 :

<polygon points='0 0, 0 1, 1 0' transform='scale(2em 1.5em)' />