那些遇到过的问题

SVG 精灵中的多种颜色

Tur*_*nip 9 css svg

我有一个 SVG 精灵，如下所示。

使用标签技术时，似乎无法从 CSS 访问 SVG 的各个部分<use>。

我知道通过使用fill: currentColor（参见.path1符号#icon-two-parts），可以通过使用 和color值将两种不同的颜色应用于 CSS 中同一 SVG 的不同部分fill。

以这种方式使用 SVG 时，是否有任何方法可以将两种以上的颜色应用于同一元素？

例如，是否可以将四种颜色应用于#icon-four-part符号内的四个路径？

div {
    display: inline-block;
}

.icon {
  display: inline-block;
  width: 80px;
  height: 40px;
  fill: currentColor;
}

.icon-one-part {
    color: green;
}

.icon-two-part {
    color: green;
    fill: red;
}
Run Code Online (Sandbox Code Playgroud) 
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <symbol id="icon-one-part" viewBox="0 0 670 1024">
        <title>icon-one-part</title>
        <path class="path1" d="M355.486 512l-343.355-337.408c-16.148-15.872-16.148-41.314 0-57.147l107.362-105.551c16.148-15.833 42.023-15.833 58.171 0l479.823 471.513c16.148 15.872 16.148 41.354 0 57.226l-479.862 471.473c-16.108 15.833-41.984 15.833-58.171 0l-107.362-105.551c-16.148-15.833-16.148-41.275 0-57.147l343.394-337.408z"></path>
    </symbol>

    <symbol id="icon-two-part" viewBox="0 0 1339 1024">
        <title>icon-two-part</title>
        <path class="path1" fill="currentColor" d="M314.092 512l343.355 337.408c16.148 15.872 16.148 41.314 0 57.147l-107.362 105.551c-16.148 15.833-42.023 15.833-58.171 0l-479.783-471.513c-16.148-15.872-16.148-41.354 0-57.226l479.783-471.513c16.108-15.833 41.984-15.833 58.171 0l107.362 105.551c16.148 15.833 16.148 41.275 0 57.147l-343.355 337.447z"></path>
        <path class="path2" d="M1025.024 512l-343.316-337.408c-16.148-15.872-16.148-41.314 0-57.147l107.323-105.551c16.148-15.833 42.063-15.833 58.171 0l479.862 471.513c16.148 15.872 16.148 41.354 0 57.226l-479.902 471.473c-16.069 15.833-41.984 15.833-58.171 0l-107.323-105.551c-16.148-15.833-16.148-41.275 0-57.147l343.355-337.408z"></path>
    </symbol>
    
    <symbol id="icon-four-part" viewBox="0 0 2272 1024">
        <title>icon-four-part</title>
        <path class="path1" d="M777.413 512l343.355 337.408c16.148 15.872 16.148 41.314 0 57.147l-107.362 105.551c-16.148 15.833-42.023 15.833-58.171 0l-479.783-471.473c-16.148-15.872-16.148-41.354 0-57.226l479.823-471.513c16.108-15.833 41.984-15.833 58.171 0l107.362 105.551c16.148 15.833 16.148 41.275 0 57.147l-343.394 337.408z"></path>
        <path class="path2" d="M1488.384 512l-343.316-337.408c-16.148-15.872-16.148-41.314 0-57.147l107.323-105.551c16.148-15.833 42.063-15.833 58.171 0l479.862 471.513c16.148 15.872 16.148 41.354 0 57.226l-479.902 471.473c-16.069 15.833-41.984 15.833-58.171 0l-107.323-105.551c-16.148-15.833-16.148-41.275 0-57.147l343.355-337.408z"></path>
        <path class="path3" d="M314.092 512l343.355 337.408c16.148 15.911 16.148 41.314 0 57.147l-107.362 105.551c-16.148 15.833-42.023 15.833-58.171 0l-479.783-471.473c-16.148-15.872-16.148-41.354 0-57.226l479.783-471.513c16.108-15.833 41.984-15.833 58.171 0l107.362 105.551c16.148 15.833 16.148 41.275 0 57.147l-343.355 337.408z"></path>
        <path class="path4" d="M1958.203 512l-343.316-337.408c-16.148-15.872-16.148-41.314 0-57.147l107.323-105.551c16.148-15.833 42.063-15.833 58.171 0l479.862 471.513c16.148 15.872 16.148 41.354 0 57.226l-479.902 471.473c-16.069 15.833-41.984 15.833-58.171 0l-107.323-105.551c-16.148-15.833-16.148-41.236 0-57.147l343.355-337.408z"></path>
    </symbol>
</defs>
</svg>

<div>
    <svg class="icon icon-one-part"><use xlink:href="#icon-one-part"></use></svg>
