i'm working on mapping project , using svg <image> elements tiles shows seam between them. can avoid seams if use <rect> elements css property "shape-rendering: crispedges". however, when try fill these <rect> elements pattern contains tile image, there inconsistency in alignment of pattern in chrome , ff (i'm using chrome 45 , ff 41 right now).
i've isolated issue in jsfiddle. of transforms, svg size, rect size, etc directly project i'm working on , should assumed can't changed. can change pattern (or if there's attribute/property "shape-rendering: crispedges" <image> elements can change that).
how can pattern tile image cover, , aligned with, <rect>?
html
<!-- change background white black see what's going on --> <!-- svg large. <rect> can located bit right of center of svg --> <!-- when bg black, can see white edge on left , bottom --> <!-- when bg white, can see dark edge on top , 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 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'; }
the best solution come issue go using image elements, instead of letting browser handle transform, removed transform group element , used js code apply transforms manually , update x, y, width, , height attributes of each image element. doing way, have control on how round result achieve pixel perfect tiles.
Comments
Post a Comment