title: How can I rotate a symbol around its center without specifying its position twice?
body: <p>I have some tile symbols that I would like to place on a grid. This is what I'm trying to achieve:</p>
  <ul>
  <li>Use tile coordinates to position the symbols (e.g. <code>4,2</code> instead of <code>85,43</code>)</li>
  <li>Use pixel coordinates (not tile coordinates) for defining the vertices of symbols</li>
  <li>Rotate symbols around their center without specifying absolute coordinates.</li>
  </ul>
  <p>I have solutions to the first two (there might be better solutions though) but not the third. I can rotate the tile at <code>4,2</code> by a quarter turn with this:</p>
  <pre><code>&lt;!-- 10/21 = 0.47619047619 --&gt;
  &lt;use x=&quot;4&quot; y=&quot;2&quot; href=&quot;#rooftop-0&quot; class=&quot;theme-0&quot; transform=&quot;rotate(90 4.476 2.476)&quot; /&gt;
  </code></pre>
  <p>I really don't like having to specify the tile coordinates twice. Ideally, I would like to write something like this instead:</p>
  <pre><code>&lt;use x=&quot;4&quot; y=&quot;2&quot; href=&quot;#rooftop-0&quot; class=&quot;theme-0 rotate-1&quot; /&gt;
  </code></pre>
  <p>Defining <code>.rotate-1</code> in the stylesheet doesn't seem to have any effect on the rotation. <code>transform-origin=&quot;50% 50%&quot;</code> seems to be setting the origin to <code>50%</code> of the viewport or something. Maybe defining the symbol with coordinates from <code>-10</code> to <code>10</code> instead of <code>0</code> to <code>20</code> would help? Should I define the <code>viewBox</code> of the symbols?</p>
  <p>Another solution would be manually changing the coordinates of the vertices in the symbol to create the other 3 orientations. I'd rather not!</p>
  <p>Anyway, this is what I have so far:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?&gt;
  &lt;!-- 21*10+1 = 211 --&gt;
  &lt;svg width=&quot;211&quot; height=&quot;211&quot; version=&quot;2.0&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;style&gt;
      .grid-line {
        fill: #DDD;
      }
      .grass-fill {
        fill: #8C8;
      }
      .tile {
        /* 1/21 = 0.04761904761 */
        transform: scale(0.04761904761, 0.04761904761);
      }
      
      .theme-0 {
        --roof-color-0: #F44;
        --roof-color-1: #F66;
        --roof-color-2: #F88;
        --roof-color-3: #FAA;
      }
      
      .theme-1 {
        --roof-color-0: #44F;
        --roof-color-1: #66F;
        --roof-color-2: #88F;
        --roof-color-3: #AAF;
      }
    &lt;/style&gt;
    
    &lt;defs&gt;
      &lt;pattern id=&quot;grid&quot; width=&quot;21&quot; height=&quot;21&quot; patternUnits=&quot;userSpaceOnUse&quot;&gt;
        &lt;rect class=&quot;grid-line&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;1&quot; height=&quot;21&quot; /&gt;
        &lt;rect class=&quot;grid-line&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;21&quot; height=&quot;1&quot; /&gt;
      &lt;/pattern&gt;
      
      &lt;symbol id=&quot;rooftop-0&quot;&gt;
        &lt;g class=&quot;tile&quot;&gt;
          &lt;rect class=&quot;grass-fill&quot; width=&quot;20&quot; height=&quot;20&quot; /&gt;
          &lt;polygon style=&quot;fill: var(--roof-color-0)&quot; points=&quot;3,2 17,2 18,8 2,8&quot; /&gt;
          &lt;polygon style=&quot;fill: var(--roof-color-1)&quot; points=&quot;2,8 18,8 17,14 3,14&quot; /&gt;
          &lt;polygon style=&quot;fill: var(--roof-color-2)&quot; points=&quot;8,8 11,14 11,18 8,18&quot; /&gt;
          &lt;polygon style=&quot;fill: var(--roof-color-3)&quot; points=&quot;8,8 8,18 5,18 5,14&quot; /&gt;
        &lt;/g&gt;
      &lt;/symbol&gt;
      
      &lt;symbol id=&quot;rooftop-1&quot;&gt;
        &lt;g class=&quot;tile&quot;&gt;
          &lt;rect class=&quot;grass-fill&quot; width=&quot;20&quot; height=&quot;20&quot; /&gt;
          &lt;polygon style=&quot;fill: var(--roof-color-0)&quot; points=&quot;2,11 18,11 17,17 3,17&quot; /&gt;
          &lt;polygon style=&quot;fill: var(--roof-color-1)&quot; points=&quot;3,5 17,5 18,11 2,11&quot; /&gt;
          &lt;polygon style=&quot;fill: var(--roof-color-2)&quot; points=&quot;10,11 10,3 13,3 13,5&quot; /&gt;
          &lt;polygon style=&quot;fill: var(--roof-color-3)&quot; points=&quot;10,11 7,5 7,3 10,3&quot; /&gt;
        &lt;/g&gt;
      &lt;/symbol&gt;
    &lt;/defs&gt;
    
    &lt;g&gt;
      &lt;rect fill=&quot;#999&quot; width=&quot;100%&quot; height=&quot;100%&quot; /&gt;
      &lt;rect fill=&quot;url(#grid)&quot; width=&quot;100%&quot; height=&quot;100%&quot; /&gt;
    &lt;/g&gt;
    
    &lt;g transform=&quot;translate(1, 1) scale(21, 21)&quot;&gt;
      &lt;use x=&quot;3&quot; y=&quot;2&quot; href=&quot;#rooftop-0&quot; class=&quot;theme-1&quot; /&gt;
      &lt;!-- 10/21 = 0.47619047619 --&gt;
      &lt;use x=&quot;4&quot; y=&quot;2&quot; href=&quot;#rooftop-0&quot; class=&quot;theme-0&quot; transform=&quot;rotate(90 4.476 2.476)&quot; /&gt;
      &lt;use x=&quot;5&quot; y=&quot;2&quot; href=&quot;#rooftop-1&quot; class=&quot;theme-1&quot; /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>Here's a screenshot:</p>
  <p><a href="https://i.stack.imgur.com/kOhr1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kOhr1.png" alt="Screenshot" /></a></p>
  <p>Is there a clean way of doing what I'm trying to do? Rotating a symbol around its center seems like something one would do all the time.</p>