SVG精灵中的多种颜色

时间:2015-06-25 16:44:34

标签: css svg

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

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

我知道通过使用fill: currentColor(请参阅.path1符号中的#icon-two-parts),可以将两种不同的颜色应用于CSS中同一SVG的不同部分colorfill值。

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

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

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:3)

您可以自己设置符号定义的样式。例如:

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

#icon-two-part .path1 {
    fill: green;
}
#icon-two-part .path2 {
    fill: red;
}

但是如果您需要重复使用相同的图标,并且每个实例都是不同的颜色,那么您将无法使用currentColor技术。

答案 1 :(得分:2)

除了 ManUtopiK 的 CSS 自定义属性方法之外,您还可以通过将 color(通过 currentcolor)和 fill 寻址的 SVG 元素与不透明度混合来创建第三种颜色

Demo (Codepen project) | Detailed explainer (Twitter thread)

您还可以使用 stroke 为您提供 4 种以上的可寻址颜色如果您的精灵可以由两个仅笔画fill: none ) 和 只填充 (stroke: none) 个元素

答案 2 :(得分:0)

实际上,<use>元素是一个引用,它将指向的内容克隆到影子DOM中。它不是由您的SVG定义取代的占位符。这就是为什么您可以设置符号定义本身而不是图标样式的原因。定义的样式会像任何CSS属性一样传播到图标。祖先不知道这些孩子,但是可继承的样式仍然在传播...
但是我们希望用不同的颜色填充每个路径,而无需更改其他实例,并且希望能够在必要时覆盖它。

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

让我们将此概念应用于我们的SVG元素:

div {
    display: inline-block;
    margin-bottom: 20px;
}

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

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

.icon-two-part.style1 {
  --color-1: #ff9900;
  --color-2: #78ae90;
}
.icon-two-part.style2 {
  --color-1: #2124af;
  --color-2: #ef5b59;
}

.icon-four-part.style1 {
  --color-1: #FB7C1F;
  --color-2: #F38D68;
  --color-3: #FB7C1F;
  --color-4: #F38D68;
}
.icon-four-part.style2 {
  --color-1: #007978;
  --color-2: #23518C;
  --color-3: #83B692;
  --color-4: #4AA0CF;
}
<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" 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>
    </symbol>

    <symbol id="icon-two-part" viewBox="0 0 1339 1024">
        <title>icon-two-part</title>
        <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>
        <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>
    </symbol>
    
    <symbol id="icon-four-part" viewBox="0 0 2272 1024">
        <title>icon-four-part</title>
        <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>
        <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>
        <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>
        <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>
    </symbol>
</defs>
</svg>

<div>
    <svg class="icon icon-one-part green"><use xlink:href="#icon-one-part"></use></svg>
</div>
<div>
    <svg class="icon icon-one-part red"><use xlink:href="#icon-one-part"></use></svg>
</div>
<br>

<div>
    <svg class="icon icon-two-part style1"><use xlink:href="#icon-two-part"></use></svg>
</div>
<div>
    <svg class="icon icon-two-part style2"><use xlink:href="#icon-two-part"></use></svg>
</div>
<br>

<div>
    <svg class="icon icon-four-part style1"><use xlink:href="#icon-four-part"></use></svg>
</div>
<div>
    <svg class="icon icon-four-part style2"><use xlink:href="#icon-four-part"></use></svg>
</div>

我们不必为所有CSS变量声明颜色。相反,我们可以声明一个fill,因为未定义CSS变量,因此它会依赖此fill声明。
我们还可以将默认值应用于css变量: var(--color-1, red),并避免为每个图标声明默认颜色。

最重要的是,CSS变量现在在大多数现代浏览器中都是compatible