title: Prevent SVG Text rotation with CSS
body: <p>I created an SVG circle with text element inside. I want to rotate SVG with the CSS transform but I don't want text element rotate.   </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>.progress {
  webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
   }
  .progress__value {
    stroke-dasharray: 339.292;
      stroke-dashoffset: 339.292;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="demo"&gt;
      &lt;svg class="progress" width="100px" height="100px" viewBox="0 0 120 120"&gt;
  &lt;text x="44" class="counter" y="66" fill="#262626" style="
      font-weight: 700; font-size: 16px;
  "&gt;30%&lt;/text&gt;
          &lt;circle cx="60" cy="60" r="54" fill="none" stroke="#DDDDDD" stroke-width="12" /&gt;
          &lt;circle class="progress__value"  cx="60" cy="60" r="54" fill="none" stroke="#262626" stroke-width="12" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>