Giữ nguyên tố SVG với kích thước cố định trong khi tỷ lệ vị trí

Question

Làm cách nào để giữ văn bản hoặc đối tượng có kích thước cố định trong khi tọa độ nền và vị trí thay đổi? Ví dụ:

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

Trong mã này, vòng tròn sẽ không phải là 100 pixel, nó sẽ được thu nhỏ theo kích thước khung nhìn, vì vậy nó sẽ rất nhỏ.

Sự cố này thể hiện trong bản đồ, chẳng hạn. Khi bạn phóng to và thu nhỏ trên bản đồ, bạn muốn dấu chấm đại diện cho vị trí thành phố và nhãn ở cùng kích thước, không lớn hơn hoặc nhỏ hơn khi người dùng phóng to.

Answer 1

Áp dụng nghịch đảo của tỷ lệ khung nhìn cho bán kính, ví dụ:

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>

Và nếu tôi tăng gấp đôi giá trị viewBox vòng tròn vẫn cùng kích thước.

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>

Bạn có thể muốn sử dụng một hình elip, do đó bạn có thể mở rộng x và y riêng của ma trận a và d giá trị.

Answer 2

Thuộc tính vector-effect="non-scaling-stroke" vô hiệu hóa mở rộng trên đường kẻ. Vẽ một đường với các đầu tròn với điểm bắt đầu và dừng ở cùng một vị trí sẽ tạo ra một vòng tròn.

Điều này chỉ tốt cho các hình dạng mà stroke-linecap có thể sản xuất. Có lẽ nó có ít chi phí hơn và nếu không, ít nhất thì cũng dễ dàng. Tôi đang sử dụng thư viện svg-pan-zoom với Chromium Version 45.0.2454.101 trên 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"/>