在位置缩放时将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>

如果我将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 100000 100000"
    >
    <circle  id="c" cx="25000"  cy="25000" r="100px" fill="red" />
</svg>

您可能希望使用椭圆,以便可以使用矩阵a和d值分别缩放x和y.

Answer 2

您可以做一些非常接近的事情：您可以使用嵌套的 svg 元素，其高度和宽度以 svg viewBox 对角线的百分比表示。如果您知道屏幕上 svg 的大小，则可以用百分比来近似 100px。

您还需要使用 viewBox 作为平移和缩放地图的方法。这适用于包含的任何元素文本；使用 % 单位作为字体大小并不引用 svg viewBox，因此获得恒定字体大小的唯一方法是，您需要封装在另一个大小为 % 单位的 svg 元素内。

注意：svg 虽然大小固定，但看起来会相对于内部 svg 的左上角进行缩放。

另一个答案中类似问题的相同方法。

for(let i = 0; i < 12; i++) {
  let a = (i - 4)*5
  setTimeout(function() {
    document.querySelector('#svg').setAttribute('viewBox',
      `${a} ${a} ${100 - 2*a} ${100 - 2*a}`);
  }, 500 * i);
 }
  

<svg id="svg" width="100px" height="100px" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
    <svg x='35' y='35' width='10%' height='10%' viewBox='0 0 100 100'>
       <circle  cx='50'  cy='50' r='50' fill='red'/>
    </svg>
     <circle  cx='65'  cy='65' r='5%' fill='red'/>
     <circle  cx='35'  cy='65' r='10' fill='red'/>
</svg>

`