Changing the stroke color for an inline SVG
<p><strong>Issue 1</strong></p>

<p>I'm trying to change the stroke color of an inline svg on hover. It's a path exported from Illustrator and put through Peter Collingridge's SVG optimiser. The articles I read on styling inline SVG are very straight forward but the techniques won't work on my SVG.</p>

<p>I have placed a hover pseudo-class on the  tag and can't seem to target the stroke. </p>

<pre><code>&lt;svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5"&gt;
  &lt;polygon points="11 60.7 74.7 60.7 42.8 4.4 " style="fill:none;stroke-width:3;stroke:#491EC4"/&gt;
&lt;/svg&gt;
</code></pre>

<p>I set the background-color to pink to check that hover is working and that's fine.</p>

<pre><code>.highlight:hover {
  background-color: pink;
  stroke: red;
}
</code></pre>

<p>Here it is on <a href="https://jsfiddle.net/duyenho/ojn8r810/1/" rel="noreferrer">jsfiddle</a>.</p>

<p>I also tried to wrap the polygon in a use tag with an id to change the stroke in CSS as well as adding the svg selector with stroke:inherit, as suggested in a Codrops article. Also, jQuery's hover method with no luck.</p>

<p>What am I doing wrong and why are these three techniques not working?</p>

<p><strong>Issue 2</strong> </p>

<p>Sublime Text 2 won't recognise the stroke property. It comes up white when I type it in CSS and HTML. Does this mean it's invalid? I looked at the README file for a CSS3 plugin to see what it's adding and there's no "stroke" property. Should I be using Sublime Text 3 in beta?</p>

<p>All these things...</p>