How do I scale an SVG polygon in ems?

Question

I\'m embedding an element directly in an HTML5 document, and I want to scale a repeating background pattern in terms of the page\'s font size. No p

Answer 1

You can apply transforms to any item and use em or any other units.

For example, this works just fine:

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

Answer 2

You can wrap your polygons in an inner <svg> element to scale them as you wish. The viewBox controls the coordinate system of the objects it contains and the height and width attributes control how big it looks.

<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>