SVG-Elemente auf einer festen Größe halten, während die Position skaliert

Question

Wie kann ich Text oder Objekte auf eine feste Größe halten, während sich die Hintergrund- und Positionskoordinaten ändern? Zum Beispiel:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    width="100%" height="100%" 
    viewBox="0 0 50000 50000" 
    > 
    <circle cx="25000" cy="25000" r="100px" fill="red" /> 
</svg> 

In diesem Code wird der Kreis NICHT 100 Pixel sein, wird es nach der Sichtbox Größe skaliert werden, so wird es klein sein.

Dieses Problem manifestiert sich beispielsweise in Karten. Wenn Sie bei Karten zoomen, möchten Sie, dass der Punkt einen Stadtstandort darstellt und das Label die gleiche Größe behält. Wenn der Benutzer zoomt, wird der Punkt nicht größer oder kleiner.

Answer 1

Wenden Sie das Inverse der viewBox-Skala auf den Radius an, z.

var circle = document.getElementById('c'); 
 
var root = document.getElementById('root'); 
 
var matrix = circle.getCTM(); 
 
circle.r.baseVal.value /= matrix.a;

<svg id="root" xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
 
    width="100%" height="100%" 
 
    viewBox="0 0 50000 50000" 
 
    > 
 
    <circle id="c" cx="25000" cy="25000" r="100px" fill="red" /> 
 
</svg>

Und wenn ich die viewBox schätzt den Kreis verdoppeln bleibt die gleiche Größe.

var circle = document.getElementById('c'); 
 
var root = document.getElementById('root'); 
 
var matrix = circle.getCTM(); 
 
circle.r.baseVal.value /= matrix.a;

<svg id="root" xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
 
    width="100%" height="100%" 
 
    viewBox="0 0 100000 100000" 
 
    > 
 
    <circle id="c" cx="25000" cy="25000" r="100px" fill="red" /> 
 
</svg>

Möglicherweise möchten Sie eine Ellipse verwenden, so dass Sie die x- und y getrennt von der Matrix a und d Werte skaliert werden kann.

Answer 2

Die Eigenschaft vector-effect="non-scaling-stroke" deaktiviert die Skalierung von Linien. Das Zeichnen einer Linie mit runden Enden mit Start und Stopp an der gleichen Stelle ergibt einen Kreis.

Dies ist nur gut für Formen, die stroke-linecap produzieren kann. Vielleicht hat es weniger Overhead und wenn nicht, ist es zumindest einfach. Ich verwende svg-pan-zoom Bibliothek mit Chromium Version 45.0.2454.101 auf Ubuntu 14.04.

<line x1="250" x2="250" y1="250" y2="250" stroke-width="5" 
stroke="rgb(0,0,0)" stroke-linecap="round" vector-effect="non-scaling-stroke"/>