html – 将SVG元素保留在精确像素上

概述我有一个SVG元素,它将项目绘制为精确的像素.当元素本身放置在DOM中的精确像素上时,它在所有主要浏览器中呈现没有别名.但是,当元素的祖先中存在任何子像素偏移时,它将变为别名. 我可以通过将形状渲染设置为清晰边缘或优化速度来防止大多数浏览器中的混叠,但是如果SVG的内容在错误的方向上旋转,则可能会使SVG的内容错位1个像素,因此可能会错过像素行图像的顶部或侧面. 我可以使用el.getBoundi 我有一个SVG元素,它将项目绘制为精确的像素.当元素本身放置在DOM中的精确像素上时,它在所有主要浏览器中呈现没有别名.但是,当元素的祖先中存在任何子像素偏移时,它将变为别名.

我可以通过将形状渲染设置为清晰边缘或优化速度来防止大多数浏览器中的混叠,但是如果SVG的内容在错误的方向上旋转,则可能会使SVG的内容错位1个像素,因此可能会错过像素行图像的顶部或侧面.

我可以使用el.getBoundingClIEntRect()修改问题并调整边距以消除子像素偏移.这工作一次,但如果元素在dom中移动 – 通过滚动,拖动等等,则必须重新应用该方法.这意味着要听DOM,这看起来效率不高.

我想要找到的是一个CSS规则,或者我可以包装SVG以强制它定位在精确像素的元素.我想知道是否有一些原生元素 – 例如一个复选框,浏览器可能强制在精确像素上渲染以用于自己的渲染目的.然后我可以调整SVG相对于…

http://codepen.io/anon/pen/HvCcK(问题最好在firefox中演示)

HTML：

Crisp on FF and Chrome/Safari:<br/><div ID="s2" >    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" wIDth="100%" height="100%" overflow="hIDden" vIEwBox="0 0 50 70" preserveAspectRatio="xMinYMin" ><defs></defs><g >    <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" >    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" wIDth="100%" height="100%" overflow="hIDden" vIEwBox="0 0 50 70" preserveAspectRatio="xMinYMin" ><defs></defs><g >    <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 - but not properly drawn: (not on exact pixel,but uses shape-rendering):<br/>       <div ID="s2" >    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" wIDth="100%" height="100%" overflow="hIDden" vIEwBox="0 0 50 70" preserveAspectRatio="xMinYMin" ><defs></defs><g >    <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;}

解决方法 我也搜索了一个解决方案.似乎没有人有答案.无论是在stackoverflow还是在互联网的其余部分.然而解决方案变得如此简单……

正如您已经猜到的那样,firefox不会将SVG与像素栅格对齐.但是它会对齐通过CSS转换规则转换的元素.因此,只需将svg转换为0像素,它就会与像素栅格对齐.我附加了您的代码,并附加了一个公开此技术的示例.

body{    Font-family:sans-serif;    Font-size:10px;}.offpixel {    padding:3.5px;}.crisp {    transform: translate(0,0);}

<div ><!-- ^^ reset. Just in case this snippet adds some unwanted subpixel offset -->Crisp on FF and Chrome/Safari:<br/><div ID="s2" >    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" wIDth="100%" height="100%" overflow="hIDden" vIEwBox="0 0 50 70" preserveAspectRatio="xMinYMin" ><defs></defs><g >    <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" >    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" wIDth="100%" height="100%" overflow="hIDden" vIEwBox="0 0 50 70" preserveAspectRatio="xMinYMin" ><defs></defs><g >    <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 - but not properly drawn: (not on exact pixel,but uses shape-rendering):<br/>       <div ID="s2" >    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" wIDth="100%" height="100%" overflow="hIDden" vIEwBox="0 0 50 70" preserveAspectRatio="xMinYMin" ><defs></defs><g >    <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 and correctly drawn (uses transform snapPing):<br/><div ID="s2" >    <svg  xmlns="http://www.w3.org/2000/svg" version="1.1" wIDth="100%" height="100%" overflow="hIDden" vIEwBox="0 0 50 70" preserveAspectRatio="xMinYMin" ><defs></defs><g >    <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></div>

总结

以上是内存溢出为你收集整理的html – 将SVG元素保留在精确像素上全部内容，希望文章能够帮你解决html – 将SVG元素保留在精确像素上所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。