代码之家 › 专栏 › 技术社区 › feerlay

SVG-如何使矩形居中?

center transform svg

feerlay · 技术社区 · 6 年前

我有一个带有两个矩形的简单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属性的情况下实现此类功能?

1 回复 | 直到 6 年前

Community CDub 5 年前

守则的解释如下: 这个 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>

更新:

op评论如下:

实际上,我更愿意为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>

Kaniee 6 年前

您也可以不使用 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>

推荐文章

geany_tab_title_color · 如何将4个div围绕一个中心div?

3 年前

Martin Fric · 使用变换时,Div容器仍保持原始图像大小的大小

7 年前

Niko · 边框css更改速度快于变换旋转

7 年前

Leon1988 · 标题中多行的斜边

7 年前

Levi · 如何使用jq将多个输出对象组合成单个对象

7 年前

Mose · SVG变换:根据X缩放Y

7 年前

spoilerd do · 统一变换。前进是不断变化的

7 年前

Paul · 悬停时变换比例不缩放

7 年前

listener · 在Python中创建音频文件的振幅与频谱图

7 年前

Pep · Matlab-Hough变换中的帧线

7 年前