防止狭窄的svg路径形成块
防止狭窄的svg路径形成块
提问于 2014-09-29 17:36:49
我想画一串狭小的小径，但遗憾的是，它们似乎总是形成灰色的块状。示例：小提琴
<svg overflow="hidden" width="200" height="200" style="width: 200px; height: 200px;">
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 164L 200 164"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 166L 200 166"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 168L 200 168"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 170L 200 170"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 172L 200 172"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 174L 200 174"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 176L 200 176"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 178L 200 178"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 180L 200 180"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 182L 200 182"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 184L 200 184"></path>
<path stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" path="" d="M 100 186L 200 186"></path>
</svg>增加/减少stroke-width只会稍微改变颜色。从Chrome声称这些线的宽度为2px。我如何才能得到清晰的黑色1 1px线间隔1白线？
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-09-29 18:46:23
问题是这些线是用“一半”像素在顶部，另一半在y坐标的底部绘制的。可以将这些行括在group元素中，并应用<g transform="translate(0,0.5)">[your paths]</g>或应用以下CSS声明：path {shape-rendering: crispEdges;}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26105641
复制相关文章
相似问题
腾讯云开发者
