title: SVG Use -- Unable to repostion polygon after rotation
body: <p>I am trying to create a 16 point star inside a circle using SVG and pure CSS -- no JS!
  My strategy is to create 16 equilateral triangles (via Defs and Use, to keep it DRY), rotating each Use iteration by 22.5 degrees.
  My problem is that when I apply the rotate() transform to the second triangle, SVG changes the center point of the triangle -- which CSS3 does not (it rotates around a fixed axis).
  I have tried adding x and y parameters, adding a class and doing a translate() transform, doing that inline... nothing works -- I just cant figure out how to move the triangle back into position (with a rotation) inside the circle (centered at 150, 150 I reckon).<br>
  Any help would be appreciated.  Here is the SVG line of code that I am having trouble with.</p>
  
  <pre><code>&lt;use xlink:href="#triangle" style="transform: rotate(22.5deg);"  /&gt;
  </code></pre>
  
  <p>You can see it in action <a href="https://codepen.io/zette/full/KJwWmv" rel="nofollow noreferrer">here</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style &gt; .toile {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    max-height: 800px;
    justify-content: center;
    align-items: center;
    /* centers outer containing element (the circle) horizontally &amp; vertically */
    border: 5px #009000;
    /* green */
    border-style: groove;
    background-color: #f9e4b7;
    margin: 0 auto;
    /* centers surface on a page */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="toile"&gt;
    &lt;svg&gt;
    &lt;defs&gt;
      &lt;pattern id="grid" width="15" height="15" patternUnits="userSpaceOnUse"&gt;
      &lt;rect fill="white" x="0" y="0" width="14" height="14"/&gt;
      &lt;rect fill="#009000" x="14" y="0" width="1" height="14"/&gt;
      &lt;rect fill="#009000" x="0" y="14" width="14" height="5"/&gt;
     &lt;/pattern&gt;
  
      &lt;g id="triangle"&gt; 
   &lt;svg&gt;
   &lt;polygon points="150,18 200,100 100,100" 
   style="stroke:#009000;stroke-width:1; fill:#afeeee; opacity:.7" /&gt;
   &lt;/svg&gt;
    &lt;/g&gt;
    &lt;/defs&gt;
  
    &lt;rect fill="url(#grid)" x="0" y="0" width="100%" height="100%" /&gt;
    &lt;svg viewBox="0 100 400 400" stroke="#009000" stroke-width=".5" width="300" height="300" class="cercle"&gt;
     &lt;circle cx="50%" cy="50%" r="75" fill="transparent" /&gt; &lt;/svg&gt;
  
    &lt;svg viewBox="0 100 400 400" stroke="#ce2029" stroke-width=".5" width="300" height="300"&gt;
     &lt;circle cx="50%" cy="50%" r="2" fill="#ce2029" /&gt; &lt;/svg&gt;
  
    &lt;use xlink:href="#triangle" /&gt;
    &lt;use xlink:href="#triangle" style="transform: rotate(22.5deg);" /&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for any solution to this problem; I just can't figure it out! Please no JS solutions!</p>
  
  <p>UPDATE:</p>
  
  <p>I've changed the 16-point gon to a 15 point one, as for some reason a series of 22.5 degree rotations create an unbalanced hexadecagon.  I got rid of the red circle center point, and the background grid, and added SVG animation.  <a href="https://codepen.io/zette/full/rPagQB" rel="nofollow noreferrer">Here</a> is the (final) working example.</p>
  
  <p>Sorry about the CodePen but I am trying to figure out how to make snippets work for an entire HTML/CSS/SVG program.</p>