我有一个非常简单的小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" 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>
但是,当我通过 <img>
标签将SVG嵌入HTML页面时,它将显示我的SVG,其中应用了基本的 fill: #999
,但 :hover
样式完全停止工作(演示:https://plnkr.co/edit/yqR5bZEVEt2ZjpKGXeSb) .
我知道我不能在样式标签或外部样式表中使用CSS来设置通过 <img>
标签包含的SVG元素的样式,但是我希望嵌入在SVG文件中的CSS本身仍然可以工作,而它只有一半 . 浏览器事件是否未正确传递给SVG文件?我想要做的只是不可能吗?
1 回答
img
标签不是't allow interactive svg' . 尝试使用object
标记更改img
标记 . 这将使svg具有交互性 .DEMO: https://plnkr.co/edit/i9VCecx2NxIHMaSr2lmB?p=preview
有关SVG中使用的标签类型的更多信息,请参阅this question.