bug with transform scale svg line in firefox
<p>I'm having trouble finding a good work-around for a bug in Firefox. The bug happens when doing a transform scale on a line in SVG.</p>

<p>I'd like to be able to specify changing the length of a line in a transform so I can animate the transition of the transform using css. In Firefox, doing a Transform Scale causes the line to shift. I've tried playing with the transform-origin property to see if I could recenter it, but haven't found any values that worked.</p>

<p>Here is the html code that renders the problem. Works in Safari and Chrome, not in Firefox:</p>

<pre><code>&lt;!DOCTYPE html&gt;

&lt;html&gt;

  &lt;head&gt;
    &lt;title&gt;Firefox Bug&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;svg width="600" height="600" style="border: solid blue 1px;" viewBox="290 290 20 20"&gt;
      &lt;g style="transform: translate(300px, 300px)"&gt;
        &lt;path d="M -1 0 L 1 0" stroke="blue" stroke-width="1" style="transform: scale(1, 1);"/&gt;
        &lt;path d="M -1 0 L 1 0" stroke="red" stroke-width="1" /&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Here is what the issue looks like in Safari/Chrome:</p>

<p><a href="https://i.stack.imgur.com/gorEG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gorEG.png" alt="enter image description here"></a></p>

<p>Here is what it looks like in Firefox:</p>

<p><a href="https://i.stack.imgur.com/ZQl3Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQl3Y.png" alt="Firefox Bug"></a></p>

<p>The red line segment should completely cover the blue, but in Firefox, the blue segment gets shifted to the side. Already filed the bug in bugzilla. Would love it if anyone had a good workaround for this, that let's me use the scale property without shifting the lines.</p>