出现 SVG 形状渲染点答案

【问题标题】：SVG shape rendering dots appears出现 SVG 形状渲染点
【发布时间】：2016-10-13 19:42:55
【问题描述】：

我通过将 2 张相同的照片与交替的狭缝相结合来制作 SVG 效果。当你仔细观察时，整个图像都有 45 度的虚线。参考这个question，我已经在<polygon>标签上尝试了shape-rendering="optimizeQuality"、shape-rendering="geometricPrecision"和shape-rendering="auto"选项，但点仍然出现。

如何去除小点？

部分 HTML 代码（完整代码太长，无法在此处发布，完整的 CSS、JS 和 HTML 代码请参见下面的 JSFiddle）：

<div class="image_wrapper">
    <svg id="svg-1" class="clip-svg">
        <image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
    </svg>
</div>
<div class="image_wrapper2">
    <svg id="svg-2" class="clip-svg">
        <image class="svg-image" xlink:href="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/image_embed/public/2016/09/28/pen-pineapple-apple-pen-meaning-lyrics-ppap-piko-taro-youtube-video-watch-how-do_1.jpg" width="640" height="360" />
    </svg>
</div>

JSFiddle 演示是here

【问题讨论】：

为什么要无故投反对票？
图像使用图像渲染，而不是形状渲染
谢谢罗伯特，但如果你阅读我的 JSFiddle，我将 shape-rendering 应用到 <polygon> 而不是图像。我应该将image-rendering 添加到<image> 标签中吗？我应该使用哪个值？
我无法从当前位置访问 jsfiddle。请将回答问题所需的所有内容放在问题本身中。
罗伯特，原来的代码有几千行，大部分只是多边形坐标。发布问题的时间过长。

标签： svg

【解决方案1】：

这些点是由您用于对角线狭缝剪裁路径的多边形的抗锯齿引起的。

IMO 没有任何方法可以防止这种情况发生。如果您使用 `shape-rendering="optimizeSpeed" 关闭抗锯齿，它可能会或可能不会变得更好。即使这适用于一种浏览器，它也可能不适用于其他浏览器。

我的建议是在顶部放置一个完整（“未分割”）的图像版本。最初使其不可见，然后在动画完成后显示它。

【讨论】：

通过跨浏览器测试确认了您的答案。即使使用optimizeSpeed，大多数浏览器仍然具有对角线剪切路径。只有 Firefox 和 Mac Chrome 是完美的。不知道是不是和显卡驱动有关。