Question

我有一个非常简单的小SVG。它显示了一个小灰色点网格，在鼠标悬停时，点变成深灰色，由SVG文件中嵌入的一些CSS触发：

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="32" viewBox="0 0 12 32">
  <defs>
    <style type="text/css">
      #handle path {
        fill: #999;
        stroke-width: 5px;
        stroke: transparent;
      }
      #handle:hover path {
        fill: #333;
      }
    </style>
  </defs>
  <g id="handle">
    <path d="M0,2h4v4h-4v-4z"></path>
    <path d="M0,10h4v4h-4v-4z"></path>
    <path d="M0,18h4v4h-4v-4z"></path>
    <path d="M0,26h4v4h-4v-4z"></path>
    <path d="M8,2h4v4h-4v-4z"></path>
    <path d="M8,10h4v4h-4v-4z"></path>
    <path d="M8,18h4v4h-4v-4z"></path>
    <path d="M8,26h4v4h-4v-4z"></path>
  </g>
</svg>

＆＃13;

但是，当我通过<img>标记将SVG嵌入到HTML页面中时，它会显示我的SVG已应用基本fill: #999，但:hover样式完全停止工作（演示：https://plnkr.co/edit/yqR5bZEVEt2ZjpKGXeSb）。

我知道我不能在样式标签或外部样式表中使用CSS来设置通过<img>标签包含的SVG元素的样式，但我希望嵌入在SVG文件中的CSS本身仍然可以工作，它有一半。浏览器事件是否未正确传递给SVG文件？我试图做的只是不可能吗？

Answer 1

img代码不允许互动svg。尝试使用img标记更改object标记。这将使svg互动。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <object type="image/svg+xml" data="dots.svg"></object>
</body>

</html>

DEMO： https://plnkr.co/edit/i9VCecx2NxIHMaSr2lmB?p=preview

有关在this question.

中使用SVG的标记类型的详细信息

嵌入在SVG中的动态CSS在<img/>标记中使用时不起作用

1 个答案: