Develop Reference

Two or more SVGs in a page. How can I animate them on button click?

Same SVG is repeated in carousel multiple times. Carousel is constructed in PHP using a while loop. How can I trigger animation at the click of a next/prev button in carousel?
My jQuery code is as below. It animates only the first <animate> tag. I think I must have explained my whole point.
jQuery(document).ready(function($){
$('.first').click(function(){
$('animate')[0].beginElement();
$('animateTransform')[0].beginElement();
});
});
My SVG code:
<?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>

You forgot to add a question style sheet. I restored the color values of the svg parts according to the figure.
Since all animations should start simultaneously at the click of a mouse, you can do without Javascript
To do this, add a launch command to each animation 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>

How to center an SVG element based on another element using js?

I made an SVG face and want to center each pupil in their respective eye.
I tried doing this by getting the center of the eye using getBoundingClientRect(). However when I set the position of the pupil this way it didn't work as expected (it did not center, and changes location based on size of page).
I'm guessing getBoundingClientRect() is related to a global position and the cx, cy attributes are local, but it's not clear to me what the attributes are local to or how I would fix it
Any ideas why this doesn't work and what approach might fix it?
Code
// Center the pupil in the eye. Side param is "left" or "right"
function center_pupil(side) {
let eye = document.querySelector(`#${side}-eye`).getBoundingClientRect()
let pupil = document.querySelector(`#${side}-pupil`)
let pupil_radius = pupil.getAttribute("r")
pupil.setAttribute("cx", eye.left + eye.width / 2 - pupil_radius)
pupil.setAttribute("cy", eye.top + eye.height / 2 - pupil_radius)
}
center_pupil("left")
center_pupil("right")
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 645.72 579.45">
<defs>
<clipPath id="clip-path" transform="translate(-114.91 -242.55)">
<path d="M544,377s9-21,54-25c0,0,114-7,150,25s-43,86-43,86-33.77,18.6-79.06,11.62C615.11,473,587.67,468.87,563,448c-10.53-8.91-25.76-21.79-27-42C535.2,393.05,540.49,382.61,544,377Z"
fill="none" />
</clipPath>
<clipPath id="clip-path-2" transform="translate(-114.91 -242.55)">
<path d="M117.5,397.5a38.69,38.69,0,0,1,8-11c6.89-6.57,14.55-8.78,19-10,32.47-8.93,45-10,45-10,34.68-2.95,53.54-4.56,81-1,33.83,4.38,50.79,6.54,61,21,13.58,19.24,5,45.13,4,48-6.94,20.08-23.19,30.46-35,38a106,106,0,0,1-29.07,12.82,108,108,0,0,1-39.93,3.18c-4.63.72-54.1,7.55-88.32-28.91C120.39,435.31,117.91,406.25,117.5,397.5Z"
fill="none" />
</clipPath>
</defs>
<title>face</title>
<g id="eyes">
<g id="right-eye">
<path d="M540.89,375.37A28.23,28.23,0,0,1,548.4,367a24,24,0,0,1,2.19-1.6c.76-.5,1.5-1,2.26-1.48,1.56-.86,3.07-1.81,4.67-2.55s3.14-1.57,4.76-2.23c.8-.34,1.6-.69,2.39-1.06l2.42-.94c.81-.31,1.61-.65,2.42-1s1.64-.56,2.46-.85l2.46-.81a25.18,25.18,0,0,1,2.49-.73c1.68-.43,3.34-.91,5-1.36s3.38-.71,5.07-1.07l2.54-.55,2.56-.41,5.14-.82c1.81-.26,3.45-.36,5.17-.53l5.12-.43q5.12-.4,10.23-.65a289.41,289.41,0,0,1,41,.71c6.82.65,13.62,1.57,20.39,2.63s13.51,2.37,20.23,3.71,13.41,2.9,20.15,4.54c1.69.38,3.36.86,5,1.36l2.51.73c.83.26,1.65.58,2.48.87l2.47.9c.82.3,1.61.71,2.42,1.05a49,49,0,0,1,4.78,2.33,52.84,52.84,0,0,1,4.63,2.72l2.26,1.48c.75.49,1.44,1.12,2.16,1.68l2.12,1.72c.67.65,1.37,1.27,2,2a30,30,0,0,1,3.57,4.42c.57.78,1,1.65,1.5,2.47s.88,1.73,1.21,2.64a25.41,25.41,0,0,1,1.57,5.59,29.78,29.78,0,0,1-.37,11.31c-4.58,14.09-13,25.18-22.33,35.35a178.89,178.89,0,0,1-14.84,14.31q-3.88,3.39-8,6.53c-2.72,2.11-5.44,4.15-8.32,6.15l-.11.08-.1.05c-2.33,1.23-4.54,2.18-6.86,3.13s-4.62,1.77-7,2.58c-4.68,1.57-9.43,2.87-14.23,4a151.83,151.83,0,0,1-29.28,3.67c-2.46,0-4.93.12-7.39.07l-7.41-.31-7.38-.71c-2.46-.23-4.85-.58-7.3-.93a131.55,131.55,0,0,1-28.88-7.35,114.07,114.07,0,0,1-13.69-6.28c-2.25-1.13-4.38-2.49-6.55-3.78-1.08-.65-2.09-1.41-3.14-2.11s-2.12-1.4-3.1-2.19a143.74,143.74,0,0,1-11.34-9.74,83.58,83.58,0,0,1-10.05-11.51A57.13,57.13,0,0,1,535.46,420a53.51,53.51,0,0,1-2.89-15.38,48.4,48.4,0,0,1,2-15.44,50,50,0,0,1,2.7-7.28c.54-1.17,1.12-2.32,1.76-3.44.31-.56.64-1.11,1-1.65S540.59,375.83,540.89,375.37Zm6.22,3.26c-.75,1.3-1.25,2.21-1.77,3.23s-1,2-1.52,3a56.3,56.3,0,0,0-2.49,6.29,41.51,41.51,0,0,0-2,13.2,34.3,34.3,0,0,0,2.84,12.95,45.72,45.72,0,0,0,7.15,11.32,91.37,91.37,0,0,0,9.77,9.7c3.46,3.07,7.29,6.18,10.83,9a112.56,112.56,0,0,0,23.73,14.54,121.21,121.21,0,0,0,13.15,5,135,135,0,0,0,13.72,3.63c2.31.47,4.7,1,7,1.32s4.69.73,7,1l7.1.56c2.37.13,4.75.12,7.13.18a128.42,128.42,0,0,0,28.29-3.39,135,135,0,0,0,13.69-4c2.23-.81,4.46-1.64,6.63-2.57s4.39-1.91,6.33-3l-.21.13c5.43-3.8,10.71-8.06,15.86-12.34s10.1-8.85,14.78-13.63a103.24,103.24,0,0,0,12.64-15.43,47.41,47.41,0,0,0,4.69-8.65,40.34,40.34,0,0,0,2.28-9.25,33.29,33.29,0,0,0,.35-4.54,22.19,22.19,0,0,0-.46-4.4,20.11,20.11,0,0,0-1.34-4.15c-.25-.67-.64-1.3-1-1.95s-.74-1.27-1.2-1.86a29.21,29.21,0,0,0-6.38-6.48c-.62-.47-1.2-1-1.86-1.44l-2-1.34a46,46,0,0,0-4.12-2.49c-11.39-6-24.05-11.23-37.37-13.24-13.25-2.37-26.77-3-40.22-3.48s-26.92-1-40.43-1.38l-10.13-.24-5.07-.07c-1.66,0-3.42,0-5,0a108.23,108.23,0,0,0-19.78,2.72,24.43,24.43,0,0,0-2.41.65l-2.39.72a43.68,43.68,0,0,0-4.71,1.63c-.77.32-1.55.6-2.3.94s-1.48.75-2.21,1.14-1.47.74-2.17,1.18l-2.06,1.35-1,.68c-.33.24-.64.51-1,.76l-1.9,1.53c-.6.54-1.18,1.11-1.76,1.65a20.72,20.72,0,0,0-1.67,1.71c-.54.58-1.07,1.17-1.54,1.78a21.79,21.79,0,0,0-1.41,1.83l-.66.93-.59.93c-.21.31-.34.62-.52.93-.09.15-.15.29-.22.43Z"
transform="translate(-114.91 -242.55)" />
</g>
<path d="M505,327" transform="translate(-114.91 -242.55)" />
<g id="left-eye">
<path d="M114.91,397a8.77,8.77,0,0,1,.41-1.29c.07-.21.14-.43.22-.65.15-.43.33-.85.52-1.27a23.67,23.67,0,0,1,1.3-2.43,33.63,33.63,0,0,1,3.35-4.38,39.68,39.68,0,0,1,8.37-7.14,45.38,45.38,0,0,1,9.88-4.59c3.45-1.11,6.75-1.8,10-2.64,6.64-1.59,13.29-3.11,20-4.49,3.35-.68,6.71-1.32,10.08-1.9,1.69-.29,3.38-.58,5.08-.84l2.56-.36,1.29-.16.66-.08.33,0,.17,0,.34,0h-.15l10-.79c3.36-.27,6.71-.48,10.05-1s6.66-1.26,10-1.68,6.74-.55,10.13-.72c6.78-.27,13.6-.4,20.41-.06s13.6.93,20.33,1.86,13.33,1.84,20,2.91a156,156,0,0,1,20.08,4.29c.83.26,1.66.55,2.49.83s1.65.56,2.47.91l2.45,1,2.4,1.19a37.88,37.88,0,0,1,8.79,6.29,39.43,39.43,0,0,1,6.43,8.62,19,19,0,0,1,1.21,2.38l1.11,2.43.86,2.52a18.46,18.46,0,0,1,.77,2.53,57.7,57.7,0,0,1,1.39,20.78,77.82,77.82,0,0,1-1.71,10.2c-.41,1.68-.84,3.35-1.38,5s-1.2,3.27-1.82,4.9a80.14,80.14,0,0,1-10.73,18l-.83,1-.87,1c-.6.64-1.17,1.32-1.79,1.94-1.24,1.23-2.49,2.46-3.82,3.59a93.34,93.34,0,0,1-8.31,6.24c-1.42.95-2.85,1.9-4.28,2.81s-2.82,1.81-4.32,2.74q-4.45,2.71-9.14,5a111.57,111.57,0,0,1-19.45,7.27,109.85,109.85,0,0,1-41.18,3l.81,0a96.63,96.63,0,0,1-10.64.84c-3.53.09-7.06,0-10.58-.18a118,118,0,0,1-20.88-3.16A104.42,104.42,0,0,1,170,482a97.9,97.9,0,0,1-18-11.15,94.11,94.11,0,0,1-26.21-32.74,104.55,104.55,0,0,1-7.36-19.73q-1.36-5.09-2.24-10.3c-.28-1.74-.57-3.48-.77-5.23-.12-.87-.2-1.75-.29-2.63l-.07-.66-.07-.86C114.94,398.15,114.92,397.55,114.91,397Zm5.18,1.08a7,7,0,0,1,.08.79l0,1.06c.05.83.09,1.67.17,2.5.11,1.68.31,3.34.51,5,.46,3.33,1.1,6.63,1.88,9.91.39,1.63.86,3.25,1.32,4.86s1,3.21,1.62,4.78c1.17,3.15,2.48,6.25,4,9.27a87.88,87.88,0,0,0,42.45,41.16,99.57,99.57,0,0,0,19,6.34,112.17,112.17,0,0,0,19.92,2.62c3.35.14,6.71.15,10.05,0a89,89,0,0,0,9.9-.94l.38-.06.43,0a105.31,105.31,0,0,0,19.53.1A110.47,110.47,0,0,0,270.55,482a104.55,104.55,0,0,0,18.21-6.92,96.58,96.58,0,0,0,8.52-4.71c1.36-.84,2.79-1.77,4.18-2.67s2.76-1.83,4.12-2.75c2.72-1.85,5.3-3.82,7.85-5.8s5-4,7.4-6.21a51.27,51.27,0,0,0,6.53-7.12,42.86,42.86,0,0,0,4.84-8.38,61.67,61.67,0,0,0,4.57-18.91,52.32,52.32,0,0,0-1.7-19.18,18.18,18.18,0,0,0-.76-2.26l-.84-2.22-1.06-2.12a16.05,16.05,0,0,0-1.13-2.08,35,35,0,0,0-5.82-7.29,34.22,34.22,0,0,0-7.68-5.19l-2.14-1-2.23-.86c-.73-.3-1.5-.55-2.27-.78s-1.53-.49-2.31-.71a160.49,160.49,0,0,0-19.39-3.74c-6.59-.93-13.26-1.73-19.92-2.52a264.5,264.5,0,0,0-39.7-1.74c-3.33.07-6.65.33-10,.27s-6.72-.28-10.08-.29a96.26,96.26,0,0,0-10.05.57l-10,.9h-.16l-2.26.33-2.48.41c-1.65.29-3.3.61-4.95.95-3.3.7-6.59,1.48-9.87,2.28-6.56,1.62-13.08,3.42-19.58,5.32-3.23,1-6.56,1.86-9.53,3a39,39,0,0,0-8.42,4.28,34.43,34.43,0,0,0-6.92,6.22,46.51,46.51,0,0,0-2.8,3.73l-1.37,1.92-.7,1-.37.48A.39.39,0,0,0,120.09,398Z"
transform="translate(-114.91 -242.55)" />
</g>
</g>
<g clip-path="url(#clip-path)">
<circle id="right-pupil" cx="532.09" cy="125.45" r="31" />
</g>
<g clip-path="url(#clip-path-2)">
<circle id="left-pupil" cx="116.59" cy="139.95" r="31" />
</g>
<g id="Layer_4" data-name="Layer 4">
<path d="M505,264s120-29,194-10" transform="translate(-114.91 -242.55)" fill="none" stroke="#000"
stroke-miterlimit="10" stroke-width="10" />
<path d="M154,280s116-27,179,0" transform="translate(-114.91 -242.55)" fill="none" stroke="#000"
stroke-miterlimit="10" stroke-width="10" />
<path d="M390,401c9.15,143.49,6.63,190.63,2,205,0,0-6.53,20.28-2,41a35.35,35.35,0,0,0,4,10s1.3,2.14,8,10"
transform="translate(-114.91 -242.55)" fill="none" stroke="#000" stroke-miterlimit="10"
stroke-width="10" />
<line x1="321.09" y1="415.45" x2="329.09" y2="424.45" fill="none" stroke="#000" stroke-miterlimit="10"
stroke-width="10" />
<path d="M363,774l146-4s-1,47-73,47S363,774,363,774Z" transform="translate(-114.91 -242.55)" fill="none"
stroke="#000" stroke-miterlimit="10" stroke-width="10" />
</g>
</svg>
What I'm currently seeing
Note: pupil location changes based on screen size