</div>
<div>
    <svg class="icon icon-two-part"><use xlink:href="#icon-two-part"></use></svg>
</div>
<div>
    <svg class="icon icon-four-parts"><use xlink:href="#icon-icon-four-part"></use></svg>
</div>
Run Code Online (Sandbox Code Playgroud)

Man*_*piK 8

事实上，该<use>元素是一个引用，它将 it\xe2\x80\x99s 指向的内容克隆到影子 DOM 中。它\xe2\x80\x99 不是一个会被 SVG 定义替换的占位符。这就是为什么您可以设置符号定义本身的样式，而不是图标的样式。样式定义像任何 css 属性一样传播到图标。祖先\xe2\x80\x99不知道孩子们，但可继承的样式仍然传播......
\n但是我们希望用不同的颜色填充每个路径，而不改变其他实例，并且我们希望能够覆盖如果有必要的话。

\n\n

为此，我们可以使用 CSS 变量。
\nCSS 变量在规则集中声明，就像任何其他属性一样。然后，您将其声明为自身或任何子属性的值，并且它将被继承。

\n\n

让我们将这个概念应用到我们的 SVG 元素中：

\n\n

\r\n
\r\n
div {\r\n    display: inline-block;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.icon {\r\n  display: inline-block;\r\n  width: 80px;\r\n  height: 40px;\r\n  fill: currentColor;\r\n}\r\n\r\n.icon-one-part.green {\r\n  --color-1: green;\r\n}\r\n.icon-one-part.red {\r\n  --color-1: red;\r\n}\r\n\r\n.icon-two-part.style1 {\r\n  --color-1: #ff9900;\r\n  --color-2: #78ae90;\r\n}\r\n.icon-two-part.style2 {\r\n  --color-1: #2124af;\r\n  --color-2: #ef5b59;\r\n}\r\n\r\n.icon-four-part.style1 {\r\n  --color-1: #FB7C1F;\r\n  --color-2: #F38D68;\r\n  --color-3: #FB7C1F;\r\n  --color-4: #F38D68;\r\n}\r\n.icon-four-part.style2 {\r\n  --color-1: #007978;\r\n  --color-2: #23518C;\r\n  --color-3: #83B692;\r\n  --color-4: #4AA0CF;\r\n}
Run Code Online (Sandbox Code Playgroud)\r\n
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\r\n<defs>\r\n    <symbol id="icon-one-part" viewBox="0 0 670 1024">\r\n        <title>icon-one-part</title>\r\n        <path class="path1" fill="var(--color-1)" d="M355.486 512l-343.355-337.408c-16.148-15.872-16.148-41.314 0-57.147l107.362-105.551c16.148-15.833 42.023-15.833 58.171 0l479.823 471.513c16.148 15.872 16.148 41.354 0 57.226l-479.862 471.473c-16.108 15.833-41.984 15.833-58.171 0l-107.362-105.551c-16.148-15.833-16.148-41.275 0-57.147l343.394-337.408z"></path>\r\n    </symbol>\r\n\r\n    <symbol id="icon-two-part" viewBox="0 0 1339 1024">\r\n        <title>icon-two-part</title>\r\n        <path class="path1" fill="var(--color-1)" d="M314.092 512l343.355 337.408c16.148 15.872 16.148 41.314 0 57.147l-107.362 105.551c-16.148 15.833-42.023 15.833-58.171 0l-479.783-471.513c-16.148-15.872-16.148-41.354 0-57.226l479.783-471.513c16.108-15.833 41.984-15.833 58.171 0l107.362 105.551c16.148 15.833 16.148 41.275 0 57.147l-343.355 337.447z"></path>\r\n        <path class="path2" fill="var(--color-2)" d="M1025.024 512l-343.316-337.408c-16.148-15.872-16.148-41.314 0-57.147l107.323-105.551c16.148-15.833 42.063-15.833 58.171 0l479.862 471.513c16.148 15.872 16.148 41.354 0 57.226l-479.902 471.473c-16.069 15.833-41.984 15.833-58.171 0l-107.323-105.551c-16.148-15.833-16.148-41.275 0-57.147l343.355-337.408z"></path>\r\n    </symbol>\r\n    \r\n    <symbol id="icon-four-part" viewBox="0 0 2272 1024">\r\n        <title>icon-four-part</title>\r\n        <path class="path1" fill="var(--color-1)" d="M777.413 512l343.355 337.408c16.148 15.872 16.148 41.314 0 57.147l-107.362 105.551c-16.148 15.833-42.023 15.833-58.171 0l-479.783-471.473c-16.148-15.872-16.148-41.354 0-57.226l479.823-471.513c16.108-15.833 41.984-15.833 58.171 0l107.362 105.551c16.148 15.833 16.148 41.275 0 57.147l-343.394 337.408z"></path>\r\n        <path class="path2" fill="var(--color-2)" d="M1488.384 512l-343.316-337.408c-16.148-15.872-16.148-41.314 0-57.147l107.323-105.551c16.148-15.833 42.063-15.833 58.171 0l479.862 471.513c16.148 15.872 16.148 41.354 0 57.226l-479.902 471.473c-16.069 15.833-41.984 15.833-58.171 0l-107.323-105.551c-16.148-15.833-16.148-41.275 0-57.147l343.355-337.408z"></path>\r\n        <path class="path3" fill="var(--color-3)" d="M314.092 512l343.355 337.408c16.148 15.911 16.148 41.314 0 57.147l-107.362 105.551c-16.148 15.833-42.023 15.833-58.171 0l-479.783-471.473c-16.148-15.872-16.148-41.354 0-57.226l479.783-471.513c16.108-15.833 41.984-15.833 58.171 0l107.362 105.551c16.148 15.833 16.148 41.275 0 57.147l-343.355 337.408z"></path>\r\n        <path class="path4" fill="var(--color-4)" d="M1958.203 512l-343.316-337.408c-16.148-15.872-16.148-41.314 0-57.147l107.323-105.551c16.148-15.833 42.063-15.833 58.171 0l479.862 471.513c16.148 15.872 16.148 41.354 0 57.226l-479.902 471.473c-16.069 15.833-41.984 15.833-58.171 0l-107.323-105.551c-16.148-15.833-16.148-41.236 0-57.147l343.355-337.408z"></path>\r\n    </symbol>\r\n</defs>\r\n</svg>\r\n\r\n<div>\r\n    <svg class="icon icon-one-part green"><use xlink:href="#icon-one-part"></use></svg>\r\n</div>\r\n<div>\r\n    <svg class="icon icon-one-part red"><use xlink:href="#icon-one-part"></use></svg>\r\n</div>\r\n<br>\r\n\r\n<div>\r\n    <svg class="icon icon-two-part style1"><use xlink:href="#icon-two-part"></use></svg>\r\n</div>\r\n<div>\r\n    <svg class="icon icon-two-part style2"><use xlink:href="#icon-two-part"></use></svg>\r\n</div>\r\n<br>\r\n\r\n<div>\r\n    <svg class="icon icon-four-part style1"><use xlink:href="#icon-four-part"></use></svg>\r\n</div>\r\n<div>\r\n    <svg class="icon icon-four-part style2"><use xlink:href="#icon-four-part"></use></svg>\r\n</div>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n\n

我们不必\xe2\x80\x99t 声明所有CSS 变量的颜色。相反，我们可以声明一个单一的fill，因为 CSS 变量没有定义\xe2\x80\x99t，它将依赖于这个fill声明。
\n我们还可以将默认值应用于 css 变量：\nvar(--color-1, red)并避免为每个图标声明默认颜色。

\n\n

最重要的是，CSS 变量现在与大多数现代浏览器兼容！

\n

Pau*_*eau 4

您可以设置符号定义本身的样式。例如。：

#icon-one-part {
    fill: green;
}

#icon-two-part .path1 {
    fill: green;
}
#icon-two-part .path2 {
    fill: red;
}
Run Code Online (Sandbox Code Playgroud)

