¿Cómo escalo un polígono SVG en ems?

Question

Estoy incrustando un elemento <svg> directamente en un documento HTML5, y quiero escalar un patrón de fondo repetitivo en términos del tamaño de fuente de la página. No hay problema, SVG soporta unidades CSS, así que puedo especificar el tamaño en ems, ¿verdad?

La especificación de SVG claims "Todos los coordinates y lengths en SVG pueden especificarse con o sin un identificador de unidad." Y, de hecho, ambos hacen exactamente lo que estaba esperando para:

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

Pero polígonos (por ejemplo) tienen su propia completely different definition de la palabra "coordinar", de tal manera que esto plantea un error en lugar de trazar una 1 triángulo em:

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

Paths son de la misma manera - como es comprensible, puesto que ya están usando las letras para un propósito diferente.

Y transformations como "escala" esperar un "número", no un "coordinar" o "longitud", por lo que esto no está permitido, ya sea (mi navegador parece ignorar en silencio el atributo "transformar"):

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

Así que supongo que ni siquiera puedo imaginar cómo dibujar un triángulo de 1 em, mucho menos algo más complicado. ¿Estoy pasando por alto una forma razonable de hacerlo? ¿Qué tal una forma irracional? ¿Debo renunciar y usar un elemento <canvas> en su lugar, o sería aún peor?

Answer 1

Puede envolver sus polígonos en un elemento interior <svg> para escalarlos como desee. ViewBox controla el sistema de coordenadas de los objetos que contiene y los atributos de altura y ancho controlan qué tan grande se ve.

<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

Puede aplicar transformaciones a cualquier elemento y usar em o cualquier otra unidad.

Por ejemplo, esto funciona muy bien:

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