Klicken Sie durch Serie von Bildern mit SVG „animieren“

Question

Sagen, ich habe ein SVG-Bild mit mehreren Top-Level „g“ Elemente wie folgt aus:

<svg> 
<g id="id1">...</g> 
<g id="id2">...</g> 
<g id="id3">...</g> 
... 
</svg> 

Jetzt würde ich nur das eine mit id1 zu zeigen, wie am Anfang, gleiten durch id2, id3 und so weiter, wie der Benutzer wiederholt auf das Bild klickt (ähnlich einer Powerpoint-Präsentation). Ich habe versucht, dies als ersten Schritt:

<animate xlink:href="#id2" attributeName="opacity" from="0" to="0" dur="0s" begin="0s"/> 
<animate xlink:href="#id3" attributeName="opacity" from="0" to="0" dur="0s" begin="0s"/> 
... 

<animate xlink:href="#id2" attributeName="opacity" from="0" to="100" dur="0.25s" begin="click" id="anim1"/> 
<animate xlink:href="#id1" attributeName="opacity" from="100" to="0" dur="0.25s" begin="anim1.begin" id="anim2"/> 
... 

Die ersten Zeilen sollen, alle Bilder mit Ausnahme des id1 Bild transparent machen - der gut arbeitet. Die nächsten zwei Zeilen sollen id1 transparant machen und id2 anzeigen - was nicht funktioniert. Ich nehme an, dass die transparenten Bilder mit höheren IDs auf höheren Ebenen (in z-Richtung) liegen und die Klick-Ereignisse der unteren Bilder blockieren. Aber ich weiß nicht, wie man sie komplett "verschwinden lässt" oder was auch immer.

Und wahrscheinlich gibt es einen besseren Weg, dies trotzdem zu tun ...?

Answer 1

Sie können es mit SMIL-Animation tun. Wir brauchen nur ein paar <set> Elemente für jeden Zustand. Jeder der beiden wird durch einen Klick ausgelöst. Einer zeigt die nächste Gruppe und der andere den letzten.

<svg> 
 
    <g id="id1"> 
 
    <rect width="100%" height="100%" fill="red"/> 
 
    </g> 
 
    <g id="id2" display="none"> 
 
    <rect width="100%" height="100%" fill="orange"/> 
 
    </g> 
 
    <g id="id3" display="none"> 
 
    <rect width="100%" height="100%" fill="yellow"/> 
 
    </g> 
 
    <g id="id4" display="none"> 
 
    <rect width="100%" height="100%" fill="green"/> 
 
    </g> 
 

 
    <set xlink:href="#id2" attributeType="XML" attributeName="display" 
 
     to="block" begin="id1.click" /> 
 
    <set xlink:href="#id1" attributeType="XML" attributeName="display" 
 
     to="none" begin="id1.click" /> 
 

 
    <set xlink:href="#id3" attributeType="XML" attributeName="display" 
 
     to="block" begin="id2.click" /> 
 
    <set xlink:href="#id2" attributeType="XML" attributeName="display" 
 
     to="none" begin="id2.click" /> 
 

 
    <set xlink:href="#id4" attributeType="XML" attributeName="display" 
 
     to="block" begin="id3.click" /> 
 
    <set xlink:href="#id3" attributeType="XML" attributeName="display" 
 
     to="none" begin="id3.click" /> 
 

 
    <set xlink:href="#id1" attributeType="XML" attributeName="display" 
 
     to="block" begin="id4.click" /> 
 
    <set xlink:href="#id4" attributeType="XML" attributeName="display" 
 
     to="none" begin="id4.click"/> 
 

 
</svg>

Es ist auch sehr leicht - und vielleicht flexibler - mit Javascript zu tun.

// Get the SVG element 
 
var mysvg = document.getElementById("mysvg"); 
 

 
// Get all the G elements that are children of our SVG 
 
var groups = mysvg.querySelectorAll("g"); 
 

 
// Which G is currently shown 
 
var current = 0; 
 

 
// Show that G and hide the others 
 
showGroup(current); 
 

 
// Add the click event handler to the SVG 
 
mysvg.addEventListener("click", groupSwitcher); 
 

 

 

 
// Define the click handler that we will attach to the SVG. 
 
function groupSwitcher(evt) 
 
{ 
 
    // When we receive a click, select the next group 
 
    current += 1; 
 
    // Wrap naround to the beginning if we go past the last one 
 
    if (current === groups.length) 
 
    current = 0; 
 
    
 
    // Show the new group (and hide the old one); 
 
    showGroup(current); 
 
} 
 

 

 
// The function that shows one group and hides the others. 
 
function showGroup(groupNumber) 
 
{ 
 
    for (var i=0; i < groups.length; i++) { 
 
    if (i === groupNumber) { 
 
     // If this is the one we want to show then make it visible 
 
     groups[i].setAttribute("visibility", "visible"); 
 
    } else { 
 
     // It's one of the others, hide it 
 
     groups[i].setAttribute("visibility", "hidden"); 
 
    } 
 
    } 
 
}

<svg id="mysvg"> 
 
    <g id="id1"> 
 
    <rect width="100%" height="100%" fill="red"/> 
 
    </g> 
 
    <g id="id2"> 
 
    <rect width="100%" height="100%" fill="orange"/> 
 
    </g> 
 
    <g id="id3"> 
 
    <rect width="100%" height="100%" fill="yellow"/> 
 
    </g> 
 
    <g id="id4"> 
 
    <rect width="100%" height="100%" fill="green"/> 
 
    </g> 
 
</svg>