SVG 的填充属性在 Chrome 中不起作用

Question

问题是我无法在 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>

Answer 1

在 <symbol> 元素的 path fill 属性中使用 currentcolor。

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> 容器的 class 中，该容器将包装实例化的 <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>

Answer 2

不完全是上述问题的通用解决方案，但我来这里是为了解决类似的问题，其中 svg 节点上的 fill="none" 似乎并非在所有情况下都适用 Chrome 和 Firefox，可能还有其他浏览器。这段 SCSS 为我们修复了它，在我们的例子中是 feather icons rendered via react-svgr:

svg:global(.feather) {
    // Fix for `fill="none"` not working properly in (at least) Chrome and Firefox
    // Part 1: If there is a `fill` property, reset `fill-opacity`.
    //         This is for children of elements with `fill="none"`
    &[fill], *[fill] {
        fill-opacity: initial;
    }
    // Part 2: If the element uses `fill="none"`, set `fill-opacity` to 0.
    &[fill='none'], *[fill='none'] {
        fill-opacity: 0;
    }

}

等同于 CSS，对于一般情况：

svg[fill], svg *[fill] {
    fill-opacity: initial;
}
svg[fill='none'], svg *[fill='none'] {
    fill-opacity: 0;
}

请注意，这可能无法涵盖具有填充属性的 SVG 元素和具有不同值属性的子元素的所有情况，因此请根据您的需要进行调整。

SVG 的填充属性在 Chrome 中不起作用

fill property of SVG does not working in Chrome

css

svg

google-chrome

fill

SVG 的填充 属性 在 Chrome 中不起作用

fill property of SVG does not working in Chrome

css

svg

google-chrome

fill

SVG 的填充属性在 Chrome 中不起作用