Как задать viewbox для тега, svg?

Question

[beefront17]

Добрый день! Подскажите пожалуйста как задать viewbox или что-то такое для тега svg?
Проблема в том, что есть такая разметка.

<g><circle cx="10" cy="10" r="4"  stroke-width: 0;"></circle></g>

И мне нужно анимировать stroke-width и при анимации получается, что stroke-width выходит за пределы тега g и получаеться квадрат а не круг.
Как это исправить?

Заранее благодарю)

Comments

[RAX7]

Почитай на досуге про viewbox и всё такое.
css.yoksel.ru/svg-sizes

[Модератор]

0xD34F, очень ценю ваши правки и ответы, но будьте вежливее, пожалуйста.

[Somewhere Intech]

RAX7, сложно пару строк написать?)

[RAX7]

Johnny Lowhunter, по сути вопроса парой строк не отделаешся, поэтому я скинул сслылку на хорошую статью. Написать готовое решение тоже можно, но для этого нужно знать в каких пределах нужно анимировать stroke-width, на 1px или на 100. Выше был комментарии, пусть и не достаточно вежливый, но по сути верный и если бы автор поправил свой вопрос нашлось бы не мало желающих ему помочь.

[0xD34F]

Модератор, OK.

Answer 1

[Somewhere Intech]

let svg = document.getElementsByTagName('svg')[0];
svg.setAttribute('viewBox',"0 0 400 400");

Но Вам не это нужно, нужно g сместить на высоту и ширину будущего stroke-width / 2

<g transform="translate(2,2)"><circle cx="10" cy="10" r="4"  stroke-width="0"></circle></g>

Comments

[beefront17]

Спасибо! Есть еще какой-то вариант? Проблема в том, что это все выводится на карте и тег g уже имеет translate

[Somewhere Intech]

beefront17, у circle cx cy прибавить