对外部 SVG 文件使用 CSS 悬停？
Posted
技术标签:
【中文标题】对外部 SVG 文件使用 CSS 悬停？【英文标题】：Use CSS hover with external SVG files? 【发布时间】：2018-06-06 09:52:12 【问题描述】：我有一个带有内联样式表的外部 SVG 文件，如下所示：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300.00006 244.18703" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs>
<style type="text/css"><![CDATA[
svg, svg *
pointer-events: all;
svg g
transition: fill 0.2s;
fill: #303030;
svg:hover g
fill: #6CADDE;
]]></style>
</defs>
<g style="" transform="translate(-539.18 -568.86)">
<path d="m633.9 812.04c112.46 0 (...) 27.464"/>
</g>
</svg>
当我在 Firefox 中自行打开此文件时，它会按预期工作。但是，如果我将 html 文件中的元素用作 <img src="image.svg"> 并将其链接到 SVG，则不会触发悬停动画。我做错了什么？
【问题讨论】：
向我们展示包括 SVG 在内的完整代码 @TemaniAfif 更新 它在 Chrome 上对我来说工作正常 .. 我有悬停效果 可以创建一个完整的小提琴来重现行为？ 当 SVG 被用作图像时，即通过要使其正常工作，您需要将 SVG 插入 HTML 代码本身。
使用 src 添加外部 SVG 将只允许将 CSS 添加到整个 SVG 元素，而不是内部子标签。
另外，你能显示更多的代码吗？这样才能更好地理解问题。
例如：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<style media="screen">
circle:hover
fill: blue;
</style>
</head>
<body>
<svg >
<circle cx="50" cy="50" r="40" stroke="green" stroke- fill="yellow" />
</svg>
</body>
</html>
【讨论】：
我用我的完整代码更新了我的答案，CSS 位于 SVG 文件本身中。这会改变一切吗？ 是的，我明白你的意思。您需要从 image.svg 复制完整的 SVG 代码并将其粘贴到您的 HTML 文件中，而不是将其与 src 链接。问题是当您加载 HTML 页面时。不使用 image.svg 的内联样式，而是使用 HTML 文件中的样式。因此，首先从 image.svg 复制完整的 SVG 代码，将其粘贴到您的 HTML 文件中，然后将 CSS 应用于以上是关于对外部 SVG 文件使用 CSS 悬停？的主要内容，如果未能解决你的问题，请参考以下文章