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 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.
Мне хотелось бы показать общую технику, как с позиционировать элемент SVG, чтобы не было лишнего пустого пространства вокруг элемента.
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 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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP