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

Answer 1

首先，我想向您推荐这个网站，它将普通的svg代码转换为jsx组件。 使用 svg 将必要的 props 传输到组件就足够了

mySVG.jsx

：

import * as React from "react"

function mySVG({color = "#000000", className = "", width = 50, height = 50}) {
  return (
    <svg 
      className={className} 
      width={width} 
      height={height} 
      xmlns="http://www.w3.org/2000/svg"
    >
      <path fill={color} d="M0 0h10v10H0zM10 10h10v10H10z" />
      <path fill={color} d="M20 20h10v10H20z" />
    </svg>
  )
}

export default mySVG

并使用 svg 将必要的数据传输到您的组件

import mySVG from "/you/path/mySVG"


// other code.... 


  return (
    <mySVG 
       color="#ffffff" 
       height={100} 
       width={100} 
       className="my-svg-style" 
    />
  );

Answer 2

您可以操作正在导入的文件，但我认为最简单的方法是将 SVG 嵌入 JSX 组件中或将其转换为一个。

请参阅此处的示例： https://codesandbox.io/s/happy-galois-1tfce

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

Answer 3

给定 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>

我创建了一个辅助函数来获取给定 Ref 的 DOM

getDOMNodeById.ts

export type DOMNode = Element | ChildNode | Text | null;

export function getDOMNodeById(componentDOMNode:DOMNode, id:string): DOMNode | void {
  if (componentDOMNode?.nodeType === Node.ELEMENT_NODE) {
    const element = componentDOMNode as Element;

    if (element.id === id) {
      return element;
    }
    else if (element.hasChildNodes()) {
      for (let i=0; i<element.childNodes.length; i++) {
        const childNode = element.childNodes[i];
        const result = getDOMNodeById(childNode, id);
        if (result) {
          return result;
        }
      }
    }
  }
}

export const isHTMLElement = (v:any): v is HTMLElement => {
    return v instanceof Element || v instanceof HTMLElement;
}

将它们捆绑在一起，向 svg React 组件添加 Ref，调用辅助函数来获取 Ref 的 DOM，然后改变返回的 Element

Example.tsx

import  { ReactComponent as mySvg} from 'assets/mySVG.svg';
import { DOMNode, getDOMNodeById, isHTMLElement } from './getDOMNodeById';

export function Example(props:{highlighted:string}):ReactElement {
  const svgRef = useRef(null);
  const svgDOM = ReactDOM.findDOMNode(svgRef.current);

  if (props.highlighted === 'Unit1') {  
    const unit = getDOMNodeById(svgDOM, 'Unit1');
    if (isHTMLElement(unit)) {
      unit.style.fill = 'red';
    }
  }

  return (
    <mySvg ref={svgRef} />
  );
}