HTML - SVG File animation not working on host, but works on local?

I have an "roulette roll" svg file, but it does nothing. If I tried it on localhost everything was working perfectly! On hosting, it's just like "picture" doing nothing. Question is, how could I fix it?
.svg file code: http://pastebin.com/dsyD3vft
Container:
<div class="wheel_container col s6" style="padding: none;">
<object type="image/svg+xml" data="wheel.svg" class="wheel" id="wheel">Your browser does not support SVG</object>
</div>
CSS:
.wheel {
width:100%;
z-index: 0;
display:block;
}
Javascript:
$("object").load(function() {
wheelSVG = $("object").contents().find("svg");
spinner = spinner.add(wheelSVG.find("#spin"));
center = wheelSVG.find("#ui ellipse");
centerText = wheelSVG.find("#number");
clearInterval(beforeLoginSpinInterval);
if(!loggedinn) {
beforeLoginSpinInterval = setInterval(function() {
currentRotation += 0.25;
spinner.css("transform", 'rotate('+currentRotation+'deg)');
}, 20);
}
});
Spin
<g xmlns="http://www.w3.org/2000/svg" id="spin">
<g>
<g>
<path class="st1" d="M432.3,38.5c-34.2,7.3-68.1,18.3-101.3,33.1s-64,32.7-92.3,53.1l72.2,99.4l-0.4,0.3 c21.6-15.7,45.1-29.3,70.5-40.6c25.3-11.3,51.2-19.6,77.3-25.2l-0.5,0.1L432.3,38.5z"/>
</g>
<text transform="matrix(0.9136 -0.4067 0.4067 0.9135 322.6442 175.6196)" class="st0 st2 st3">14</text>
</g>
<g>
<g>
<path class="st4" d="M237.9,125.3c-28.2,20.6-54.8,44.4-79.1,71.4s-45.2,55.9-62.7,86.1l106.4,61.4l-0.2,0.4 c13.4-23.1,29.3-45.1,47.9-65.8s38.8-38.8,60.4-54.5l-0.4,0.3L237.9,125.3z"/>
</g>
<text transform="matrix(0.6691 -0.7431 0.7431 0.6691 210.1937 276.5912)" class="st0 st2 st5">7</text>
</g>
<g>
<g>
<path class="st1" d="M95.6,283.6c-17.4,30.3-32,62.8-43.2,97.4s-18.6,69.4-22.3,104.2l122.2,12.8l-0.1,0.5 c2.8-26.5,8.4-53.2,17-79.5c8.6-26.4,19.7-51.2,33-74.3l-0.2,0.4L95.6,283.6z"/>
</g>
<text transform="matrix(0.309 -0.951 0.9511 0.309 124.1028 456.9215)" class="st0 st2 st6">13</text>
</g>
<g>
<g>
<path class="st4" d="M30,486.2c-3.6,34.8-3.6,70.4,0.2,106.5s11.3,71,22,104.2L169,659l0.2,0.5c-8.2-25.4-13.9-52-16.8-79.6 s-2.8-54.8-0.1-81.3l-0.1,0.5L30,486.2z"/>
</g>
<text transform="matrix(-0.1045 -0.9945 0.9945 -0.1045 123.8907 608.0349)" class="st0 st2 st7">6</text>
</g>
<g>
<g>
<path class="st1" d="M52.4,697.9c10.9,33.2,25.3,65.8,43.5,97.3c18.2,31.5,39.2,60.3,62.5,86.3l91.3-82.2l0.3,0.4 c-17.8-19.8-33.9-41.8-47.7-65.9s-24.9-48.9-33.2-74.3l0.2,0.5L52.4,697.9z"/>
</g>
<text transform="matrix(-0.5 -0.866 0.866 -0.5 200.3061 792.6865)" class="st0 st2 st8">12</text>
</g>
<g>
<g>
<path class="st4" d="M159.1,882.2c23.4,25.9,49.9,49.8,79.3,71.2c29.4,21.4,60.3,39.1,92.2,53.4l50-112.3l0.4,0.2 c-24.4-10.9-48-24.4-70.4-40.7c-22.4-16.3-42.6-34.6-60.5-54.4l0.3,0.4L159.1,882.2z"/>
</g>
<text transform="matrix(-0.809 -0.5878 0.5878 -0.809 312.469 893.9415)" class="st0 st2 st9">5</text>
</g>
<g>
<g>
<path class="st1" d="M331.5,1007.2c31.9,14.1,65.8,25.2,101.4,32.8s71,11.2,105.9,11.3V928.4h0.5c-26.7,0-53.8-2.8-80.9-8.6 c-27.1-5.8-53-14.2-77.4-25.1l0.4,0.2L331.5,1007.2z"/>
</g>
<text transform="matrix(-0.9782 -0.2079 0.2079 -0.9781 500.8162 960.7355)" class="st0 st2 st10">11</text>
</g>
<g>
<g>
<path class="st4" d="M539.8,1051.3c34.9-0.1,70.4-3.7,105.9-11.3s69.4-18.6,101.4-32.8l-50-112.3l0.4-0.2 c-24.4,10.8-50.3,19.3-77.4,25.1c-27.1,5.8-54.2,8.6-80.9,8.6h0.5V1051.3z"/>
</g>
<text transform="matrix(-0.9782 0.2079 -0.2079 -0.9781 651.1284 945.1309)" class="st0 st2 st10">4</text>
</g>
<g>
<g>
<path class="st1" d="M748,1006.8c31.9-14.3,62.8-32,92.2-53.4c29.4-21.4,55.8-45.3,79.3-71.2L828.2,800l0.3-0.4 c-17.9,19.8-38.1,38.1-60.5,54.4c-22.4,16.3-46,29.9-70.4,40.7l0.4-0.2L748,1006.8z"/>
</g>
<text transform="matrix(-0.809 0.5878 -0.5878 -0.809 826.7827 849.8548)" class="st0 st2 st9">10</text>
</g>
<g>
<g>
<path class="st4" d="M920.2,881.5c23.3-26,44.3-54.8,62.5-86.3c18.2-31.5,32.6-64.1,43.5-97.3l-116.9-38l0.2-0.5 c-8.3,25.4-19.3,50.3-33.2,74.3s-29.9,46-47.7,65.9l0.3-0.4L920.2,881.5z"/>
</g>
<text transform="matrix(-0.5 0.866 -0.866 -0.5 915.7706 727.7227)" class="st0 st2 st8">3</text>
</g>
<g>
<g>
<path class="st1" d="M1026.4,697c10.7-33.3,18.2-68.1,22-104.2c3.8-36.1,3.7-71.8,0.2-106.5L926.4,499l-0.1-0.5 c2.8,26.5,2.8,53.8-0.1,81.3s-8.6,54.2-16.8,79.6l0.2-0.5L1026.4,697z"/>
</g>
<text transform="matrix(-0.1045 0.9945 -0.9945 -0.1045 959.8926 558.2834)" class="st0 st2 st7">9</text>
</g>
<g>
<g>
<path class="st4" d="M1048.5,485.2c-3.7-34.7-11.1-69.6-22.3-104.2c-11.2-34.6-25.8-67.1-43.2-97.4l-106.4,61.4l-0.2-0.4 c13.3,23.1,24.4,48,33,74.3c8.6,26.4,14.2,53,17,79.5l-0.1-0.5L1048.5,485.2z"/>
</g>
<text transform="matrix(0.309 0.951 -0.9511 0.309 931.2808 385.5747)" class="st0 st2 st6">2</text>
</g>
<g>
<path class="st1" d="M982.5,282.8c-17.5-30.2-38.4-59.1-62.7-86.1s-50.8-50.8-79.1-71.4l-72.2,99.4l-0.4-0.3 c21.6,15.7,41.8,33.9,60.4,54.5s34.5,42.7,47.9,65.8l-0.2-0.4L982.5,282.8z"/>
<text transform="matrix(0.6691 0.7431 -0.7431 0.6691 834.8956 239.4054)" class="st0 st2 st5">8</text>
</g>
<g>
<g>
<path class="st4" d="M839.9,124.7c-28.3-20.5-59.2-38.4-92.3-53.1s-67.1-25.7-101.3-33.1l-25.5,120.2l-0.5-0.1 c26.1,5.6,52,13.9,77.3,25.2s48.9,24.9,70.5,40.6l-0.4-0.3L839.9,124.7z"/>
</g>
<text transform="matrix(0.9136 0.4067 -0.4067 0.9135 687.3855 145.1121)" class="st0 st2 st3">1</text>
</g>
<g>
<path class="st11" d="M645.3,38.3c-34.2-7.2-69.6-11-106-11c-36.3,0-71.8,3.8-106,11l25.5,120.2l-0.5,0.1 c26.1-5.5,53.2-8.4,80.9-8.4c27.7,0,54.8,2.9,80.9,8.4l-0.5-0.1L645.3,38.3z"/>
<text transform="matrix(1 0 0 1 514.27 118.9369)" class="st0 st2 st12">0</text>
</g>

