在 <img> 标签中使用时，嵌入在 SVG 中的动态 CSS 不起作用
Posted
技术标签:
【中文标题】在 <img> 标签中使用时，嵌入在 SVG 中的动态 CSS 不起作用【英文标题】：Dynamic CSS embedded in an SVG doesn't work when used in an <img> tag 【发布时间】：2016-05-29 21:13:45 【问题描述】：我有一个非常简单的小 SVG。它显示了一个由浅灰色点组成的小网格，当鼠标悬停时，这些点会变成深灰色，这是由嵌入在 SVG 文件中的一些 CSS 触发的：
<?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" 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>但是，当我通过 <img> 标记将 SVG 嵌入 html 页面时，它会显示应用了基本 fill: #999 的 SVG，但 :hover 样式完全停止工作（演示：https://plnkr.co/edit/yqR5bZEVEt2ZjpKGXeSb） .
我知道我不能在样式标记或外部样式表中使用 CSS 来设置通过 <img> 标记包含的 SVG 元素的样式，但我希望嵌入在 SVG 文件本身中的 CSS 仍然可以工作，而且它有一半做。浏览器事件是否未正确传递给 SVG 文件？我正在尝试做的事情是不可能的吗？
【问题讨论】：
【参考方案1】：img 标签不允许交互式 svg。尝试用object 标记更改img 标记。这将使 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>
演示： https://plnkr.co/edit/i9VCecx2NxIHMaSr2lmB?p=preview
更多关于在this question.中使用的标签类型的信息@
【讨论】：
您好，感谢您的解决方案。所以如果我们只想在页面上使用两次 svg 文件，你有什么建议让它更优化？ : 1) 创建两个单独的 svg 文件并根据需要自定义每个文件 --- 或 --- 2) 只需一个 svg 文件并使用您的解决方案在两个地方对其进行自定义以上是关于在 <img> 标签中使用时，嵌入在 SVG 中的动态 CSS 不起作用的主要内容，如果未能解决你的问题，请参考以下文章