但是，如果您需要重复使用相同的图标，并且让每个实例具有不同的颜色，那么您就不得不使用该currentColor技术。

  • 是的，这就是问题所在。我需要能够分别设置符号的各个实例的样式。哦，内联 SVG 看起来是最好的解决方案。尽管我试图避免它。 (3认同)

归档时间：

查看次数：

7188 次

最近记录：

4 年，1 月 前
相关归档
Google字体违反了内容安全政策 40
用CSS包装div周围的文本 27
如何在CSS网格布局中指定行高？ 27
如何使div扩展以适应可用的垂直空间？ 22
在带有子元素的<div>上使用object-fit,包括<canvas> 20
将按钮和链接放在particles.js脚本(Z-index)上 16
在Python中调用Inkscape 5
SVG url 的 currentColor 继承 5
从左到右填充svg 3
使用 CSS 转换为 SVG 元素的位置设置动画 2
难疑归档
什么是Python中的元类？ 5409
"INNER JOIN"和"OUTER JOIN"有什么区别？ 4506
在git中推送提交时,src refspec master与any不匹配 2472
删除文件或文件夹 1910
Java内部类和静态嵌套类 1691
图像处理:"可口可乐罐"识别的算法改进 1585
显示屏上的转换:属性 1322
Git diff对付藏匿处 1265
使用react路由器以编程方式导航 1251
自我的目的是什么？ 1061