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。

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

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

第2期

Sublime Text 2无法识别笔划属性。当我在CSS和HTML中键入它时，它会显示为白色。这是否意味着它无效？我查看了一个CSS3插件的README文件，看看它添加了什么，并且没有“stroke”属性。我应该在测试版中使用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

html中的style属性会覆盖你的css选择器。因此，请在css中包含所有样式属性。

检查jsfiddle链接;）

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

Answer 3

您需要选择多边形标记，因为该标记的样式设置为描边。由于它是使用内联样式修饰的，因此您的css规则应使用!important来覆盖内联样式。

＆＃13;

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

＆＃13;

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

＆＃13;

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

更改内联SVG的笔触颜色

3 个答案: