如何设置简单的 css `:hover {` 颜色更改在 `background:url()` 中使用的 `svg`

Question

我正在尝试设置一个简单的CSS

:hover {

颜色改变在

svg

中使用的

background:url()

我正在尝试使用

stroke="currentColor"

，但这不起作用。

唯一可能的方法似乎是通过更改颜色来复制代码，但显然这不是最优雅的解决方案。

我错过了什么吗？

这是我的代码：

.sz30 {
  --siz   : 30px;
  display : inline-block;
  width   : var(--siz);
  height  : var(--siz);
  margin  : 1rem;
  background-size : cover;
  cursor          : pointer;
  caret-color     : transparent;
  }

.test_ccGreen {
  color:green;
  background : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke-width="3" stroke="currentColor"><path d="M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z"/><path d="M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z"/></svg>');
  }
.test_ccBlue {  
  color:blue;
  background : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke-width="3"  ><defs>%3Cstyle%3Epath{stroke:currentColor;}%3C/style%3E</defs><path d="M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z"/><path d="M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z"/></svg>');
}
.test_ccGreen:hover, .test_ccBlue:hover { color:red; } 

.test_duplicateSVG {
  background : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke-width="3" stroke="rgb(24,97,52)"><path d="M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z"/><path d="M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z"/></svg>');
}

.test_duplicateSVG:hover {
  background : url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke-width="3" stroke="crimson"><path d="M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z"/><path d="M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z"/></svg>');
}

<div class="sz30 test_ccGreen"></div>
<div class="sz30 test_ccBlue"></div>

<div class="sz30 test_duplicateSVG"></div>

Answer 1

首先，背景图像：url svg*** 它不是 svg。它的渲染就像图像一样。 所以你不能在那里使用 svg 道具。这只是形象。 你会使用过滤方法。

如果你想使用 svg 之类的。只需将 svg 代码粘贴到 html 中，然后编写 css 即可。

为您提供 2 个示例：

.sz30 {
  --siz: 30px;
  display: inline-block;
  width: var(--siz);
  height: var(--siz);
  margin: 1rem;
  background-size: cover;
  cursor: pointer;
  caret-color: transparent;
}

.test_ccGreen {
  color: green;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke-width="3" stroke="currentColor"><path d="M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z"/><path d="M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z"/></svg>');
}

.sz30:hover {
  filter: invert(73%) sepia(14%) saturate(666%) hue-rotate(301deg) brightness(108%) contrast(101%);
}


/* 
filter generator:
https://codepen.io/sosuke/pen/Pjoqqp
*/


/* css*/

.real-svg svg {
  stroke: pink;
  max-height: 50px;
}

.real-svg svg:hover {
  stroke: black;
}


/* and for images*/

<!--oldies-->
<div class="sz30 test_ccGreen"></div>

<!--goldies-->
<div class="real-svg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke-width="3" stroke="crimson"><path d="M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z"/><path d="M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z"/></svg>
</div>

Answer 2

我认为你正在将 SVG 填充到

background

中，因为你想防止样式出血、重复 ID 问题等。甚至可能还有 SSG。

我还假设（因为你正在绘制图标）你正在创建 UI 图标，而不是巨大的 SVG

定义一个 native Web 组件

<svg-icon>

来创建所有 SVG 客户端;

可能会更容易

使用shadowDOM，您可以获得与IMG背景相同的封装，但能够使用全局CSS对其进行样式化（因为像color这样的

可继承

样式会级联到shadowDOM中）

<style>
  svg-icon {
    color: grey;
    --iconhovercolor:green;
    width: 120px;
  }
</style>

<svg-icon></svg-icon>
<svg-icon is="plus" style="color:hotpink"></svg-icon>
<svg-icon is="plus" style="color:blue"></svg-icon>

<script>
  customElements.define('svg-icon', class extends HTMLElement {
    connectedCallback() {
      Object.assign(this.style, { display: "inline-block", cursor: "pointer" });
      let is    = this.getAttribute("is")    || "plus";
      let color = this.getAttribute("color") || "currentcolor";
      let d = {
        "plus": "m40 80 40 0 0-40 40 0 0 40 40 0 0 40-40 0 0 40-40 0 0-40-40 0z",
        "save": "ADD YOUR OWN ICONS HERE"
      }[is];
      this.attachShadow({mode:"open"})
          .innerHTML = `<style>
                          path{fill:${color}}
                          svg{vertical-align:top}
                          svg:hover{color:var(--iconhovercolor,red)}
                        </style>
                        <svg viewBox="0 0 200 200">
                          <path d="${d}" stroke="${color}"/>
                        </svg>`;
      this.onclick = (evt) => {
           console.log("You clicked me!", is);
      }
      this.onmouseover = (evt) => {
        //
      }
    }});
</script>