gpt4 book ai didi

html - 在 SVG 中嵌入的动态 CSS 在 标签中使用时不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 23:03:46 25 4
gpt4 key购买 nike

我有一个非常简单的小 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 页面时标签,它会用基本的 fill: #999 显示我的 SVG已应用,但 :hover样式完全停止工作(演示:https://plnkr.co/edit/yqR5bZEVEt2ZjpKGXeSb)。

我知道我不能在样式标签或外部样式表中使用 CSS 来设置通过 <img> 包含的 SVG 元素的样式。标签,但我希望 SVG 文件本身中嵌入的 CSS 仍然有效,而且它已经成功了一半。浏览器事件是否未正确传递到 SVG 文件?我想做的事情是不可能的吗?

最佳答案

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

有关与 SVG 一起使用的标签类型的更多信息,请参阅 this question.

关于html - 在 SVG 中嵌入的动态 CSS 在 <img> 标签中使用时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35469023/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com