更改嵌入式SVG的笔触颜色 [英] Changing the stroke color for an inline SVG

问题描述

问题1

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

I'm trying to change the stroke color of an inline svg on hover. It's a path exported from Illustrator and put through Peter Collingridge's SVG optimiser. The articles I read on styling inline SVG are very straight forward but the techniques won't work on my SVG.

我在标记上放置了一个悬停伪类，似乎无法针对笔划.

I have placed a hover pseudo-class on the tag and can't seem to target the stroke.

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

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

I set the background-color to pink to check that hover is working and that's fine.

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

这里是 jsfiddle .

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

I also tried to wrap the polygon in a use tag with an id to change the stroke in CSS as well as adding the svg selector with stroke:inherit, as suggested in a Codrops article. Also, jQuery's hover method with no luck.

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

What am I doing wrong and why are these three techniques not working?

问题2

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

Sublime Text 2 won't recognise the stroke property. It comes up white when I type it in CSS and HTML. Does this mean it's invalid? I looked at the README file for a CSS3 plugin to see what it's adding and there's no "stroke" property. Should I be using Sublime Text 3 in beta?

所有这些东西...

推荐答案

SVG中的CSS是 inline CSS，因此会在样式表的之后之后应用，因此覆盖它.

The CSS in the SVG is inline CSS and so is being applied after your stylsheet and thus is overriding it.

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

The simplest solution is to xxtract the CSS from the SVG and put it all in your stylesheet.

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

这篇关于更改嵌入式SVG的笔触颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！