Setting SVG element width/height attributes using CSS in Firefox
<p>I'm trying to set the width and height attributes of SVG elements using CSS instead of putting them inline but I can't seem to get it working in firefox.</p>
<p>When I set the width/height inline on the element it displays with no problems.</p>
<pre><code> &lt;rect x=&quot;10px&quot; y=&quot;50px&quot; fill=&quot;green&quot; width=&quot;20px&quot; height=&quot;20px&quot; /&gt;
</code></pre>
<p>When I try to set the width/height using CSS it works in Chrome but not in Firefox.</p>
<pre><code>.box {
    width: 20px;
    height: 20px;
}

&lt;rect class=&quot;box&quot; x=&quot;50px&quot; y=&quot;50px&quot; fill=&quot;green&quot; /&gt;
</code></pre>
<ul>
<li>Tried this in both firefox 43 and 36 with the same behavior.</li>
<li>When I inspect the missing SVG elements in firefox it looks like the CSS is being applied and the computed styles show the correct width/height values.</li>
<li>I'm hoping I'm just doing something silly and Chrome is just &quot;making it work&quot;.  I'd like to avoid browser specific CSS if at all possible.</li>
</ul>
<p><a href="https://jsfiddle.net/DForshner/t9weLsod/" rel="noreferrer" title="JSFiddle">JSFiddle examples</a></p>