Как нарисовать немасштабируемый круг в SVG с помощью Javascript

Я разрабатываю карту в Javascript, используя SVG для рисования линий.

Я хотел бы добавить функцию, где вы можете искать дорогу, и если дорога найдена, на карте появляется круг.

Я знаю, что могу нарисовать круг в SVG, но моя проблема в том, что размер круга не должен меняться в зависимости от уровня масштабирования. Другими словами, круг должен всегда иметь одинаковый размер. Дороги на моей карте имеют эту функцию, все, что мне нужно было сделать, это добавить

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

к строке атрибутов ..

Линия выглядит следующим образом.

<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>

Круг выглядит так.

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

Можно ли определить круг как «немасштабируемый»? каким-то образом?

Ответы на вопрос(3)

Ваш ответ на вопрос