问题是我无法在 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>
这是解决不适合我的问题的糟糕方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<svg width="0" height="0" style='display: none;' xmlns="http://www.w3.org/2000/svg">
<symbol viewBox="0 0 2048 2048" id="crossBtnBlue">
<path class="pathCrossBtn" fill="blue" 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>
<symbol viewBox="0 0 2048 2048" id="crossBtnRed">
<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="#crossBtnRed"></use>
</svg>
</span>
<script>
;(function(){
$('.crossBtn')
.mouseover(function(){
$('span svg use').attr('xlink:href','#crossBtnBlue');
})
.mouseleave(function(){
$('span svg use').attr('xlink:href','#crossBtnRed');
})
}());
</script>
</body>
</html>
最佳答案
使用 currentcolor在 path fill <symbol> 的属性元素。
The currentcolor keyword represents the value of an element's color property. This lets you use the color value on properties that do not receive it by default.
然后，添加
color CSS 属性到 <svg> 的类包装 <symbol> 的容器由 <use> 实例化元素。.icon {
width: 30px;
height: 30px;
}
.icon--blue {
color: blue;
}
.icon--red {
color: red;
}<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="currentcolor" 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>
<svg class="icon icon--red" viewBox="0 0 2048 2048">
<use xlink:href="#crossBtn"></use>
</svg>
<svg class="icon icon--blue" viewBox="0 0 2048 2048">
<use xlink:href="#crossBtn"></use>
</svg>关于css - SVG 的填充属性在 Chrome 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39356404/