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

vector-effect="non-scaling-stroke"属性禁用行上的缩放。在同一位置绘制一条带有圆形末端并且开始和停止的线将产生一个圆圈。

这仅适用于stroke-linecap可以生成的形状。也许它的开销较小，如果没有，至少它很容易。我在Ubuntu 45.0.2454.101上使用svg-pan-zoom库和Chromium Version 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"/>

在位置缩放时将SVG元素保持为固定大小

2 个答案: