gpt4 book ai didi

html - 我可以将 CSS 与 SVG 一起使用还是只能部分使用?

转载 作者:搜寻专家 更新时间:2023-10-31 08:16:12 29 4
gpt4 key购买 nike

我在某处读到 CSS 和 SVG 不能一起使用,但 CSS 显然可以与 SVG 一起使用。看这个例子:

<html>
<head>
<style>
rect:hover{
opacity: 0.5;
}
</style>
</head>
<body>
<svg>
<rect width="300" height="100" style="fill:#d64526" />
</svg>

</body>
</html>

这可行,但如果我将 CSS 元素更改为:

rect:hover{
fill: blue;
}

悬停时颜色不会改变。到底是怎么回事?它部分有效?

最佳答案

What is going on? It partially works?

内联样式(通过 style 属性添加)更具体,这意味着它会覆盖悬停时添加的颜色。添加到元素的内联样式将始终覆盖 CSS 中的任何样式(除非您使用 !important,应始终避免这种情况)。

请参阅关于 CSS specificity 的 MDN 文章.

如果您使用选择器 rect 设置初始颜色,它将按预期工作,因为 rect:hover 具有更高的 specificityrect 这意味着它将被覆盖。

rect {
fill: #d64526
}
rect:hover {
fill: blue;
}
<svg>
<rect width="300" height="100" />
</svg>

关于html - 我可以将 CSS 与 SVG 一起使用还是只能部分使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34731654/

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