使用CSS更改加载的svg的填充和/或描边颜色

在下面的示例中，我创建了自己的列表项图标，方法是将它们作为背景图像嵌入到列表项元素中，并将background-repeat设置为no-repeat。

ul
{
padding: 0;
}

li:nth-child(1) {
  list-style: none;
  padding: 10px 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='blue' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-home'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
}

li:nth-child(2) {
  list-style: none;
  padding: 10px 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='blue' class='bi bi-linkedin' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px;
}

个字符
对于一个HTML文档，我可以让这些列表标记保持如上所示的蓝色。但是，对于另一个文档，我想默认为另一种颜色，例如红色。
应用过滤器是不行的，因为它似乎也会影响列表项的文本内容。我只需要修改列表项标记的颜色。
如何使用CSS来强制执行此行为？即，如何在不复制url()中的整个数据链接的情况下，使列表标记在一个页面中显示为蓝色，在另一个页面中显示为红色？
上面提到的重复不是重复，因为它没有解决使用background-image属性加载SVG的极端情况。当SVG用作背景图像时，它不是DOM的一部分，因此不能直接用JavaScript操作

正如@chrwahl提到的，你可以使用mask-image代替background-image。
请参阅下面的示例，您的初始方法，但使用mask-image CSS而不是background-image CSS为您的svg图像url().

:root {
  --DodgerBlue: #1E90FF;
  --MediumSlateBlue: #7B68EE;
}

ul {
  padding: 0;
}

li {
  list-style: none;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}

li a {
  color: var(--DodgerBlue);
  text-decoration: none;
}

li::before {
  background: var(--DodgerBlue);
  content: '';
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

li:hover a {
  color: var(--MediumSlateBlue);
}

li:hover::before {
  background: var(--MediumSlateBlue);
}

li:nth-child(1)::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
}

li:nth-child(2)::before {
  mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4' /%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4' /%3E%3C/svg%3E");
  mask-size: 20px;
  -webkit-mask-size: 20px;
}

个字符
见小提琴版本. https://jsfiddle.net/joshmoto/Ljgofkt5/34/
这里是另一个使用相同的mask-image方法的例子，但是使用i html标记的图标的语法更易于管理，可以通过调整父标记的字体大小轻松调整大小。

:root {
  --DodgerBlue: #1E90FF;
  --MediumSlateBlue: #7B68EE;
}

ul {
  padding: 0;
}

.first-list {
  font-size: 1rem;
}

.second-list {
  font-size: 1.5rem;
}

.third-list {
  font-size: 2rem;
}

li {
  list-style: none;
  margin-bottom: 10px;
}

li a {
  color: var(--DodgerBlue);
  text-decoration: none;
}

.icon {
  display: inline-block;
  width: 1.25em;
}

.icon::before {
  background: var(--DodgerBlue);
  content: '&nbsp;';
  width: 100%;
  display: inline-block;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: auto 100%;
  -webkit-mask-size: auto 100%;
  mask-position: center;
  -webkit-mask-position: center;
}

li:hover a {
  color: var(--MediumSlateBlue);
}

li:hover a .icon::before {
  background: var(--MediumSlateBlue);
}

.icon-home::before {
  --IconHome: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: var(--IconHome);
  -webkit-mask-image: var(--IconHome);
}

.icon-linkedin::before {
  --IconLinkedin: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4' /%3E%3C/svg%3E");
  mask-image: var(--IconLinkedin);
  -webkit-mask-image: var(--IconLinkedin);
}

<ul class="first-list">
    <li><a href="#"><i class="icon icon-home"></i> First item</a></li>
    <li><a href="#"><i class="icon icon-linkedin"></i> Second item</a></li>
</ul>

<ul class="second-list">
    <li><a href="#"><i class="icon icon-home"></i> First item</a></li>
    <li><a href="#"><i class="icon icon-linkedin"></i> Second item</a></li>
</ul>

<ul class="third-list">
    <li><a href="#"><i class="icon icon-home"></i> First item</a></li>
    <li><a href="#"><i class="icon icon-linkedin"></i> Second item</a></li>
</ul>

的字符串
见小提琴版本. https://jsfiddle.net/joshmoto/cunrsj2v/43/

使用CSS更改加载的svg的填充和/或描边颜色

1条答案

相关问题

热门标签

最新问答