Javascript React中的SVG操作

我试图在SVG中创建一个简单的图形，在一条线上显示设备。该设备下方应有标签。我希望标签不要重叠： . 因为我使用的是React，所以我想在

render（）

函数中用JSX语法编写SVG代码。为了简单起见，假设我只有：

设备类别

const Equipment = (props) => (
    <g>
        <rect
          x={props.x}
          y={props.y}
          width={props.width}
          height={props.height}
          fill={black}
        />
        <text
          x={props.x}
          y={props.y}
          fill={black}
          fontSize={props.size}
        >
            {props.text}
        </text>
    </g>
);

export default Equipment;

import Equipment from './Equipment';

const SVG = (props) => (
    <svg
      width='100%'
      height='100%'
    >
        <g transform={`matrix(${props.matrix})`}>
            <Equipment
              x={10}
              y={10}
              width={100}
              height={100}
              fontSize={props.size}
              test='Equipment 1'
            />
            <Equipment
              x={60}
              y={10}
              width={50}
              height={100}
              fontSize={props.size}
              test='Equipment 2'
            />
        </g>
    </svg>
);

export default SVG;

const设备=（道具）=>(
{props.text}
);
出口默认设备；

SVG主类

const Equipment = (props) => (
    <g>
        <rect
          x={props.x}
          y={props.y}
          width={props.width}
          height={props.height}
          fill={black}
        />
        <text
          x={props.x}
          y={props.y}
          fill={black}
          fontSize={props.size}
        >
            {props.text}
        </text>
    </g>
);

export default Equipment;

import Equipment from './Equipment';

const SVG = (props) => (
    <svg
      width='100%'
      height='100%'
    >
        <g transform={`matrix(${props.matrix})`}>
            <Equipment
              x={10}
              y={10}
              width={100}
              height={100}
              fontSize={props.size}
              test='Equipment 1'
            />
            <Equipment
              x={60}
              y={10}
              width={50}
              height={100}
              fontSize={props.size}
              test='Equipment 2'
            />
        </g>
    </svg>
);

export default SVG;

从“/设备”导入设备；
常量SVG=（道具）=>(
);
导出默认SVG；

我使用转换矩阵来缩放SVG中的所有内容，但将文本的大小保持为矩阵中的某个常数

如何确保标签不重叠

是否有声明性的方法，或者我必须使用while循环

---

注意：当手动创建SVG对象并使用SVG函数（如

checkIntersection

或

getIntersectionList

）时，这当然是很容易做到的，但这些函数在React组件上不可用，我希望保留JSX语法。

考虑添加一个属性，如textPositionY，它可以指示文本的垂直位置。也是一个根据SVG元素的索引生成此位置的函数。这样说：

 {
   svgArray.map((eachSVG, index) => {
      const pxFromTop = 20;
      const generateTextPositionY = ix => fixedPosition + ix * pxFromTop;
      const currentTextPositionY = generateTextPositionY(index);
      const svgKey = `svgKey-${index}`

      return (
        <YourSVGComponent
          key={svgKey}
          textPositionY={currentTextPositionY}
          ...your other props
        />
   )})
 }

{
svgArray.map（（每一个vg，索引）=>{
常数pxFromTop=20；
const generateTextPositionY=ix=>fixedPosition+ix*pxFromTop；
const currentTextPositionY=generateTextPositionY（索引）；
const svgKey=`svgKey-${index}`
返回(
)})
}

接下来，使用这个道具，你可以设置文本的样式，因为你知道每个文本顶部有多少像素