SVG Text clippath in Firefox

Ich benutze einen Text Clippath, um eine SVG Anzeige von Text zu erstellen, so dass ich den Hintergrund animieren kann, um für einen lustigen Text Enthüllungseffekt zu kommen.SVG Text clippath in Firefox

Es funktioniert gut in Chrome und Safari, aber in Firefox gibt es Probleme mit dem Clippath.

<svg viewBox="0 0 600 150"> 

    <!-- Clippath with text --> 
    <clippath id="cp-text"> 
    <text text-anchor="left" 
     x="0" 
     y="50%" 
     dy=".35em" 
     class="text--line" 
     > 
    hello 
    </text> 
    </clippath> 


    <!-- Group with clippath for text--> 
    <g clip-path="url(#cp-text)" class="colortext"> 
    <!-- Animated shapes inside text --> 
    <polyline class="anim-shape" points="559.91 153.84 526.17 -11.62 478.32 -11.62 512.05 150.84 559.91 153.84" style="fill: #4c4870"/> 
    <polyline class="anim-shape" points="599.75 149.75 599.92 -0.62 528.07 -0.62 558.75 150.75 599.75 149.75" style="fill: #93d2c4"/> 
    <polygon class="anim-shape" points="479.07 -11.62 395.78 -11.62 429.52 153.84 512.8 153.84 479.07 -11.62" style="fill: #f89c2c"/> 
    </g> 
</svg>

Ich verwende CSS-Transformationen, um die Polgyon-Formen beim Laden zu animieren (skalieren und übersetzen).

Siehe codepen Demo hier: https://codepen.io/njpatten/pen/zwEeev

Ich habe versucht, die polgyons innerhalb des svg modernisiert werden, aber es scheint ein Problem mit dem clippath Text-Rendering wird verzögert zu sein.

Irgendeine Idee, was könnte das Problem in Firefox sein? Vielen Dank im Voraus für Anregungen oder Hilfe!

Quelle

2017-07-05 njpatten

BTW, es ist sehr smart und gute Idee für einen solchen Effekt :) gut gemacht. – Fered

Es scheint ein Fehler in Firefox zu sein. Ich habe es berichtet https://bugzilla.mozilla.org/show_bug.cgi?id=1378707 –

Es scheint, dass Firefox neben der von Ihnen erstellten Textmaske etwas zum Rendern benötigt, während die animierten Formen mit einer Skalierung von 0,1 einige Probleme haben. Ich habe dieses

<rect x="0" y="0" width="100%" height="100%" fill="transparent" />

kurz vor dem ersten Polygon und scheint es jetzt funktioniert ähnlich wie Chrome. Ich denke, Sie können mit width und height arbeiten, wenn Sie nicht die volle Breite und Höhe wollen.

Hoffe es hilft

Quelle

2017-07-05 21:12:05 Fered

Gut gemacht, diese Problemumgehung zu finden. Beachten Sie, dass dieser Fix nur für den Teil der Gruppe hilfreich ist, der von diesem Element abgedeckt wird. Wenn das Element also breiter als 1000 ist, wird die Animation dennoch teilweise fehlschlagen. Eine bessere Rect wäre etwas wie '' –

Ich hätte es schon vorgeschlagen :) danke zum Zeigen – Fered

Funktioniert wie ein Charme! Vielen Dank! – njpatten

SVG Text clippath in Firefox

Antwort

Verwandte Themen