我有一个带有两个矩形的简单 SVG。我希望“内部”矩形正好位于 SVG 的中间。通过将
x
和 y
属性设置为 50%
,左上角将居中。相反,我想将矩形的中间居中。我尝试将 transform-origin
设置为 center
但不起作用。
<svg width="100" height="100">
<rect width="100%" height="100%" fill="gold" />
<rect width="30" height="30" x="50%" y="50%" fill="green" />
</svg>
如何在不手动指定x和y属性的情况下实现这样的功能?
代码解释: 矩形的
x
和 y
坐标表示左上角的位置。因此,如果您给矩形指定 x="50" y="50"
,这会将矩形的左上角置于 SVG 画布的中间。要将矩形居中,您需要将其偏移一半宽度或高度:50 - (30/2) = 35。解决方案是 <rect width="30" height="30" x="35" y="35" fill="green" />
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<rect width="30" height="30" x="35" y="35" fill="green" />
</svg>
操作员正在评论:
实际上我更愿意为 x 和 y 设置 50%,而不是做一些数学计算
在这种情况下,您可能需要翻译您的矩形,但您仍然需要一些数学知识才能知道要翻译多少:
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<rect width="30" height="30" x="50%" y="50%" transform="translate(-15,-15)" fill="green" />
</svg>
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<rect width="30" height="30" x="-15" y="-15" transform="translate(50,50)" fill="green" />
</svg>
另一种解决方案是使用多边形或以原点为中心的路径:
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<polygon points="-15,-15 15,-15 15,15 -15,15" transform="translate(50,50)" fill="green" />
</svg>
以下是在某些情况下可能有效的替代方案:
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<rect width="100%" height="100%" transform-origin="50% 50%" transform="scale(0.3)" fill="green" />
</svg>
您也可以在没有
transform
属性的情况下进行计算。
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<rect width="30" height="30" x="calc(50% - 15px)" y="calc(50% - 15px)" fill="green" />
</svg>