出现SVG形状渲染点

Question

我通过将2张相同的照片与备用狭缝相结合来制作SVG效果。当你仔细观察时，整个图像上有45度的虚线。引用此question，我已在shape-rendering="optimizeQuality"代码上尝试了选项shape-rendering="geometricPrecision"，shape-rendering="auto"和<polygon>，但仍会显示这些点。

如何删除小点？

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

<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

Answer 1

这些点是由用于对角线切割路径的多边形的抗锯齿引起的。

IMO没有办法阻止这种情况发生。如果使用`shape-rendering =＆＃34; optimizeSpeed＆＃34;关闭反锯齿，它可能会或可能不会变得更好。即使它适用于一个浏览器，也可能不适用于其他浏览器。

我的建议是在图像上面放一个完整的（＆＃34; un-slitted＆＃34;）版本的图像。最初使其不可见，然后在动画结束后显示它。