html - Keep SVG element on exact pixel -
i have svg element draws items exact pixels. when element placed on exact pixel in dom renders no aliasing in major browsers. when there sub-pixel offset in element's ancestory becomes aliased.
i can prevent aliasing in browsers setting shape-rendering crisp-edges or optimize-speed, can misalign content of svg 1 pixel if rounds in wrong direction, pixel row may missed @ top or side of image.
i can prepare problem using el.getboundingclientrect() , adjusting margins eliminate sub-pixel offset. works once, if element moved in dom - via scrolling, dragging etc, etc, method has reapplied. means listening dom, not seem efficient.
what find css rule, or element can wrap svg in forcefulness positioned @ exact pixel. wondering if there native element - e.g. checkbox browsers might forcefulness render on exact pixel own rendering purposes. align svg relative that...
http://codepen.io/anon/pen/hvcck (the problem best demonstrated in firefox)
html:
crisp on ff , chrome/safari:<br/> <div id="s2" style="width:21px; height:7px; background-color:#ffffff;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" overflow="hidden" viewbox="0 0 50 70" preserveaspectratio="xminymin" style="display: block;"><defs></defs><g style="display: block;"> <rect x="0" y="0" width="100%" height="100%" fill="red" stroke="none"></rect> <path d="m10 10 l 40 10 40 20 20 20 20 30 40 30 40 60 10 60 10 50 30 50 30 40 10 40 z" fill="white" stroke="none"></path> </g></svg> </div> <br/> <div class='offpixel'> blurry on firefox (not on exact pixel):<br/> <div id="s2" style="width:21px; height:7px; background-color:#ffffff;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" overflow="hidden" viewbox="0 0 50 70" preserveaspectratio="xminymin" style="display: block;"><defs></defs><g style="display: block;"> <rect x="0" y="0" width="100%" height="100%" fill="red" stroke="none"></rect> <path d="m10 10 l 40 10 40 20 20 20 20 30 40 30 40 60 10 60 10 50 30 50 30 40 10 40 z" fill="white" stroke="none"></path> </g></svg> </div> <br/> crisp on firefox - not drawn: (not on exact pixel, uses shape-rendering):<br/> <div id="s2" style="width:21px; height:7px; background-color:#ffffff;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" overflow="hidden" viewbox="0 0 50 70" preserveaspectratio="xminymin" style="display: block; shape-rendering: crispedges"><defs></defs><g style="display: block;"> <rect x="0" y="0" width="100%" height="100%" fill="red" stroke="none"></rect> <path d="m10 10 l 40 10 40 20 20 20 20 30 40 30 40 60 10 60 10 50 30 50 30 40 10 40 z" fill="white" stroke="none"></path> </g></svg> </div> </div>
css:
body{ font-family:sans-serif; font-size:10px; } .offpixel { padding:3.5px; }
you have design problem , not markup/styling problem.
the responsibility of rendering svg code pixel perfect should shared responsibility of svg code, page code, , browser behavior.
so i'd say, maintain svg code is, since pixel perfect.
the page , markup design should pixel perfect, no 3.5px values on higher level design.
then still have scrolling/zoom issue, , think getboundingclientrect approach right one. maybe attach timer event if you're afraid of performance.
html css svg
No comments:
Post a Comment