我将尝试创建一个简单的SVG图形,显示在线上的设备。这个设备应该有一个标签在下面。我希望标签不重叠:示例图片。由于我正在使用React,所以我想在
我使用转换矩阵来缩放SVG中的所有内容,但保持文本大小与矩阵中的比例常数相同。
以下是需要翻译的内容:
render()
函数中用JSX语法编写SVG代码。因此,为了简单起见,让我们假设我只有:Equipment class
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;
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中的所有内容,但保持文本大小与矩阵中的比例常数相同。
以下是需要翻译的内容:
- 如何确保标签不重叠?
- 是否有声明性方式,还是我必须使用while循环?