Question

我正在开发一个地图项目并使用SVG＆lt; image＆gt;作为瓷砖的元素总是在它们之间显示接缝。如果我使用＆lt; rect＆gt;我可以避免接缝具有css属性“shape-rendering：crispEdges”的元素。但是，当我尝试填写这些＆lt; rect＆gt;具有包含图块图像的图案的元素，Chrome和FF中图案的对齐方式存在一些不一致（我现在正在使用Chrome 45和FF 41）。

我已在此jsfiddle中隔离了此问题。所有变换，svg大小，rect大小等都直接来自我正在进行的项目，应该假设它们不能被更改。我只能更改模式（或者如果有＆lt; image＆gt;元素的“shape-rendering：crispEdges”这样的属性/属性，我可以改变它。）

如何让图案拼贴图像完全覆盖，并与＆lt; rect＆gt;正确对齐？

HTML

<!-- change background from white to black to see what's going on -->

<!-- The SVG is large. The <rect> can be located a bit to the right of the center of the SVG -->
<!-- When BG is black, you can see a white edge on the left and bottom -->
<!-- When BG is white, you can see a dark edge on the top and right -->
<body style="background: white;">
    <div style="position: fixed; x: 0; y: 0;">
        <button onclick="whiteBG()">White BG</button>
        <button onclick="blackBG()">Black BG</button>
    </div>
    <svg height="1965" version="1.1" width="5760" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <pattern x="0" y="0" width="100%" height="100%" patternContentUnits="objectBoundingBox" id="patternSieyywid32k">
                <!-- image is base64 encoded 415 x 512 image -->
                <image  xlink:href="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAIAAcMDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAcIBv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAG8KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJKAAAAAAAAAAAAAAAAAAAADrTrQAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAAD/8QAHBAAAgMBAAMAAAAAAAAAAAAAB1AABRcGBDCQ/9oACAEBAAEFAvlZpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJQ9L43RORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXe//xAAUEQEAAAAAAAAAAAAAAAAAAACw/9oACAEDAQE/AWQP/8QAFBEBAAAAAAAAAAAAAAAAAAAAsP/aAAgBAgEBPwFkD//EACYQAAAFBQABBAMBAAAAAAAAAAIFUIPCAAQzktIBAxETYRQwMZD/2gAIAQEABj8C/wArMF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqvX/GB6oPh9vf5fHjx/ff7+lkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbl+/8A/8QAGhAAAQUBAAAAAAAAAAAAAAAAEQExUXGQsP/aAAgBAQABPyHNZEiRIkSJEiRIkSJEiRIkSJEiRIkSJEiRIkSJEiRIkSJEiRIkSK+M0YAVLm1Xd3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d//aAAwDAQACAAMAAAAQJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJAAAAAAAAAAAAAAAAAAAAABJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJ/8QAGREAAwEBAQAAAAAAAAAAAAAAARFQADCQ/9oACAEDAQE/EPKx555555555555555555555555555555555555555552hZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkd//8QAFBEBAAAAAAAAAAAAAAAAAAAAsP/aAAgBAgEBPxBkD//EABsQAAIBBQAAAAAAAAAAAAAAABExASFBkLDR/9oACAEBAAE/EMa1mzZs2bNmzZs2bNmzZs2bNmzZs2bNmzZs2bNmzZs2bNmzZs2bPXuyTRWIcO2tpMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz/AP/Z" 
                       x="0" y="0" width="1" height="1" preserveAspectRatio="none"></image>
            </pattern>
        </defs>
        <g transform="matrix(0.0049,0,0,0.0049,101.5334,3349.9742)" style="display: inline;">
            <rect x="641958.5514" y="-516667.078" width="28275.123699999996" height="32099.475199999986" fill="url('#patternSieyywid32k')" style="shape-rendering: crispEdges;"></rect>
        </g>
    </svg>
</body>

JS

var whiteBG = function() {
    document.querySelector('body').style.background = '#FFF';
}

var blackBG = function() {
    document.querySelector('body').style.background = '#000';
}

Answer 1

我能解决这个问题的最佳解决方案是回到使用图像元素，但是我没有让浏览器处理转换，而是从group元素中删除了转换并使用了一些JS代码来应用转换手动并更新每个图像元素的x，y，width和height属性。这样做，我可以控制如何舍入结果以实现像素完美的图块。

Chrome / FF中的SVG图案填充错位

1 个答案: