gpt4 book ai didi

jquery - 更改内联 SVG 的描边颜色

转载 作者:行者123 更新时间:2023-11-30 23:55:00 26 4
gpt4 key购买 nike

问题 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 选择器:inherit,如 Codrops 文章中所建议的。另外,jQuery 的悬停方法也没有运气。

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

问题 2

Sublime Text 2 无法识别描边属性。当我在 CSS 和 HTML 中输入它时,它会显示为白色。这是否意味着它无效?我查看了 CSS3 插件的自述文件,看看它添加了什么,并且没有“笔划”属性。我应该使用 Sublime Text 3 测试版吗?

所有这些事情...

最佳答案

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>

关于jquery - 更改内联 SVG 的描边颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37940282/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com