css - 如何将类应用于 svg onclick？

Question

我有一个 svg，点击它时 svg 的颜色(应更改为白色)和容纳它的容器 (icon_container) 应更改为蓝色。我该怎么做。下面是代码片段，

state = {
  active: false,
};

click = () => {
  this.setState({active: !this.state.active});
};

render = () => {
  const classes = ['icon_container'];
  if (this.state.active) {
    classes.push('active');
  }

  return (
    <div className={classes.join(' ')}>
      <SvgLayer className="icon" onClick={this.click}/>
    </div>
  );
};

icons {
  margin-top: 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  right: 16px;

  .icon_container {
    background-color: white;

    .icon {
      height: 16px;
      width: 16px;

      * {
        fill: blue;
      }
    }
  }
}

我试过类似下面的方法将 svg 颜色更改为白色，将 icon_container 更改为蓝色...但不起作用。

.active.icons.icon_container {
  background-color: blue;
}

有人可以帮我解决这个问题吗？谢谢。

Answer 1

html:

在正文中使用 svg 将您的 svg 放入 html 中，例如:

将此 svg use 插入您要使用的位置:

<svg id="icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <use xlink:href="#icon"></use>
</svg>

CSS:设置颜色:

#icon-svg use
{
    fill: #000;
}

悬停时更改颜色:

#icon-svg use:hover, 
#icon-svg use:active, 
#icon-svg use:focus
{
    fill: #fff;
}

有用的链接:https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use