改变笔触颜色为联SVG

我试图改变悬停内嵌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的使用标记中，以便在CSS中更改笔划以及将Svg选择器添加到笔划：inherit中，如Codrops文章中的建议。另外，jQuery的悬停方法没有运气。

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

第2期

崇高文本2将无法识别笔触属性。当我在CSS和HTML中输入时，它会显示为白色。这是否意味着它是无效的？我查看了CSS3插件的README文件，以查看它添加的内容，并且没有“中风”属性。我应该在测试版中使用Sublime Text 3吗？

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

来源

2016-06-21 dho

我会强烈建议升级到崇高的文本3（ST3）不管 - 有超过2年的改进数量惊人 - 三年前发布*。我已经使用了3年，并且它是稳定的 - 它仍然具有“测试版”标签，但它很久以前就已经过测试版了。现在所有的开发工作都集中在ST3上 - [*''我不知道有什么理由不使用Sublime Text 3“*]（https://forum.sublimetext.com/t/sublime-text-2 - 不发达/ 18680/4） - 威尔邦德，ST核心开发者。此外，ST2 [不再是默认下载]（https://sublimetext.com）。 – MattDMo

感谢提示@MattDMo。非常感谢您的详细回复。 – dho

走在SVG的CSS是内嵌 CSS和后你stylsheet所以被应用，因此被覆盖它。

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

来源

2016-06-21 09:30:50

谢谢Paulie_D。得到它了。 – dho

你需要选择多边形标签，因为这样标签的风格有一个行程。由于它已用内联样式进行了装饰，因此您的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

来源

2016-06-21 09:27:58 Lars

谢谢拉尔斯。希望我能给两个蜱。 – dho

在你的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; 
}

来源

2016-06-21 09:31:45

太简单了。非常感谢。 – dho

改变笔触颜色为联SVG

回答

相关问题