SVGシェイプレンダリングのドットが表示されます

Question

2つの同じ写真を交互のスリットで組み合わせてSVG効果を作ります。あなたがよく見ると、画像全体に45度の点線があります。このquestionを参照すると、すでにshape-rendering="optimizeQuality",shape-rendering="geometricPrecision"およびshape-rendering="auto"のタグを<polygon>というタグで試しましたが、ドットは引き続き表示されます。

小さなドットを削除するにはどうすればよいですか？

部分的な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

Answer 1

ですドットは、斜めのスリットクリッピングパスに使用しているポリゴンのアンチエイリアシングによって発生します。

IMOこれを防ぐ方法はありません。 `shape-rendering =" optimizeSpeed "でアンチエイリアスをオフにした方が良いかもしれません。 1つのブラウザで動作しても、他のブラウザでは動作しない可能性があります。

私の提案は、上に画像の完全な（ "スリットのない"）バージョンを持つことです。アニメーションが終了すると、最初は非表示にしてから表示します。