更改嵌入式SVG的笔触颜色

Question

第1期

我试图在悬停时更改嵌入式svg的笔触颜色。这是从Illustrator导出并经过Peter Collingridge的SVG优化器的路径。我阅读的有关内联SVG样式的文章非常简单，但这些技术不适用于我的SVG。

我在标签上放置了一个悬停伪类，似乎无法针对中风。

<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>

我将背景颜色设置为粉红色，以检查悬停是否正常工作。

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

它在jsfiddle上。

正如Codrops文章中所建议的，我还尝试将多边形包装在带有ID的use标签中，以更改CSS中的笔触，并使用stroke：inherit添加svg选择器。而且，jQuery的悬停方法没有运气。

我在做什么错，为什么这三种技术不起作用？

第2期

Sublime Text 2无法识别笔触属性。当我在CSS和HTML中键入时，它会变成白色。这是否意味着无效？我查看了CSS3插件的README文件，以了解它所添加的内容，并且没有“ stroke”属性。我应该在Beta中使用Sublime Text 3吗？

所有这些东西

Answer 1

SVG中的CSS 是内联 CSS，因此会在您的样式表之后应用，因此将其覆盖。

最简单的解决方案是从SVG中提取CSS，并将其全部放入样式表中。

.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>

Answer 2

您需要选择多边形标签，因为该标签的样式为具有笔划。由于它是用内联样式装饰的，因此您应该使用 css 规则!important来覆盖内联样式。

.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>

免责声明：最好提取内联样式并将它们移动到自己的 css 文件中（如Paulie_D提到的）。如果无论如何无法提取，您可以选择!important