Jak narysować nieskalowalne koło w SVG z Javascriptem

Opracowuję mapę w JavaScript, używając SVG, aby narysować linie.

Chciałbym dodać funkcję, w której można wyszukać drogę, a jeśli droga zostanie znaleziona, na mapie pojawi się okrąg.

Wiem, że mogę narysować okrąg w SVG, ale moim problemem jest to, że rozmiar okręgu nie powinien się zmieniać w zależności od poziomu powiększenia. Innymi słowy, koło musi mieć zawsze ten sam rozmiar. Drogi na mojej mapie mają tę funkcję, wszystko co musiałem zrobić, to dodać

<code>vector-effect="non-scaling-stroke"
</code>

do atrybutów linii ..

Linia wygląda tak.

<code><line vector-effect="non-scaling-stroke" stroke-width="3" id = 'line1' x1 = '0' y1 = '0' x2 = '0' y2 = '0' style = 'stroke:rgb(255,215,0);'/> 
</code>

Krąg wygląda tak.

<code><circle id = "pointCircle" cx="0" cy="0" r="10" stroke="red" stroke-width="1" fill = "red"/>
</code>

Czy można w jakiś sposób zdefiniować okrąg jako „nieskalujący”?

questionAnswers(3)

yourAnswerToTheQuestion