TransWikia.com

Как установить правильные координаты Inline SVG Circle?

Stack Overflow на русском Asked on December 15, 2020

Я могу сделать встроенный круг SVG как здесь:

 <svg height="100" width="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg> 

Однако, я пытаюсь понять свойства cx и cy и height и width.

Я хочу получить круг 15×15 пикселей, вокруг которого нет свободного места, но я не могу понять, как сделать это правильно.

  • Этот вариант показывает только правый нижний угол
<svg height="15" width="15"><circle cx="0" cy="0" r="9" stroke="black" stroke-width="1" fill="red" /></svg>
  • Этот SVG разрезает круг на квадрат
<svg height="15" width="15"><circle cx="7.5" cy="7.5" r="9" stroke="black" stroke-width="1" fill="red" /></svg>

Как правильно достичь того, чего я хочу?
Вы можете попробовать сами здесь:

Свободный перевод вопроса How to set correct Inline SVG Circle coordinates от участника @SimonS.

One Answer

Мне хотелось бы показать общую технику, как с позиционировать элемент SVG, чтобы не было лишнего пустого пространства вокруг элемента.

  1. Для наглядности сделаем границы холста SVG видимыми
    Для этого в шапке файла SVG напишем стиль CSS

style="border:1px solid"

<svg height="100" width="100" style="border:1px solid">
  <circle id="circ" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 

  1. Следующим шагом является определение параметров width, height, x, y,прямоугольника, ограничивающего окружность, с помощью метода JS getBBox()

<svg height="100" width="100" viewBox="0 0 100 100" style="border:1px solid">
  <circle id="circ" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
<script>
let bb = circ.getBBox();
console.log(bb);
</script>

По результатам видно, что ширина прямоугольника составляет 80px, отступы от начала холста SVG 10px, справа отступ тоже 10px
итого: 10 + 80 + 10 = 100px

  1. Если вы хотите, чтобы не было пустого пространства вокруг svg элемента необходимо убрать эти отступы, уменьшив ширину холста и добавить немного пространства, чтобы умещалась обводка окружности шириной 3px

<svg height="84" width="84" viewBox="0 0 84 84" style="border:1px solid">
  <circle id="circ" cx="42" cy="42" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
<script>
let bb = circ.getBBox();
console.log(bb);
</script>

Рамку вокруг холста можно удалить, так как она использовалась для визуальной отладки позиционирования.

Свободный перевод ответа от участника @Alexandr_TT.

Answered by Alexandr_TT on December 15, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP