title: How do I scale an SVG polygon in ems?
body: <p>I'm embedding an <code>&lt;svg&gt;</code> element directly in an HTML5 document, and I want to scale a repeating background pattern in terms of the page's font size.  No problem, SVG supports CSS units, so I can just specify the size in ems, right?</p>
  
  <p>The SVG spec <a href="http://www.w3.org/TR/SVG/coords.html#Units" rel="noreferrer">claims</a> "All <a href="http://www.w3.org/TR/SVG/types.html#DataTypeCoordinate" rel="noreferrer">coordinates</a> and <a href="http://www.w3.org/TR/SVG/types.html#DataTypeLength" rel="noreferrer">lengths</a> in SVG can be specified with or without a unit identifier."  And, indeed, both of these do exactly what I was hoping for:</p>
  
  <pre><code>&lt;rect x='1em' y='2em' width='3em' height='4em' /&gt;
  &lt;circle cx='6em' cy='7em' r='8em' /&gt;
  </code></pre>
  
  <p>But polygons (for example) have their own <a href="http://www.w3.org/TR/SVG/shapes.html#PointsBNF" rel="noreferrer">completely different definition</a> of the word "coordinate," such that this raises an error instead of drawing a 1 em triangle:</p>
  
  <pre><code>&lt;polygon points='0 0, 0 1em, 1em 0' /&gt;
  </code></pre>
  
  <p><a href="http://www.w3.org/TR/SVG/paths.html#PathData" rel="noreferrer">Paths</a> are the same way -- understandably, since they're already using the letters for a different purpose.</p>
  
  <p>And <a href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute" rel="noreferrer">transformations</a> such as "scale" expect a "number," not a "coordinate" or "length", so this isn't allowed either (my browser seems to silently ignore the "transform" attribute):</p>
  
  <pre><code>&lt;polygon points='0 0, 0 1, 1 0' transform='scale(1em)' /&gt;
  </code></pre>
  
  <p>So I guess I can't even figure out how to draw a 1 em triangle, much less anything more complicated.  Am I overlooking a reasonable way of doing it?  What about an unreasonable way?  Should I give up and use a <code>&lt;canvas&gt;</code> element instead, or would that be even worse?</p>