Question

我正在使用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>

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

有没有办法获得平滑的缩放填充模式，或者我应该抓住这个并为网格尝试不同的方法？

Answer 1

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

平滑地缩放svg中的填充图案

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

1 个答案:

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