当我指定 1px 时,为什么我的 SVG 线条模糊或高度为 2px?
问题说明
我正在用 SVG 创建一条线,但它在我的网页中显得模糊.更清楚一点,它看起来比笔画宽度大 1px.为什么会发生这种情况,有没有办法在 SVG 中修复它?
I'm creating a line with SVG and it is appearing blurry in my web page. To be more clear, it appears larger than the stroke width of 1px. Why is this happening and is there a way to fix it in SVG?
这是代码.当我自己运行这段代码时,它并不模糊.当它在我的网页中时,该行的高度似乎约为 2px 而不是 1.
Here is the code. When I run this code by itself it is not blurry. When it's in my web page the line appears to be about 2px in height rather than 1.
#HorizontalLine1178 {
stroke:rgb(154,154,154);
stroke-width:1;
}
<svg style="width:100%;">
<line y2="97" y1="97" x2="100%" x1="62" >
</svg>
正确答案
因为当它的 Y 坐标位于整个像素上时,1px
笔画在它周围,因此抗锯齿"(参考 Paul LeBeau 的优秀插图).在这种情况下使用半像素坐标,或应用 shape-rendering="crispEdges"
将为您进行像素舍入,但即使在圆形对象上也会产生锐利的边缘:
Because when its Y coordinates lies on whole pixel, the 1px
stroke is around it and thus "antialiased" (refer to Paul LeBeau's excellent illustration). Use half pixel coordinates in this case, or apply shape-rendering="crispEdges"
that will do the pixel rounding for you, but will produce sharp edges even on rounded objects:
<svg stroke="black" fill="white" stroke-width="1">
<line y2="10.0" y1="10.0" x2="90%" x1="10">
<title>.0</title>
</line>
<line y2="15.5" y1="15.5" x2="90%" x1="10">
<title>.5</title>
</line>
<line y2="20.0" y1="20.0" x2="90%" x1="10" shape-rendering="crispEdges">
<title>.0 crispEdges</title>
</line>
<circle cy="50" cx="20" r="10">
<title>.0</title>
</circle>
<circle cy="49.5" cx="44.5" r="10">
<title>.5</title>
</circle>
<circle cy="50" cx="70" r="10" shape-rendering="crispEdges">
<title>.0 crispEdges</title>
</circle>
<rect x="90" y="40" height="20">
<title>.0</title>
</rect>
<rect x="120" y="40" shape-rendering="crispEdges">
<title>.0 crispEdges</title>
</rect>
<rect x="149.5" y="39.5" height="20">
<title>.5</title>
</rect>
<rect x="190" y="40" stroke="none" fill="black">
<title>.0 fill, no stroke</title>
</rect>
<rect x="219.5" y="39.5" stroke="none" fill="black">
<title>.5 fill, no stroke</title>
</rect>
</svg>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /reply/detail/tanhcfjefc
-
YouTube API 不能在 iOS (iPhone/iPad) 工作,但在桌面浏览器工作正常?
it1352 07-30 -
iPhone,一张图像叠加到另一张图像上以创建要保存的新图像?(水印)
it1352 07-17 -
保持在后台运行的 iPhone 应用程序完全可操作
it1352 07-25 -
使用 iPhone 进行移动设备管理
it1352 07-23 -
在android同时打开手电筒和前置摄像头
it1352 09-28 -
扫描 NFC 标签时是否可以启动应用程序?
it1352 08-02 -
检查邮件是否发送成功
it1352 07-25 -
Android微调工具-删除当前选择
it1352 06-20 -
希伯来语的空格句子标记化错误
it1352 06-22 -
Android App 和三星 Galaxy S4 不兼容
it1352 07-20