麻烦的是,我无法在Chrome中的fill属性中设置值(颜色),但在Firefox中它可以工作。我尝试了很多方法来做,但是没有结果。我看到的更改SVG图标颜色的唯一方法是通过jQuery(或JavaScript)更改<symbol>下面的id来实现。请帮我解决这个问题!
这是我需要在Chrome中使用的功能:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span:hover .pathCrossBtn{
fill: blue;
}
</style>
</head>
<body>
<svg width="0" height="0" style='display: none;' xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 2048 2048" id="crossBtn">
<path class="pathCrossBtn" fill="red" d="M1618 1450q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
</symbol>
</svg>
<span>
<svg class="crossBtn" viewBox="0 0 2048 2048" width="30" height="30">
<use xlink:href="#crossBtn"></use>
</svg>
</span>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这是解决我不适合我的问题的不好方法。 …