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

【问题标题】：Scaling a fill pattern in svg smoothly平滑缩放 svg 中的填充图案
【发布时间】：2012-05-26 09:35:10
【问题描述】：

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

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

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

【问题讨论】：

作为一个有趣的数据点，如果您平滑地缩放使用该模式的矩形，您会看到相同的结果：jsfiddle.net/Gxz2P/2 此外，您的原始测试和使用缩放的我在 Opera 上都可以正常工作。
我正在缩放图案，因此我也可以通过简单地对图案应用变换来轻松平移地图，而无需在平移时移动网格元素。在具有大图案的图案上设置变换确实可以平滑缩放，因此您的解决方案仍然有效。有趣的是它在 Opera 中运行良好；可能是更好的模式实现。
只是为了了解更多信息...似乎这是 Chrome/Webkit 中的一个已知问题：code.google.com/p/chromium/issues/detail?id=125638 Firefox 似乎工作正常（在 Linux 中）。
我没有看到 Vista 上的 Firefox 12 存在问题，假设我当然已经理解了这个问题。您在哪个平台上使用哪个版本的 Firefox 会显示问题。

标签： browser svg

【解决方案1】：

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

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

【讨论】：