如何在保持反混叠的同时呈现边缘清晰的svg元素？

Question

是否有一种方法可以在保持抗混叠的同时呈现边缘清晰的svg元素？

我正在创建一个在现代浏览器中工作的基于浏览器的工具。

使用形状绘制属性并不能给出我想要的结果。

我希望我的元素具有良好的抗混叠，使路径看起来像下面的光滑与shape-rendering: auto一样。

​

​

但我也希望不需要反混叠的元素(如开始框)看起来清晰、清晰，例如使用shape-rendering: crispEdges呈现时。

​

​

这个是可能的吗？我想把蛋糕也吃了吗？

Answer 1

也许您为根svg元素设置了赋形属性。

您应该为每个形状元素设置形状呈现属性，如下所示。

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
        fill="none" stroke="black"/>
    <path d="M80,30l100,100" shape-rendering="optimizeQuality" 
        stroke="black" stroke-width="5"/>
</svg>

Answer 2

如果你想要你的盒子看起来锋利，没有任何模糊由于反混叠，并且不使用crispEdges模式，确保线的边缘在像素边界上。因此，例如，如果你的线条是一个奇数像素宽，给他们的坐标是0.5像素。

<rect x="10.5" y="10.5" width="150" height="20" 
    stroke-width="1px" fill="none" stroke="black"/>

在边界上，如果行程宽度是均匀的。

<rect x="10" y="10" width="150" height="20" 
    stroke-width="2px" fill="none" stroke="black"/>

当然，只有当SVG在1:1被呈现时，这才能真正发挥作用。也就是说，它不会被浏览器重新缩放。而且只适用于水平和垂直的线条。

Answer 3

[我把这作为回应而不是评论，因为我想贴一张照片。否则，这是对@defghi1977 1977有用的帖子的评论。顺便说一句，+1 .]

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
          fill="none" stroke="black" />
    <rect x="10" y="50" width="150" height="20" shape-rendering="auto" 
          fill="none" stroke="black" />
    <path d="M40,30l100,100" shape-rendering="crispEdges" 
          stroke="black" stroke-width="5" />
    <path d="M80,30l100,100" shape-rendering="auto" 
          stroke="black" stroke-width="5" />
</svg>

生产的

​

​

这是由Firefox 38.0.5呈现的。

在Internet 11中，两个shape-rendering设置都会产生相同的结果，而不是清晰的、反混叠的.