SVG Form Rendering Punkte erscheint

Question

Ich mache SVG-Effekte durch die Kombination von 2 identischen Fotos mit alternativen Schlitzen. Wenn Sie genau hinsehen, gibt es gepunktete Linien um 45 Grad über die gesamten Bilder. Bezug nehmend auf diese question, habe ich bereits die Option shape-rendering="optimizeQuality", shape-rendering="geometricPrecision" und shape-rendering="auto" auf <polygon> Tags versucht, aber die Punkte immer noch angezeigt.

Wie entferne ich die kleinen Punkte?

Teil HTML-Codes (vollständige Code ist zu lang, um hier zu posten, sehen JSFiddle unten für die vollständige CSS, JS und HTML-Codes):

<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 Demo ist here

Answer 1

Die Punkte werden durch Anti-Aliasing der Polygone verursacht, die Sie für die Clipping-Pfade des diagonalen Schnitts verwenden.

IMO gibt es keine Möglichkeit, das zu verhindern. Es kann oder kann nicht besser werden, wenn Sie Anti-Aliasing mit `shape-rendering =" optimizeSpeed ​​"ausschalten. Und selbst wenn das in einem Browser funktioniert, funktioniert es möglicherweise nicht auf anderen.

Mein Vorschlag ist, nur eine vollständige ("nicht geschlitzte") Version des Bildes oben zu haben. Machen Sie es zunächst unsichtbar und zeigen Sie es dann an, wenn die Animation beendet ist.