SVG - как отцентрировать прямоугольник? - PullRequest
Новая
       10

SVG - как отцентрировать прямоугольник?

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

У меня есть простой 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 Ответ

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

Объяснение кода: координаты 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>

обновление:

Оператор комментирует:

Я бы предпочел вместо этого установить 50% для x и yвыполнения некоторой математики

В этом случае вам может потребоваться перевести ваш прямоугольник, но вам все еще нужна математика, чтобы узнать, сколько нужно перевести: 

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