Utrzymywanie elementów SVG na ustalonym rozmiarze podczas przesuwania pozycji

Question

Jak mogę zmienić tekst lub obiekty na stały rozmiar, zmieniając współrzędne tła i położenia? Na przykład:

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

w tym kodzie, koło NIE będzie 100 pikseli, będzie skalowane w zależności od wielkości viewbox, więc to będzie bardzo małe.

Ten problem występuje na mapach, na przykład. Podczas powiększania i pomniejszania na mapach, aby kropka reprezentująca lokalizację miasta i etykieta pozostała w tym samym rozmiarze, nie powiększaj ani nie zmniejszaj, gdy użytkownik powiększy.

Answer 1

Zastosuj odwrotność skali widoku ViewBox do promienia, np.

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>

A gdybym podwoić viewBox wartości krąg pozostaje ten sam rozmiar.

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>

Możesz użyć elipsę więc można skalować X i Y oddzielnie przez postaci matrycy, d wartości.

Answer 2

Właściwość vector-effect="non-scaling-stroke" wyłącza skalowanie na liniach. Narysowanie linii z zaokrąglonymi końcami z początkiem i stopem w tej samej lokalizacji spowoduje utworzenie okręgu.

Jest to przydatne tylko w przypadku kształtów, które mogą jednak produkować stroke-linecap. Może ma to mniej narzutów, a jeśli nie, to przynajmniej jest to łatwe. Używam biblioteki svg-pan-zoom z wersją Chromium 45.0.2454.101 na 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"/>