Выровнять по горизонтали прямоугольник внутри большего SVG справа

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

SVG не имеет float, выровняйте элементы выравнивания как в 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 2

В SVG вы можете использовать только ограниченное количество свойств CSS по сравнению с HTML.Таким образом, элементы 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

Этот атрибут определяет координату 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>

Answer 3

Использование 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>