將SVG元素保留爲固定大小，同時位置比例尺

Question

如何在背景和位置座標更改時將文本或對象保持爲固定大小？例如：

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

在該代碼中，圓不會被100個像素，這將根據視框的大小進行縮放，所以這將是微小的。例如，

這個問題體現在地圖中。當您在地圖上放大或縮小時，您希望表示城市位置的點和標籤保持相同的大小，而當用戶放大時不會變大或變小。

Answer 1

將viewBox比例的倒數應用於半徑例如

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>

如果我加倍視框中的值保持圈大小相同。

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>

您可能需要使用一個橢圓，因此您可以通過矩陣a和d值分別縮放X和Y。

Answer 2

vector-effect="non-scaling-stroke"屬性會禁用線上的縮放。用同一位置的起點和終點繪製圓的線將產生一個圓。

這隻適用於stroke-linecap可以生產的形狀。也許它的開銷較少，如果沒有，至少很容易。 我正在使用svg-pan-zoom庫和Chromium版本45.0.2454.101在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"/>