Question

我有一个带有内联样式表的外部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，则不会触发悬停动画。我做错了什么？

Answer 1

要实现这一点，您需要在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>

使用CSS悬停与外部SVG文件？

1 个答案: