时间戳

首页 > 解决方案 > React：SVG 通过 id 或 class 动态添加 CSS

reactjs - React：SVG 通过 id 或 class 动态添加 CSS

问题描述

在 React 我有一个 svg 文件，例如mySVG.svg

<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <rect id="Unit1" class="class1" x="0" y="0" width="10" height="10" fill="blue"/>
  <rect id="Unit2" class="class1" x="10" y="10" width="10" height="10" fill="blue"/>
  <rect id="Unit3" class="class2" x="20" y="20" width="10" height="10" fill="blue"/>
</svg>

然后，在组件文件Example.tsx中，我想根据传入的道具动态设置 svg 的颜色

import  { ReactComponent as mySvg} from 'assets/mySVG.svg';

export function Example(props:{highlighted:string}):ReactElement {

  if (props.highlighted === 'Unit1') {  
    return (
      <mySvg
        //set unit 1 fill color to red
      />
    );
  }

  return (
    <mySvg />
  );
}

如何根据 svg 路径的 id 和 className 动态设置 svg 的填充颜色？

导入具有定义颜色的静态 css 文件将不起作用，因为我需要它动态工作。

标签： reactjssvg

解决方案

您可以操作要导入的文件，但我认为最简单的方法是将 svg 创建为组件。

在此处查看示例： https ://codesandbox.io/s/happy-galois-1tfce

编辑：向 svg 内容添加节点操作和重新序列化。

推荐阅读