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 に答える