If your code was working correctly on localhost and now it does not work on server, I would recommend you checking with your web host if they support SVG files and that the mime type is added.
additionally you could embed the entire svg code in your html thereby saving another call to your server and eliminating the doubt whether webserver supports svg or not.
Also you should save the file as compressed SVG instead of standard illustrator svg

Change an inline SVG's x and y with ecmascript

I am using an inline SVG in an SVG and have set some default x and y values. When I change them, the inline SVG moves accordingly. I am trying to change it with
var inlineSVG = document.getElementById("inlineSVG");
inlineSVG.style.x = "90";
and that adds style="x:90px;" but that doesn't actually affect the element.
It's weird (in my head) because this works with a rect but not with an svg.
Here is my actual code:
<?xml version='1.0' encoding='UTF-8'?>
<svg width='1000' height='360'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink="http://www.w3.org/1999/xlink"
onload='init(evt)'
>
<script type='text/ecmascript'>
function init(event){
var wing1 = document.getElementById("wing1");
wing1.style.x = "90";
}
</script>
<circle cx="200" cy="140" r="5" fill="red" />
<circle cx="220" cy="170" r="5" fill="red" />
<circle cx="180" cy="170" r="5" fill="red" />
<circle cx="220" cy="220" r="5" fill="red" />
<circle cx="180" cy="220" r="5" fill="red" />
<svg id="wing1" x="280" y="100" viewBox="0 0 350 300">
<g>
<g>
<g>
<ellipse fill="#E6E7E8" cx="229.505" cy="117.813" rx="5.862" ry="4.547"/>
</g>
<g>
<ellipse fill="#E6E7E8" cx="265.931" cy="117.819" rx="5.862" ry="4.547"/>
</g>
</g>
<g>
<g>
<ellipse fill="#E6E7E8" cx="229.191" cy="125.538" rx="5.862" ry="4.547"/>
</g>
<g>
<ellipse fill="#E6E7E8" cx="265.617" cy="125.531" rx="5.861" ry="4.547"/>
</g>
</g>
</g>
<ellipse fill="#E6E7E8" cx="247.244" cy="121.796" rx="20.635" ry="38.017"/>
</svg>
<rect id="square" x="0" y="470" width="50" height="50" fill="#BADA55" style="fill-opacity : 0.5" />
<line x1="0" y1="0" x2="1000" y2="360" style="stroke: yellowgreen;
stroke-width: 1;
stroke-dasharray: 10 1;"></line>
<line x1="0" y1="360" x2="1000" y2="0" style="stroke: yellowgreen;
stroke-width: 1;
stroke-dasharray: 10 1;"></line>

