2

我正在使用 svg 制作可缩放和可平移的地图（以便于交互）。我有一个网格，其他对象（矩形）可以对齐。

网格是一个填充有图案的矩形。该图案仅包含一个矩形。缩放和平移是通过转换完成的。相同的转换应用于模式和我想要与网格对齐的每个元素。平移（平移）正常工作，但缩放（缩放）不能正常工作。

该模式似乎仅以特定间隔缩放，而其他元素在每个间隔缩放。就好像该模式的转换精度要低得多。

演示：http: //jsfiddle.net/Gxz2P/

下面的代码有效地演示了 firefox、chrome 和 safari 中的问题：

<!DOCTYPE html>
<html>
<head>
    <script>
function setMatrix(a,b,c,d,e,f){
    var matrix = [a,b,c,d,e,f];
    matrix = matrix.join();
    matrix = 'matrix(' + matrix + ')';
    document.getElementById('pat').setAttribute('patternTransform', matrix);
    document.getElementById('boxRect').setAttribute('transform', matrix);
}

function startGrow(sleepy){
    if(! sleepy){
        sleepy = 100;
    }
    var grow = function(lastZoom){
        var zoom = lastZoom + 0.01;
        setMatrix(zoom, 0, 0, zoom, 0, 0);
        if(zoom < 2){
            setTimeout(function(){
                grow(zoom);
            }, sleepy);
        }
    }

    grow(1);
}
    </script>
</head>
<body>
    <svg width="100%" height="1500">
        <defs>
            <pattern id="pat" x="0" y="0" width="32" height="32" patternUnits="userSpaceOnUse">
                <rect x="2" y="2" width="28" height="28" stroke="red" fill="lightblue" />
            </pattern>
        </defs>
        <rect x="0" y="0" width="1000" height="1000" fill="url(#pat)" stroke="black" id="gridRect" />
        <rect x="320" y="320" width="32" height="32" fill="rgba(0,0,0,0)" stroke="red" id="boxRect" />
        <rect x="352" y="352" width="32" height="32" fill="rgba(0,0,0,0)" stroke="black" id="staticBox" />
    </svg>
    <script>
startGrow(100);
    </script>
</html>

在浏览器中加载页面将显示网格如何与红色边框框同时缩放，即使它们同时获得相同的矩阵。

有没有办法获得平滑的缩放填充图案，或者我应该刮掉这个并为网格尝试不同的方法？

4

1 回答 1

2

它似乎与像素边界上图案元素缩放的大小有关。如果您创建一个更大的模式（那么重点是什么，对吗？）您不会遇到同样的问题：

演示：http: //jsfiddle.net/Gxz2P/3/

于 2012-05-18T20:37:22.873 回答