是否将CSS悬停与外部SVG文件一起使用？_Css_Svg_Hover_Css Animations

是否将CSS悬停与外部SVG文件一起使用？

css svg

是否将CSS悬停与外部SVG文件一起使用？,css,svg,hover,css-animations,Css,Svg,Hover,Css Animations,我有一个带有内联样式表的外部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" ve

我有一个带有内联样式表的外部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文件中使用元素作为

，并将其链接到SVG，则不会触发悬停动画。我做错了什么？

要使其正常工作，需要在HTML代码中插入SVG

使用src添加外部SVG只允许将CSS添加到整个SVG元素，而不允许添加内部子标签

另外，你能再展示一些代码吗？以便更好地理解问题

例如：


SVG
圆圈：悬停{
填充：蓝色；
}

向我们显示完整的代码，包括SVG@TemaniAfifupdatedit在Chrome上对我来说很好。。我有悬停效果，你可以创建一个完整的小提琴来重现你的行为吗？当SVG被用作图像，即通过文件或背景图像时，它不是交互式的，因此：悬停将不起作用。我用我的完整代码更新了我的答案，CSS在SVG文件本身内部。这会改变一切吗？是的，我明白你的意思。您需要从image.SVG复制完整的SVG代码，并将其粘贴到HTML文件中，而不是将其与src链接。问题在于加载HTML页面时。未使用image.svg的内联样式，而是使用HTML文件中的样式。因此，首先从image.SVG复制完整的SVG代码并将其粘贴到HTML文件中，然后将CSS应用于标记。

<!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>