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使用插入要使用的位置：

<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

如何将类应用于svg onclick？

1 个答案: