Question

我正在尝试在SVG中创建一个简单的图形，显示一条线上的设备。该设备下方应有标签。我希望标签不重叠： example image 。由于我使用的是React，我想在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;函数中用JSX语法编写SVG代码。所以为了简单起见，假设我只有：

设备类

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主类

checkIntersection

我使用转换矩阵来缩放SVG中的所有内容，但是将文本的大小保持为矩阵中与比例相反的常量。

如何确保标签不重叠？
是否有声明方式或者我必须使用while循环？

注意：当手动创建SVG对象并使用getIntersectionList或foreach ( $result as $array ) { echo implode(",", $array->keyword); }等SVG函数时，这可以轻松完成，但React组件上没有这些功能，我想保持JSX语法。

Answer 1

考虑添加一个诸如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
        />
   )})
 }

接下来，借助此道具，您可以设置文本的样式，因为您知道每个文本从顶部开始有多少像素。

React中的SVG操作

1 个答案: