为什么SVG的笔触宽度与边界宽度不同？

为什么<svg>的1px stroke-width比<div>的1px border-width宽？为什么SVG的笔触宽度与边界宽度不同？

是否有可能创建一个<svg>，看上去与下面的<div>完全相同？

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

来源

2017-02-27 Misha Moroshko

这只是平滑处理。如果您想通过形状呈现CSS属性，您可以turn it off。 Adjusting the co-ordinates by 0.5px may also work。

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

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

来源

2017-02-27 22:44:05

也许值得一提的是，这并不在Chrome 54.0.2840.100为我工作（线仍然较厚），但不会在Firefox和Opera做工精细。 – Ian

在铬56它工作得很好... –

它可能是O/S的依赖和/或浏览器依赖，但在任何情况下，这不是一个错误。 –

为什么SVG的笔触宽度与边界宽度不同？

回答

相关问题