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

【问题标题】：fill property of SVG does not working in ChromeSVG 的填充属性在 Chrome 中不起作用
【发布时间】：2021-02-05 17:11:04
【问题描述】：

问题是我无法在 Chrome 的填充属性中设置值（颜色），但在 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>

【问题讨论】：

@RobertLongson 想确保我理解：你是说这是 use 引用的 svg 中的错误，因为嵌入的 svg 位于 shadow dom 中？
@henry Firefox 已修复其实现以匹配 SVG 2 规范。每晚试试看。我想 Chrome 将与 SVG 2 规范保持一致，如果它还没有的话。
@RobertLongson ????但我仍然不清楚“这是一个已知的错误”中的“这个”到底是什么。我试过寻找错误票，但到目前为止没有运气。
@henry bugzilla.mozilla.org/show_bug.cgi?id=265894

标签： css google-chrome svg fill

【解决方案1】：

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

currentcolor 关键字表示元素颜色的值财产。这使您可以在不使用的属性上使用颜色值默认接收。

然后，将color CSS 属性添加到<svg> 容器的类中，该容器将包装由<use> 元素实例化的<symbol>。

.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>

【讨论】：

【解决方案2】：

不完全是上述问题的通用解决方案，但我来这里是为了解决类似的问题，其中 svg 节点上的 fill="none" 在 Chrome 和 Firefox 以及可能的其他浏览器中的所有情况下似乎都不起作用.这段 SCSS 为我们修复了它，在我们的例子中是通过 react-svgr 渲染的 feather icons：

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 元素和具有不同值属性的子元素的情况，因此请根据您的需要进行调整。

【讨论】：