更改内联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上的演示。

我还尝试在一个带有id的use标签中包装多边形，以在CSS中更改描边，并添加了svg选择器stroke:inherit，如Codrops文章所建议的那样。此外，使用jQuery的hover方法也没有成功。

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

问题2

Sublime Text 2无法识别描边属性。当我在CSS和HTML中键入时，它显示为白色。这是否意味着它无效？我查看了一个CSS3插件的README文件，看看它添加了什么，但没有“stroke”属性。我应该使用测试版的Sublime Text 3吗？

所有这些事情......

- tea

---

我强烈建议升级到Sublime Text 3（ST3），因为它比三年前发布的2有很多改进。我已经使用3多年了，它非常稳定 - 它仍然带有“beta”标签，但它早就不是beta版本了。所有开发工作现在都集中在ST3上 - “我不知道有任何不使用Sublime Text 3的好理由” - Will Bond，ST核心开发人员。此外，ST2已经不再是默认下载。 - MattDMo

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>

- Paulie_D

---

好的，它没有起作用。当我将CSS规则提取到外部时，规则不再适用于SVG。 - Alston

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。

- Lars

Answer 3

在HTML中，样式属性将覆盖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;
}

- makonnen dos santos