SVG形状渲染点出现

我通过将两张相同的照片与交替的狭缝相结合来制作SVG效果。仔细观察，整个图像上都有45度的虚线。参考这一点，我已经在

标记上尝试了

shape-rendering=“optimizeQuality”

、

shape-rendering=“GeometricRection”

和

shape-rendering=“auto”

，但点仍然出现

如何去除这些小点

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

JSFiddle演示是

---

这些点是由用于对角狭缝剪裁路径的多边形的抗锯齿造成的

在我看来，没有任何办法可以阻止这种情况。如果使用“shape rendering=“optimizeSpeed”关闭抗锯齿功能，效果可能会更好，也可能不会更好。即使这在一个浏览器上有效，也可能在其他浏览器上无效

---

我的建议是在上面有一个完整的（“未分割的”）图像版本。首先使其不可见，然后在动画完成后显示它。

为什么无理由地进行向下投票？图像使用图像渲染，而不是形状渲染谢谢Robert，但是如果您阅读我的JSFIDLE，我将

形状渲染应用于
，而不是图像。我是否应该将
图像渲染
添加到
标记中？我应该使用哪个值？我无法从当前位置访问JSFIDLE。请把回答这个问题所需的一切都放在问题本身中。罗伯特，原始代码有数千行，其中大多数只是多边形坐标。太长，无法发布问题。请通过跨浏览器测试确认您的答案。即使使用了
optimizeSpeed
，大多数浏览器仍然具有对角线狭缝剪裁路径。只有Firefox和Mac Chrome是完美的。不知道这是否与显示卡驱动程序有关。
<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>