Wie zeichnet man einen nicht skalierbaren Kreis in SVG mit Javascript

Ich entwickle eine Karte in Javascript mit SVG, um die Linien zu zeichnen.

Ich möchte eine Funktion hinzufügen, mit der Sie nach einer Straße suchen können. Wenn die Straße gefunden wird, wird auf der Karte ein Kreis angezeigt.

Ich weiß, dass ich in SVG einen Kreis zeichnen kann, aber mein Problem ist, dass sich die Größe des Kreises je nach Zoomstufe nicht ändern sollte. Der Kreis muss also immer gleich groß sein. Die Straßen auf meiner Karte haben diese Funktion, alles was ich tun musste, war hinzuzufügen

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

zu den Zeilenattributen ..

Eine Linie sieht so aus.

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

Der Kreis sieht so aus.

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

Kann man den Kreis irgendwie als "nicht skalierend" definieren?

Antworten auf die Frage(3)

Ihre Antwort auf die Frage