Ändern der Strichfarbe für ein Inline-SVG

Fehler 1

Ich versuche, die Strichfarbe einer Inline-Svg beim Hover zu ändern. Es ist ein Pfad, der aus Illustrator exportiert und durch den SVG-Optimierer von Peter Collingridge geschickt wurde. Die Artikel, die ich über das Stylen von Inline-SVG gelesen habe, sind sehr einfach, aber die Techniken funktionieren nicht mit meinem SVG.

Ich habe eine Hover-Pseudoklasse auf dem Tag platziert und kann anscheinend nicht auf den Strich zielen.

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

Ich habe die Hintergrundfarbe auf Pink gesetzt, um zu überprüfen, ob der Hover funktioniert, und das ist in Ordnung.

.highlight:hover {
  background-color: pink;
  stroke: red;
}

Hier ist es an jsfiddle.

Ich habe auch versucht, das Polygon in ein use-Tag mit einer ID zu packen, um den Strich in CSS zu ändern, und den SVG-Selektor mit stroke:inherit hinzuzufügen, wie in einem Codrops-Artikel vorgeschlagen. Auch die Hover-Methode von jQuery hat kein Glück.

Was mache ich falsch und warum funktionieren diese drei Techniken nicht?

Ausgabe 2

Sublime Text 2 erkennt die Stroke-Eigenschaft nicht. Es erscheint weiß, wenn ich es in CSS und HTML eingebe. Bedeutet dies, dass es ungültig ist? Ich habe mir die README-Datei für ein CSS3-Plugin angesehen, um zu sehen, was es hinzufügt, und es gibt keine Eigenschaft “stroke”. Sollte ich Sublime Text 3 in der Beta verwenden?

All diese Dinge…

Das CSS im SVG ist in der Reihe CSS und so wird angewendet nach Ihr Stylesheet und überschreibt es somit.

Die einfachste Lösung besteht darin, das CSS aus dem SVG zu extrahieren und alles in Ihr Stylesheet zu packen.

.highlight {
  fill: none;
  stroke-width: 3;
  stroke: #491EC4;
}

.highlight:hover {
  /* background-color: pink; */
  stroke: red;
}

<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5">
  <polygon points="11 60.7 74.7 60.7 42.8 4.4 " />
</svg>

Die Style-Eigenschaft in Ihrem HTML überschreibt Ihre CSS-Selektoren. Fügen Sie also alle Ihre Stileigenschaften in das CSS ein.

Überprüfen Sie den jsfiddle-Link 😉

https://jsfiddle.net/ojn8r810/3/

HTML

<svg class="highlight" width="86" height="68" viewBox="0 0 85.7 68.5">
  <polygon points="11 60.7 74.7 60.7 42.8 4.4 "/>
</svg>

CSS

.highlight { 
  fill:none;
  stroke-width:3px;
  stroke:#491EC4;
}
.highlight:hover {
  background-color: pink;
  stroke: red;
}

Sie müssen das Polygon-Tag auswählen, da dieses Tag so gestaltet ist, dass es einen Strich hat. Da es mit einem Inline-Stil dekoriert wurde, sollte Ihre CSS-Regel verwenden !important um den Inline-Stil zu überschreiben.

.highlight:hover {
  background-color: pink;
}
.highlight:hover polygon{
  stroke: red !important;
}

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

Haftungsausschluss: Es wäre vorzuziehen, die Inline-Stile zu extrahieren und sie in ihre eigenen CSS-Dateien zu verschieben (wie von Paulie_D erwähnt). Wenn das Extrahieren auf keinen Fall möglich ist, können Sie mit gehen !important