我正在使用 svg 制作可缩放和平移的 map (以便于交互)。我有一个其他对象(矩形)可以对齐的网格。
网格是一个填充有图案的矩形。该图案仅包含一个矩形。缩放和平移是通过变换完成的。相同的转换应用于图案和我想要与网格对齐的每个元素。平移(平移)工作正常，但缩放(缩放)工作不正常。
该模式似乎仅按特定间隔缩放，而其他元素按每个间隔缩放。就好像该模式的转换精度要低得多。
演示: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>
在浏览器中加载页面将显示网格如何与红色边框框同时缩放，即使它们同时获得相同的矩阵。
有没有办法获得平滑的缩放填充图案，或者我应该刮掉它并尝试不同的网格方法？
最佳答案
它似乎与像素边界上的图案元素缩放大小有关。如果您创建一个更大的模式(那么有什么意义，对吧？)您不会遇到同样的问题:
演示:http://jsfiddle.net/Gxz2P/3/
关于browser - 平滑缩放 svg 中的填充图案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10658922/