Veraltete SMIL-SVG-Animation durch CSS- oder Webanimationseffekte erset
In Übereinstimmung mit diesem Thema:
Firefox 38-40 SMIL-Probleme - sehr langsame Geschwindigkeit (behoben in FF-Version 41 vom 22.09.15)
und dieses Thema:
SVG-Tag "animateTransform" funktioniert nicht gut. Es wäre schön, SMIL (animate tag) durch CSS oder CSS-Übergänge zu ersetzen.
CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.
Die nächste Google Chrome-Warnung:
CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated
and will be removed. Please use CSS animations or Web animations instead.
Revision 196823: SMIL-Verwerfungswarnung hinzufügen
unächst muss ich drei Dinge implementieren:
1) Bewegen Sie den Mauszeiger über den Effekt (am einfachsten)Wie war es
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>
Ich habe das @ entferset
Tags, Klassen zum @ hinzugefürect
tag und fügte dies der CSS-Hover-Pseudoklasse hinzu:
.element_tpl:hover {
stroke-opacity: 0.5;
}
2) Skaliert einige Male nach der Änderung, die für dieses Element übernommen wurde (pageload)Wie war es
<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
Wie man ohne das @ organisieanimate
Etikett
???
3) Es animiert das Vergrößern und Verkleinern (onclick)Wie war es
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s" fill="freeze"/>
Wie organisieren ohneanimate
Etikett? Versucht, @ zu verwend:active
, aber es gibt Unterschiede im Verhalten:
.element_tpl:active {
transform: scale(1.1);
}
Dies ist der gesamte Code meines Vorlagenelements:
<g id="switcher" cursor="pointer" stroke-width="0.15">
<g transform="scale(1,1.375)">
<g>
<rect x="-0.5" y="-0.5" width="1" height="1" stroke="white" pointer-events="none"/>
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>
<line x1="0" y1="-0.25" x2="0" y2="0.25" stroke-width="0.17" stroke-linecap="round" pointer-events="none"/><!-- vertical on -->
<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
fill="freeze"/>
</g>
</g>
</g>
Arbeitsversion von meinem aktuellen Arbeitsprojekt sieht so aus:
http: //jsfiddle.net/7e2jeet (bisher nur von einem Browser-FF verwendet - da (aufgepasst) der Schwebeflug hier mit 2 Zahlen funktioniert - Ursache [Chrome unterstützt SMIL und "Use" zusammen, Firefox unterstützt derzeit SMIL nicht und "Use" zusammen] / laut Robert Longson )
in meinem Versuch, das äquivalente CSS zu erstellen, sieht es aus wie
http: //jsfiddle.net/7e2jeet0/1 (in FF)
http: //jsfiddle.net/7e2jeet0/2 (in Chrome)
oder dasselbe für ein anderes Element. Arbeitsversion:
http: //jsfiddle.net/f7o03rsr/1
http: //jsfiddle.net/f7o03rsr/2
Vielen Dank
Edit 1Ich habe das gefundendiese Kombinationsvariante funktioniert in Firefox gut für Hover und MouseDown, in Chrome funktioniert jedoch nur der Hover-Effekt.
Mich interessiert auch, wie ich einige dieser Animationen speichern kann:
http: //jsfiddle.net/e4dxx2wg/1
durch Übertragen auf CSS / Web-Animationen?