我有一个带有内联样式表的外部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" height="244.19" width="300" 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，则不会触发悬停动画。我究竟做错了什么？
要实现这一点，您需要在HTML代码中插入SVG。
使用src添加外部SVG只允许将CSS添加到整个SVG元素而不是内部子标签。
还有，你能展示更多代码吗？这样可以更好地理解问题。
例如：
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<style media="screen">
circle:hover{
fill: blue;
}
</style>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>