div的一像素要细小很多
rect的1像素要大很多。而且2像素和1像素大小不变,只是颜色深浅有区别。为什么?


<svg>  <rect x="10" y="10" width="100" height="100" stroke-width="1" stroke="red" fill="white" /></svg>

<div style="margin: 0 0 10px 10px; width: 100px; height: 100px; border: 1px solid red"></div>


为什么?



geometricPrecision:这是什么意思?会开启anti-alising功能。导致图形的stroke-width变大
crispEdges(卷曲的边):强调对比对。可能关闭掉anti-aliasing功能
optimizeSpeed:渲染速度优先,可能关掉anti-aliasing功能
auto:浏览器自己决定




解决方案:

That's just antialiasing. You can turn it off if you want via the shape-rendering CSS property. Adjusting the co-ordinates by 0.5px may also work.
  <rect x="10" y="10" width="100" height="100" stroke-width="1" stroke="red" fill="white" shape-rendering="crispEdges" />


[shape-rendering]在dpr=1的显示器上,svg的rect的stroke-width比实际1像素更大。为什么?

2019-02-16 22:00:26 0 50
这里是评论

相关推荐