Как масштабировать SVG-полигон в EMS?

Question

Я встраиваю элемент <svg> непосредственно в документ HTML5 и хочу масштабировать повторяющийся фоновый узор с точки зрения размера шрифта страницы. Нет проблем, SVG поддерживает CSS-единицы, поэтому я могу просто указать размер в ems, верно?

Спецификация SVG утверждает «Все координаты и длины в SVG могут быть указаны с идентификатором единицы измерения или без него». И действительно, оба они делают именно то, на что я надеялся:

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

Но полигоны (например) имеют свое собственное совершенно другое определение слова "координата", так что это приводит к ошибке вместо рисования треугольника 1 em:

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

Пути одинаковы - понятно, поскольку они уже используют буквы для других целей.

и преобразования , такие как "scale", ожидают "число", а не "координату" или "длину", поэтому это тоже недопустимо (мой браузер, похоже, молча игнорирует "transform" атрибут):

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

Так что, я думаю, я даже не могу понять, как нарисовать треугольник 1, а тем более что-нибудь более сложное. Я пропускаю разумный способ сделать это? Как насчет неразумного пути? Должен ли я сдаться и использовать вместо него элемент <canvas>, или это будет еще хуже?

Answer 1

Вы можете обернуть свои полигоны во внутренний элемент <svg>, чтобы масштабировать их по своему желанию. ViewBox управляет системой координат объектов, которые он содержит, а атрибуты высоты и ширины определяют, насколько большой он выглядит.

<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

Вы можете применить преобразования к любому элементу и использовать их или любые другие единицы.

Например, это работает просто отлично:

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