我有一个SVG精灵,如下所示。
使用<use>
标记技术时,似乎无法从CSS访问SVG的各个部分。
我知道通过使用fill: currentColor
(请参阅.path1
符号中的#icon-two-parts
),可以将两种不同的颜色应用于CSS中同一SVG的不同部分color
和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;
}
&#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;
答案 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!