更改内联 SVG 的笔触颜色

Question

第 1 期

我正在尝试更改悬停时内嵌 svg 的描边颜色。这是从 Illustrator 导出并通过 Peter Collingridge 的 SVG 优化器的路径。我阅读的关于样式化内联 SVG 的文章非常直接，但这些技术不适用于我的 SVG。

我在标签上放置了一个悬停伪class，但似乎无法定位笔划。

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

我还尝试将多边形包装在一个带有 id 的 use 标签中，以更改 CSS 中的笔划，并按照 Codrops 文章中的建议添加带有 stroke:inherit 的 svg 选择器。另外，jQuery 的悬停方法没有运气。

我做错了什么，为什么这三种方法不起作用？

第 2 期

Sublime Text 2 无法识别笔划属性。当我输入 CSS 和 HTML 时，它会变成白色。这是否意味着它是无效的？我查看了 CSS3 插件的 README 文件，看看它添加了什么，但没有 "stroke" 属性。我应该在测试版中使用 Sublime Text 3 吗？

所有这些...

Answer 1

您需要 select 多边形标签，因为该标签的样式设置为带有笔划。由于它已使用内联样式装饰，因此您的 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 文件中（如所述）。如果无法通过任何方式提取，您可以使用 !important

Answer 2

SVG 中的 CSS 是 inline CSS 并且在 after 你的样式表和因此覆盖了它。

最简单的解决方案是从 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 3

您 html 中的样式属性会覆盖您的 css 选择器。因此，请在 css.

中包含所有样式属性

检查 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;
}

更改内联 SVG 的笔触颜色

Changing the stroke color for an inline SVG

jquery

css

svg

sublimetext2