title: How to add a CSS transform or filter to an existing inline SVG transform or filter?
body: <p>Without knowing what the inline SVG transform or filter is, how can I apply extra transforms or filters to the same element using CSS?</p>
  <p>Whatever I try, my CSS transform or filter overwrites the inline SVG transform/filter, instead of adding to it.</p>
  <p>For example I have in my SVG:
  <code>&lt;circle r=&quot;50&quot; transform=&quot;translate(100,100)&quot;&gt;</code></p>
  <p>And then I try to scale this circle using a CSS transform, without removing its initial translate transform:</p>
  <pre><code>circle {
    transform: initial scale(0.5);
  }
  </code></pre>
  <p>However, the original translate is replaced by the scale transform, they are not added.
  The same problem applies to filters.</p>