Два или более SVG на странице. Как я могу оживить их по нажатию кнопки?

Question

То же SVG повторяется в карусели несколько раз. Карусель построена в PHP, используя некоторое время l oop. Как я могу активировать анимацию нажатием кнопки «следующий / предыдущий» в карусели? Мой jQuery код указан ниже. Он анимирует только первый тег <animate>. Я думаю, что, должно быть, объяснил весь мой смысл.

jQuery(document).ready(function($){
    $('.first').click(function(){
        $('animate')[0].beginElement();
        $('animateTransform')[0].beginElement();
    });
});

Мой код SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">

<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
    <line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" dur="2s" class="ani" />

    <line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>

<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" dur="2s" class="ani" />

    <text x="200" y="80" class="wt1">10'</text>
</g>
<g>
    <g>
        <text x="368" y="70" class="wt1">5'</text>      
    </g>
    <line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
    <animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" dur="3s"  class="ani" />
    <animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" dur="3s"  class="ani" />


    <line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
    <animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" dur="3s" class="ani" />
    <animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" dur="3s" class="ani" />
</g>
<g>
    <ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
    <animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" dur="3s" class="ani" />
    <animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" dur="3s" class="ani" />

    <g id="box1" transform="translate(0, 0)">
    <polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4 
            "/>
    <path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
    <polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5  "/>
    <path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>

    <animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" dur="3s" class="ani" />
    </g>

</g>
</svg>

Answer 1

Вы забыли добавить таблицу стилей вопроса. Я восстановил значения цвета частей SVG в соответствии с рисунком.
Поскольку все анимации должны запускаться одновременно одним щелчком мыши, вы можете обойтись без Javascript

. Для этого добавьте запуск Команда для каждой анимации begin="Layer_1.click"

.container {
 width:75%;
 height:75%;
 }
.st0 {fill:#C8C8C8;}
.st1 {fill:#E7E7E7;}
.st2 {fill:#6A6A6A;}
.st3 {stroke:#F6C44A;}
.st4 {fill:#323232;}
.st5 {fill:#CB9751;}
.st6 {fill:#E0B268;}
.st7 {fill:#C8A066;}
.st8 {fill:#E3C084;}

<div class="container">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">

<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
    <line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" begin="Layer_1.click" dur="2s" class="ani" />

    <line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>

<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" begin="Layer_1.click" dur="2s" class="ani" />

    <text x="200" y="80" class="wt1">10'</text>
</g>
<g>
    <g>
        <text x="368" y="70" class="wt1">5'</text>      
    </g>
    <line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
    <animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" begin="Layer_1.click" dur="3s"  class="ani" />
    <animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" begin="Layer_1.click" dur="3s"  class="ani" />


    <line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
    <animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" begin="Layer_1.click" dur="3s" class="ani" />
    <animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" begin="Layer_1.click" dur="3s" class="ani" />
</g>
<g>
    <ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
    <animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" begin="Layer_1.click" dur="3s" class="ani" />
    <animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" begin="Layer_1.click" dur="3s" class="ani" />

    <g id="box1" transform="translate(0, 0)">
    <polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4 
            "/>
    <path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
    <polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5  "/>
    <path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>

    <animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" begin="Layer_1.click" dur="3s" class="ani" />
    </g>

</g>
</svg>
</div>