dictionary - 在位置缩放时将 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 像素，它会根据 viewbox 大小进行缩放，所以它会很小。

例如，这个问题表现在 map 中。当您放大和缩小 map 时，您希望代表城市位置的点和标签保持相同的大小，而不是在用户缩放时变大或变小。

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。