Центрировать элементы внутри SVG относительно друг друга. - PullRequest
Новая
       53

Центрировать элементы внутри SVG относительно друг друга.

0 голосов
/ 12 декабря 2018

Не могу найти его где-либо еще, поэтому я могу спросить здесь:

У меня есть svg-прямоугольник, внутри которого есть другие прямоугольники.

Я хочу добиться центрирования каждого из этих прямоугольников.в центре его родителя и по отношению друг к другу.

Если я перетаскиваю прямоугольник 1 вниз, я хочу, чтобы другой переместился вверх, чтобы держать их обоих по центру - и то же самое происходит, если я перетаскиваю другой элементвниз (должен подтолкнуть верхний).

Проблема здесь в том, что у меня может быть другая ширина / высота, и будет 2 или более элементов.Есть ли математическое уравнение для этого?Или имя, которое я могу найти?

enter image description here

1 Ответ

0 голосов
/ 12 декабря 2018

Я бы поместил 3 рита в группу и использовал бы группу, как в следующем примере 

svg{
  border:1px solid;
  width: 30vh;
}
<svg viewBox="0 0 100 280">
<defs>  
  <g id="rects">
    <rect width="80" height="80"  />
    <rect width="60" height="25" x="10" y="10"  />
    <rect width="60" height="25" x="10" y="45"  />
  </g>
  </defs>
  
  <use xlink:href="#rects" x="10" y="10"  stroke="black" fill="none" />
  <use xlink:href="#rects" x="10" y="100"  stroke="black" fill="none" />
  <use xlink:href="#rects" x="10" y="190"  stroke="black" fill="none" />
</svg>
...