Bir SVG çokgenini ems cinsinden nasıl ölçeklerim?

Question

Bir HTML5 belgesine bir <svg> öğesinin yerleştirilmesini yapıyorum ve sayfanın yazı tipi boyutu açısından yinelenen bir arka plan deseni ölçeklemek istiyorum. Sorun değil, SVG CSS ünitelerini destekliyor, bu yüzden boyutu ems cinsinden belirleyebilirim, değil mi?

SVG Spec claims "SVG Tüm coordinates ve lengths ile veya bir birim tanımlayıcı olmadan belirtilebilir."

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

Ama çokgenler (örneğin) kendi bu bir hata tutarsa ​​şekilde kelime "koordine" nin completely different definition yerine 1 çizim vardır: Ve, gerçekten, bunlardan ikisi Beklediğim tam olarak ne yapmak em üçgeni:

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

Paths aynı yoldur - anlaşılır, zaten farklı bir amaç için mektup kullandığınız beri.

Ve transformations gibi "ölçek" bir "sayı" a "koordinatı" değil ya da "uzunluğunu" beklemek, bu nedenle bu izin verilmediği halde (tarayıcım sessizce "dönüştürmek" özelliğini görmezden görünüyor):

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

Yani bir 1m üçgenin nasıl çizileceğini bile tahmin edemiyorum, daha az karmaşık bir şey. Bunu yapmanın makul bir yolunu mu görüyorum? Mantıksız bir yoldan ne haber? Bunun yerine bir <canvas> elemanından vazgeçmeli ve kullanmalı mıyım yoksa daha mı kötü olur?

Answer 1

Çokgenlerinizi istediğiniz gibi ölçeklendirmek için iç <svg> öğenize sarabilirsiniz. ViewBox, içerdiği nesnelerin koordinat sistemini kontrol eder ve yükseklik ve genişlik özellikleri, ne kadar büyük göründüğünü kontrol eder.

<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

Dönüştürmeleri herhangi bir öğeye uygulayabilir ve em veya başka bir birim kullanabilirsiniz. Örneğin

, bu sadece çalışıyor:

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