1. Zuhause
  2. Frage und Antwort
  3. SVG <set> Attribut 'tag's dur' animiert nicht

SVG <set> Attribut 'tag's dur' animiert nicht

2012-04-09 5 views
1

Ich versuche, einen Rollover mit dem SVG-Tag <set> zu animieren, aber obwohl ich dur = "1s" festlege, erfolgt der Übergang sofort (in Firefox, Safari, Opera und Chrome)).SVG <set> Attribut 'tag's dur' animiert nicht

<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"> 
     <set attributeType="CSS" attributeName="fill" to="green" begin="mouseover" end="mouseout" dur="1s" /> 
    </circle> 
</svg> 

</body> 
</html>

ich die Wirkung erzielen kann, die ich zwei <animate> Tags wollen, aber ich möchte den Übergang auf mehrere Elemente in der Lage sein anzuwenden, die unterschiedliche Ausgangs Farben haben können, die ich erhalten möchte (diese Methode erfordert, dass ich angeben die Anfangsfarbe "rot" im zweiten animierten Tag).

<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"> 
     <animate attributeType="CSS" attributeName="fill" to="green" begin="mouseover" dur="1s" fill="freeze" /> 
     <animate attributeType="CSS" attributeName="fill" to="red" begin="mouseout" dur="1s" fill="freeze"/> 
    </circle> 
</svg> 

</body> 
</html>

Der <set> Tag in dem ersten Codesegment bewahrt die ursprünglichen Farben, aber der Übergang nicht animiert ist. Wenn mein Verständnis der w3-Spezifikation korrekt ist, sollte es sein - sieht das wie ein Browser-spezifischer Fehler aus, oder habe ich die w3-Spezifikation falsch verstanden? Gibt es einen besseren Weg?

Quelle

2012-04-09 yasashiku

+1

Repro Fälle: http://jsfiddle.net/4xx5p/ (und das gilt auf Safari sowie Firefox) – Phrogz

+0

Dank für die Überprüfung, dass es auch nicht in Safari funktioniert ; Ich habe gerade auch in Opera und Chrome getestet, und ich bekomme dort das gleiche Verhalten. – yasashiku

Antwort

3

Wie im SVG 1.1 Specification beschrieben:

Das liefert ‚set‘ Element ein einfaches Mittel nur der Wert eines Attributs für eine bestimmte Dauer einstellen.
...
to = "<value>" Gibt den Wert für das Attribut während der Dauer des Elements 'set' an.

(Hervorhebung von mir.)

Wie Sie sehen können, die duration des <set> Element ist keine Übergangszeit, sondern vielmehr, wie lange der Effekt angewendet werden soll. Wenn Sie das end Attribut entfernen, sehen Sie die Farbänderung von Rot zu Grün für 1 Sekunde and then revert auf den ursprünglichen Wert.

Für weitere Details lesen Sie bitte das <set> Element in der SMIL Specification.

bearbeiten: Hier ist ein Beispiel benutzerdefinierte Daten mit Ihrem SVG-Elemente und einen Lauf einmal Skript mit Anmerkungen zu versehen, die diese Daten verwendet, um die <animate> Elemente zu erstellen Sie, auf die Füllung der Elemente basieren soll. Sie können dieses Beispiel bei http://phrogz.net/svg/change-color-on-hover.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:y="yasashiku" viewBox="0 0 240 150"> 
    <title>Change Color on Hover</title> 
    <style> 
    circle { stroke:black; stroke-width:2px } 
    circle:not([fill]) { fill:purple } 
    </style> 
    <circle cx="50" cy="50" r="40" fill="red" y:hoverAnimFillTo="blue" y:hoverAnimDur="0.3s" /> 
    <circle cx="100" cy="100" r="40" fill="red" y:hoverAnimFillTo="green" y:hoverAnimDur="1s" /> 
    <circle cx="150" cy="42" r="40" fill="orange" y:hoverAnimFillTo="yellow" /> 
    <circle cx="200" cy="100" r="40"    y:hoverAnimFillTo="steelblue" /> 
    <script> 
    var els = document.getElementsByTagName('*'), 
     y = 'yasashiku'; 
    for (var i=els.length;i--;){ 
     var fillColor = els[i].getAttributeNS(y,'hoverAnimFillTo'); 
     if (fillColor){ 
     var dur = els[i].getAttributeNS(y,'hoverAnimDur') || '0.1s'; 
     createOn(els[i],'animate',{ 
      begin:'mouseover', 
      attributeType:'CSS', attributeName:'fill', 
      to:fillColor, 
      dur:dur, fill:'freeze' 
     }); 
     createOn(els[i],'animate',{ 
      begin:'mouseout', 
      attributeType:'CSS', attributeName:'fill', 
      to:els[i].getAttribute('fill') || computedStyle(els[i],'fill'), 
      dur:dur, fill:'freeze' 
     }); 
     } 
    } 
    function createOn(el,name,attrs){ 
     var e = el.appendChild(document.createElementNS(el.namespaceURI,name)); 
     for (var name in attrs) e.setAttribute(name,attrs[name]); 
     return e; 
    } 
    function computedStyle(el,name){ 
     return document.defaultView.getComputedStyle(el,null)[name]; 
    } 
    </script> 
</svg>

Quelle

2012-04-10 04:05:40 Phrogz

+0

Danke; irgendwelche Gedanken darüber, wie ich ohne a priori Kenntnis der Ausgangsfarbe zurückkehren könnte? – yasashiku

+0

@yasashiku Persönlich würde ich nur JS entweder die Farben steuern oder (einfacher) dynamisch die '' Elemente basierend auf den Attributen erstellen.Wenn dies eine Option für Sie ist (wenn JS verfügbar ist) und Sie Hilfe benötigen, kann ich meine Antwort mit Details ergänzen. – Phrogz

+1

... vergiss, ich habe ein Beispiel erstellt und die Frage irgendwie bearbeitet. Hoffentlich hilft das. – Phrogz

1

Use "Werte" und "KeyTimes" Attribute leben sehen?

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"> 
 
    <animate attributeType="CSS" attributeName="fill" values="red;green;green;red" keyTimes="0;0.2;0.8;1" begin="mouseover" dur="2s" fill="freeze" /> 
 
    <animate attributeType="CSS" attributeName="fill" to="red" begin="mouseout" dur="1s" fill="freeze"/> 
 
    </circle> 
 
</svg>

Quelle

2014-11-12 09:35:01

 Verwandte Themen

  • Keine verwandten Themen^_^