Mantenimento di elementi SVG su una dimensione fissa mentre scale di posizione

Question

Come posso mantenere il testo o gli oggetti su una dimensione fissa mentre le coordinate di sfondo e posizione cambiano? Ad esempio:

<?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 questo codice, il cerchio non essere 100 pixel, esso verrà scalato in base alla dimensione viewBox, quindi sarà molto piccolo.

Questo problema si manifesta nelle mappe, ad esempio. Quando esegui lo zoom avanti e indietro sulle mappe, desideri che il punto che rappresenta la posizione di una città e l'etichetta rimangano della stessa dimensione, non diventino più grandi o più piccoli quando l'utente ingrandisce.

Answer 1

Applicare l'inverso della scala del viewBox al raggio, ad es.

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>

E se faccio doppio valorizza la viewBox il cerchio rimane della stessa dimensione.

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>

Si consiglia di utilizzare un ellisse in modo da poter scalare il x e y separatamente dalla matrice e valori d.

Answer 2

La proprietà vector-effect="non-scaling-stroke" disabilita il ridimensionamento in linea. Disegnare una linea con le estremità arrotondate con inizio e fine nella stessa posizione produrrà un cerchio.

Questo è valido solo per le forme che possono produrre stroke-linecap. Forse ha meno overhead e se non, almeno è facile. Sto usando la libreria svg-pan-zoom con Chromium versione 45.0.2454.101 su 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"/>