SVG-如何居中矩形?

时间:2018-12-27 13:45:53

标签: svg transform center

我有一个带有两个矩形的简单SVG。我希望“内部”矩形恰好在SVG的中间。通过将xy属性设置为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属性的情况下实现此类功能?

2 个答案:

答案 0 :(得分:1)

代码说明: 矩形的xy坐标表示左上角的位置。因此,如果您给矩形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%,而不是做一些数学运算

在这种情况下,您可能需要翻译rect,但仍然需要一些数学运算才能知道要翻译多少:

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

答案 1 :(得分:0)

您也可以在没有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>