SVG

Question

我有一个带有两个矩形的简单 SVG。我希望 "inner" 矩形正好位于 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 属性的情况下实现这样的功能？

Answer 1

代码解释：矩形的 x 和 y 坐标表示左上角的位置。所以如果你给你的矩形 x="50" y="50" 这将把矩形的左上角放在 SVG canvas 的中间。要使矩形居中，您需要将其偏移半宽或半高：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>

更新：

操作员正在评论：

I would actually prefer to set 50% for x and y instead of doing some math

在这种情况下，您可能需要翻译您的矩形，但您仍然需要一些数学知识才能知道要翻译多少：

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

Answer 2

您也可以在没有 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% - 15)" y="calc(50% - 15)" fill="green" />
</svg>

Answer 3

以下是在某些情况下可能有效的替代方法：

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

SVG - 如何使矩形居中？

SVG - how to center a rectangle?

transform

center

更新：