logo标签列表

避免未像素对齐的平铺SVG矩形之间存在线条

svgrendering
3

我有几个类似于这个问题中的rect，但它们没有对齐到像素。我不能改变元素位置。例如：

<svg width="326.01071" height="255.5332" xmlns="http://www.w3.org/2000/svg"
   viewBox="18 18 41 41"
>
    <rect x="21" y="21" width="51" height="3" fill="black" class="crisp" />
    <rect x="21" y="24" width="30" height="3" fill="black" class="crisp" />
    <rect x="21" y="41" width="51" height="3" fill="black" />
    <rect x="21" y="44" width="30" height="3" fill="black" />
</svg>​

我看到矩形之间有一条细线。使用“shape-rendering = crispEdges”并没有起到帮助作用。
稍微增加一点重叠可以有所帮助，但会在两个抗锯齿边缘相接的垂直连接处产生可见的尖峰，因为两个重叠的矩形都参与颜色混合。
有什么办法可以解决吗？
嗯，这些矩形是相同颜色的，所以我可以引入一些智能算法将相邻的矩形合并成一个形状。这是一种干净而困难的方法。
添加一个细描边的相同颜色有帮助吗？ - Thomas W
我的错误，shape-rendering确实从根svg元素继承。一个工作的jsfiddle会有所帮助，因为您的示例代码使用“crispEdges”呈现锐利没有问题，请参见http://tinkerbin.com/wAeATCVs。 - methodofaction
我更新了我的示例，找到了引起这条线的原因——一个viewBox。而你的tinkerbin包含了答案：g标签消除了这条线！（好吧，在IE9中除外）请你把这个作为答案重新发布一下，好吗？ - Victor Sergienko
很高兴能帮到你。我认为在这种情况下正确的礼仪是回答你自己的问题，因为我仍然不确定你是如何纠正它的！ - methodofaction
我更希望你回答——这是我所缺少的知识。 - Victor Sergienko
1个回答
0

好的，在最后我会回答。

在rect周围添加g标签消除了线条 - 但不包括Internet Explorer。

Tinkerbin现在已经不存在了，但是在我的情况下，在最新版本的Chrome中在矩形周围添加一个普通的g标签不起作用。是否有理由认为g标签会有所不同？ - matanster
不好意思，我完全不知道。 - Victor Sergienko
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接