如何在背景和位置坐标发生变化时将文本或对象保持为固定大小?例如:
<?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 时,您希望代表城市位置的点和标签保持相同的大小,而不是在用户缩放时变大或变小。
最佳答案
将 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。
关于dictionary - 在位置缩放时将 SVG 元素保持为固定大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27991472/