将较大的svg内部的rect水平向右对齐

Question

我有一个svg，其中包含一个rect，它的大小较小。我希望rect在svg内水平对齐。以下内容似乎无效：

<svg width="400" 
     height="110" 
     style="background: grey; 
     display: flex; 
     justify-content: flex-end"
>
    <rect width="200" 
        height="50" 
        style="fill:rgb(0,0,255);
        stroke-width:3;
        stroke:rgb(0,0,0)"
   />  
</svg>

用于flex的显示justify-content和svg不起作用。我需要了解两件事：

1. 为什么flex样式没有应用到svg？
2. 如何将rect对准svg的右侧？

谢谢。

Answer 1

使用transform: translate();到rect

<h3>right up</h3>
<svg width="400" height="110" style="background: grey; display: flex; justify-content: flex-end">
  <rect width="200" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);transform: translate(49.5%,2%);" />  
</svg>
<h3>right down</h3>
<svg width="400" height="110" style="background: grey; display: flex; justify-content: flex-end">
  <rect width="200" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);transform: translate(49.5%,52%);" />  
</svg>
<h3>right center</h3>
<svg width="400" height="110" style="background: grey; display: flex; justify-content: flex-end">
  <rect width="200" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);transform: translate(49.5%,30%);" />  
</svg>

修改

使用 x="" y=""

    <h3>right up</h3>
    <svg width="400" height="110" style="background: grey; display: flex; justify-content: flex-end">
      <rect width="200" height="50" x="198" y="2" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);" />  
    </svg>

Answer 2

SVG没有浮点，请对齐html中的对齐元素。

所以您应该使用

transform:translate();

或者在制作svg时，您可以使用x和y坐标给出位置。

<svg width="400" height="110" style="background: grey;">
<rect width="200" height="50" x="197" y="3" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />  
</svg>

Answer 3

在SVG中，与HTML相比，您只能使用非常limited number of CSS properties。因此，SVG元素对display:flex一无所知。

因此，在您的示例中，<rect>只是忽略了它不理解的CSS规则。

svg {
  background: grey;
  
  
  display: flex; /* Has no effect because <rect> doesn't understand display: flex */
  justify-content: flex-end; /* Has no effect because <rect> doesn't understand justify-content: flex-end */
}

rect {
  fill: rgb(0, 0, 255);
  stroke-width: 3;
  stroke: rgb(0, 0, 0);
}

<svg width="400" height="110">
    <rect width="200" height="50"/>  
</svg>

---

因此，您可以使用translate transform

  

translate（<x> [<y>]）转换函数将对象移动x和y。如果未提供y，则假定为零。

svg {
  background: grey;
}

rect {
  fill: rgb(0, 0, 255);
  stroke-width: 3;
  stroke: rgb(0, 0, 0);
}

<svg width="400" height="110">
    <rect width="200" height="50" transform="translate(197,0)"/> 
</svg>

或带有x attribute

  

此属性确定矩形的x坐标。

     

值类型：<length>|<percentage>

svg {
  background: grey;
}

rect {
  fill: rgb(0, 0, 255);
  stroke-width: 3;
  stroke: rgb(0, 0, 0);
}

<svg width="400" height="110">
    <rect width="200" height="50" x="197"/> 
</svg>