Chrome/FF中的SVG图案填充不对齐_Svg

Chrome/FF中的SVG图案填充不对齐

svg

Chrome/FF中的SVG图案填充不对齐,svg,Svg,我正在进行一个映射项目，并使用SVG元素作为平铺，始终显示它们之间的接缝。如果使用css属性“shape rendering:CrispEdge”的元素，可以避免接缝。但是，当我尝试用包含平铺图像的图案填充这些元素时，Chrome和FF中图案的对齐方式存在一些不一致性（我现在使用的是Chrome 45和FF 41）我已经把这个问题孤立起来了。所有的转换、svg大小、rect大小等都直接来自我正在处理的项目，应该假设它们不能更改。我只能更改模式（或者如果元素有类似“shape rendering

我正在进行一个映射项目，并使用SVG元素作为平铺，始终显示它们之间的接缝。如果使用css属性“shape rendering:CrispEdge”的元素，可以避免接缝。但是，当我尝试用包含平铺图像的图案填充这些元素时，Chrome和FF中图案的对齐方式存在一些不一致性（我现在使用的是Chrome 45和FF 41）

我已经把这个问题孤立起来了。所有的转换、svg大小、rect大小等都直接来自我正在处理的项目，应该假设它们不能更改。我只能更改模式（或者如果元素有类似“shape rendering:CrispEdge”的属性/属性，我可以更改它）

我如何才能使图案瓷砖图像完全覆盖，并与图形对齐

HTML

对于这个问题，我能想到的最佳解决方案是重新使用图像元素，但我没有让浏览器处理转换，而是从group元素中删除了转换，并使用一些JS代码手动应用转换，并更新每个图像元素的x、y、宽度和高度属性。通过这种方式，我可以控制如何舍入结果以获得像素完美的平铺。

对于这个问题，我能想到的最佳解决方案是重新使用图像元素，而不是让浏览器处理变换，我从group元素中删除了转换，并使用一些JS代码手动应用转换，并更新每个图像元素的x、y、width和height属性。通过这种方式，我可以控制如何舍入结果以获得像素完美的平铺。

图像渲染：-moz crisp Edge对您有任何好处（当然是在Firefox上）图像渲染：像素化可能在Chrome上工作。这就是您在这里做的事情。您正在拍摄一幅451x512位图，并将其缩放到138.548x157.287像素，然后将其定位在（3247.130818.3055）处，并希望它能达到完美的像素。你可能需要考虑一种不同的方法。我理解你所说的，但是我的印象是CSS属性“形状渲染：CRISPPEGES”导致ReCt元素基本上“啪啪地指向像素”，从而使像素完美。我的项目就是这样，因为接缝消失了。我假设如果rect元素是像素完美的，那么模式图像应该能够正确对齐。不过，我想这样不行。谢谢你的意见！图像渲染：-moz crisp Edge对你有任何好处（当然在Firefox上）图像渲染：像素化可能在Chrome上工作。这就是你在这里所做的事情。您正在拍摄一幅451x512位图，并将其缩放到138.548x157.287像素，然后将其定位在（3247.130818.3055）处，并希望它能达到完美的像素。你可能需要考虑一种不同的方法。我理解你所说的，但是我的印象是CSS属性“形状渲染：CRISPPEGES”导致ReCt元素基本上“啪啪地指向像素”，从而使像素完美。我的项目就是这样，因为接缝消失了。我假设如果rect元素是像素完美的，那么模式图像应该能够正确对齐。不过，我想这样不行。谢谢你的意见！

<!-- 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>

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

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