Cómo dibujar un círculo no escalable en SVG con Javascript

Estoy desarrollando un mapa, en Javascript usando SVG para dibujar las líneas.

Me gustaría agregar una función donde se puede buscar una carretera y, si se encuentra la carretera, aparece un círculo en el mapa.

Sé que puedo dibujar un círculo en SVG, pero mi problema es que el tamaño del círculo no debe cambiar según el nivel de zoom. En otras palabras, el círculo debe tener el mismo tamaño en todo momento. Las carreteras en mi mapa tienen esta característica, todo lo que tenía que hacer era agregar

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

a los atributos de línea ..

Una línea se ve así.

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

El círculo se ve así.

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

¿Es posible definir el círculo como "no escalable" de alguna manera?

Respuestas a la pregunta(3)

Su respuesta a la pregunta