I tried adding !important to the value but it didn't work ( because I guess it doesn't count it as a valid number? ).
The solution is to directly change the x attribute like so:
selector.setAttribute("attr",val);

d3js / nvd3 - graph half hidden

I have a d3 / nvd3 graph which seems to be "clipped" by half...
Hereafter is the code (sorry, quite long, but a copy/paste in an html file works). Normally I have one bar by hour (so 24 bars) here I put only three hours.
The html is splitter in sections :
The legend [g class="nv-x nv-axis" transform="translate(0,235)"]
Y axis: [g class="nv-y nv-axis"]
One bar by hours: [g class="nv-barsWrap"]
We see only the top half of the Y axis and Bars, the bottom legend is lost. But it does exist on the html ! and we can "inspect" it... I don't get what is happening, but there is this "clip" rectangle I don't master... ( [clipPath id="nv-x-label-clip-6678"] )
<div id="chart">
<svg>
<g class="nvd3 nv-wrap nv-discreteBarWithAxes">
<g transform="translate(60,15)">
<defs>
<clipPath id="nv-x-label-clip-6678">
<rect width="20.912863070539423" height="16" x="-10.456431535269711">
</rect>
</clipPath>
</defs>
<g class="nv-x nv-axis" transform="translate(0,235)">
<g class="nvd3 nv-wrap nv-axis">
<g>
<g transform="translate(6.390041493775935,0)" style="opacity: 1;">
<line class="tick" y2="-235" x2="0">
</line>
<text y="3" dy=".71em" transform="translate(0,5)" x="0" style="text-anchor: middle;">00</text>
</g>
<g transform="translate(18.008298755186722,0)" style="opacity: 1;">
<line class="tick" y2="-235" x2="0">
</line>
<text y="3" dy=".71em" transform="translate(0,17)" x="0" style="text-anchor: middle;">01</text>
</g>
<g transform="translate(29.62655601659751,0)" style="opacity: 1;">
<line class="tick" y2="-235" x2="0">
</line>
<text y="3" dy=".71em" transform="translate(0,5)" x="0" style="text-anchor: middle;">02</text>
</g>
<path class="domain">
</path>
<text class="nv-axislabel" text-anchor="middle" y="36" x="140.00000000000003" transform="translate(0,17)">
</text>
</g>
</g>
</g>
<g class="nv-y nv-axis">
<g class="nvd3 nv-wrap nv-axis">
<g>
<g transform="translate(0,235)" style="opacity: 1;">
<line class="tick zero" x2="280" y2="0">
</line>
<text x="-3" dy=".32em" opacity="0" y="0" style="text-anchor: end;">0.0</text>
</g>
<g transform="translate(0,192.54290876242095)" style="opacity: 1;">
<line class="tick" x2="280" y2="0">
</line>
<text x="-3" dy=".32em" opacity="1" y="0" style="text-anchor: end;">200.0</text>
</g>
<g transform="translate(0,150.0858175248419)" style="opacity: 1;">
<line class="tick" x2="280" y2="0">
</line>
<text x="-3" dy=".32em" opacity="1" y="0" style="text-anchor: end;">400.0</text>
</g>
</g>
</g>
</g>
<g class="nv-barsWrap">
<g class="nvd3 nv-wrap nv-discretebar" transform="translate(0,0)">
<g>
<g class="nv-groups">
<g class="nv-group nv-series-0" style="stroke-opacity: 1; fill-opacity: 0.75;">
<g transform="translate(1.6846473217010498,0)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;">
<rect height="235" width="9.41078838174274" class="discreteBar">
</rect>
</g>
<g transform="translate(13.30290412902832,166.00723266601562)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;">
<rect height="68.99277326106593" width="9.41078838174274" class="discreteBar">
</rect>
</g>
<g transform="translate(24.921161651611328,175.98464965820312)" class="nv-bar positive" style="fill: #0088cc; stroke: #0088cc;">
<rect height="59.01535682023487" width="9.41078838174274" class="discreteBar">
</rect>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>

It is most likely because the container does not have enough room to contain the graph. Add height=100% and width=100% or some arbitrary large number of pixels to test it out (to the div containing the chart).