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

Question

Я могу сделать встроенный круг 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.}

html svg вёрстка

Alexandr_TT · Answer

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

Для наглядности сделаем границы холста 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>

Следующим шагом является определение параметров 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

Если вы хотите, чтобы не было пустого пространства вокруг 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.}

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

One Answer

Add your own answers!

Ask a Question