Develop Reference

how to increase loading percentage in SVG?

I am very new to SVG, I have a SVG already in my theme, it looks like something this.
The SVG Html looks like this
<div id="apexcharts1q6mbbep" class="apexcharts-canvas apexcharts1q6mbbep apexcharts-theme-light" style="width: 40px; height: 41px;"><svg id="SvgjsSvg1099" width="40" height="41" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)" style="background: transparent;">
<g id="SvgjsG1101" class="apexcharts-inner apexcharts-graphical" transform="translate(0, 0)">
<defs id="SvgjsDefs1100">
<clipPath id="gridRectMask1q6mbbep">
<rect id="SvgjsRect1103" width="46" height="42" x="-3" y="-1" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
</clipPath>
<clipPath id="forecastMask1q6mbbep"></clipPath>
<clipPath id="nonForecastMask1q6mbbep"></clipPath>
<clipPath id="gridRectMarkerMask1q6mbbep">
<rect id="SvgjsRect1104" width="44" height="44" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
</clipPath>
</defs>
<g id="SvgjsG1105" class="apexcharts-radialbar">
<g id="SvgjsG1106">
<g id="SvgjsG1107" class="apexcharts-tracks">
<g id="SvgjsG1108" class="apexcharts-radialbar-track apexcharts-track" rel="1">
<path id="apexcharts-radialbarTrack-0" d="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 19.99723301461454 4.1463417048796565" fill="none" fill-opacity="1" stroke="rgba(242,242,242,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2.3658536585365857" stroke-dasharray="0" class="apexcharts-radialbar-area" data:pathOrig="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 19.99723301461454 4.1463417048796565"></path>
</g>
</g>
<g id="SvgjsG1110">
<g id="SvgjsG1112" class="apexcharts-series apexcharts-radial-series" seriesName="series-1" rel="1" data:realIndex="0">
<path id="SvgjsPath1113" d="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 14.061114982430661 34.699256230936875" fill="none" fill-opacity="0.85" stroke="rgba(47,179,68,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="2.439024390243903" stroke-dasharray="0" class="apexcharts-radialbar-area apexcharts-radialbar-slice-0" data:angle="202" data:value="56" index="0" j="0" data:pathOrig="M 20 4.146341463414631 A 15.85365853658537 15.85365853658537 0 1 1 14.061114982430661 34.699256230936875"></path>
</g>
<circle id="SvgjsCircle1111" r="14.670731707317076" cx="20" cy="20" class="apexcharts-radialbar-hollow" fill="transparent"></circle>
</g>
</g>
</g>
<line id="SvgjsLine1114" x1="0" y1="0" x2="40" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" stroke-linecap="butt" class="apexcharts-ycrosshairs"></line>
<line id="SvgjsLine1115" x1="0" y1="0" x2="40" y2="0" stroke-dasharray="0" stroke-width="0" stroke-linecap="butt" class="apexcharts-ycrosshairs-hidden"></line>
</g>
<g id="SvgjsG1102" class="apexcharts-annotations"></g>
</svg>
<div class="apexcharts-legend"></div>
</div>
I played around <cicle> tag but I failed to increase the percentage. Currently you can see the loading icon is around 50% I want to make it dynamic.
Can anyone help me out?

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>

SVG button without CSS doesn't work properly

I'm making a svg button with animated gradient in mouseover event, without CSS.
The button listen to mouseout and mouseover events, without any problem, changing the radialGradient attribute between id="rellenoZoomHover" and id="rellenoZoom", depending on the listener answer.
The button has an tag in it radialGradient declaration tag, that repeats only one time.
The problem is that the script only execute the first time: second time, ignores animate.
Whath I am doing wrong?. Thanks in advance
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
onload='init(evt)'>
<script type='text/ecmascript'>
function init(evt) {
cmdButtonZoomPrevio = document.getElementById('cmdZoomPrevio');
cmdButtonZoomPrevio.addEventListener('mouseover', manejadorDeMouseHoverEnBotones);
cmdButtonZoomPrevio.addEventListener('mouseout', manejadorDeMouseOutEnBotones);
}
<![CDATA[
function manejadorDeMouseHoverEnBotones(evt) {
var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
pathVolatil.setAttribute('fill','url(#rellenoZoomHover)');
}
function manejadorDeMouseOutEnBotones(evt) {
var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
pathVolatil.setAttribute('fill','url(#rellenoZoom)');
}
//El botón cmdZoomPrevio;
var cmdButtonZoomPrevio;
]]>
</script>
<g id="cmdZoomPrevio" class="boton" toggleButton="false" triStateButton="false">
<path id="bordeZoomSE" fill="url(#rellenoZoom)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M64.925,85.116c3.529,0,7.005-0.938,10.042-2.69c9.609-5.554,12.924-17.858,7.354-27.479l34.848-20.112
c16.633,28.863,6.753,65.771-22.063,82.438c-9.188,5.294-19.581,8.093-30.167,8.093L64.925,85.116L64.925,85.116z"/>
<g id="dibujocmdZoomSE">
<rect x="105.766" y="97.561" transform="matrix(0.8707 -0.4918 0.4918 0.8707 -34.1811 65.8925)" fill="#333333" width="4.92" height="0.784"/>
<polygon fill="#663300" points="104.234,87.553 109.439,96.827 109.439,96.897 106.586,98.467 106.518,98.467 101.313,89.191
101.313,89.118 104.165,87.553 "/>
<rect x="101.312" y="86.085" transform="matrix(0.8715 -0.4904 0.4904 0.8715 -29.6865 61.2979)" width="1.641" height="2.429"/>
<polygon fill="#006633" points="98.104,99.394 88.091,93.723 88.091,93.651 98.068,87.73 98.139,87.765 98.139,99.358 "/>
<path fill="none" stroke="#006633" stroke-width="2.15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M98.104,93.543h0.854c3.382,0,6.298-0.593,8.771-1.783c2.373-1.182,3.586-2.61,3.643-4.281c-0.057-1.665-1.262-3.063-3.643-4.203
c-2.474-1.23-5.391-1.854-8.771-1.854c-3.467,0-6.413,0.616-8.835,1.854c-0.139,0.047-0.288,0.117-0.432,0.213"/>
<path fill="#CCFFFF" d="M97.752,86.978c-2.122-0.014-3.947-0.788-5.49-2.313c-1.463-1.474-2.184-3.263-2.174-5.354
c-0.01-2.103,0.714-3.925,2.174-5.457c1.531-1.458,3.348-2.183,5.454-2.179c2.113-0.006,3.911,0.717,5.38,2.179
c1.535,1.527,2.313,3.354,2.314,5.457c-0.006,2.105-0.779,3.892-2.314,5.354C101.635,86.195,99.85,86.966,97.752,86.978z"/>
<path fill="none" stroke="#0000FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M97.752,86.978c-2.096,0-3.9-0.761-5.42-2.288c-1.475-1.474-2.219-3.229-2.219-5.271c0-2.09,0.744-3.9,2.219-5.421
c1.52-1.479,3.324-2.226,5.42-2.226c2.089,0,3.873,0.738,5.344,2.226c1.522,1.475,2.285,3.271,2.285,5.421
c0,2.048-0.758,3.807-2.285,5.271C101.622,86.217,99.841,86.978,97.752,86.978z"/>
</g>
<defs>
<radialGradient id="rellenoZoomHover" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
<stop offset="0.5" style="stop-color:#FFFFFF">
<animate attributeName="stop-color" values="#FFFFFF;#81BEF7" dur="2s" repeatCount="1"/>
</stop>
<stop offset="1" style="stop-color:#81BEF7"/>
</radialGradient>
<radialGradient id="rellenoZoom" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
<stop offset="0.5" style="stop-color:#FFFFFF" />
<stop offset="1" style="stop-color:#A4A4A4"/>
</radialGradient>
</defs>
</g>
</svg>

The document has a timeline that begins at 0 and stays at 0 unless some animation runs. As an animation runs the timeline advances, in this case to 2 seconds as we have 2 seconds of animation.
The next time we hover the animation timeline is at 2 seconds, so the animation does not trigger again as the animation's start time has passed.
We could either
manually trigger the animation with javascript by calling beginElement(), this would affect just one animation
force the document timeline back to 0 this would affect all animations.
The code below demonstrates both (2. is commented out as we only need one technique)
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
onload='init(evt)'>
<script type='text/ecmascript'>
function init(evt) {
cmdButtonZoomPrevio = document.getElementById('cmdZoomPrevio');
cmdButtonZoomPrevio.addEventListener('mouseover', manejadorDeMouseHoverEnBotones);
cmdButtonZoomPrevio.addEventListener('mouseout', manejadorDeMouseOutEnBotones);
}
<![CDATA[
function manejadorDeMouseHoverEnBotones(evt) {
var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
pathVolatil.setAttribute('fill','url(#rellenoZoomHover)');
document.getElementById('rellenoZoomHoverAnimate').beginElement();
//document.getElementById('project').setCurrentTime(0);
}
function manejadorDeMouseOutEnBotones(evt) {
var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
pathVolatil.setAttribute('fill','url(#rellenoZoom)');
}
//El botón cmdZoomPrevio;
var cmdButtonZoomPrevio;
]]>
</script>
<g id="cmdZoomPrevio" class="boton" toggleButton="false" triStateButton="false">
<path id="bordeZoomSE" fill="url(#rellenoZoom)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M64.925,85.116c3.529,0,7.005-0.938,10.042-2.69c9.609-5.554,12.924-17.858,7.354-27.479l34.848-20.112
c16.633,28.863,6.753,65.771-22.063,82.438c-9.188,5.294-19.581,8.093-30.167,8.093L64.925,85.116L64.925,85.116z"/>
<g id="dibujocmdZoomSE">
<rect x="105.766" y="97.561" transform="matrix(0.8707 -0.4918 0.4918 0.8707 -34.1811 65.8925)" fill="#333333" width="4.92" height="0.784"/>
<polygon fill="#663300" points="104.234,87.553 109.439,96.827 109.439,96.897 106.586,98.467 106.518,98.467 101.313,89.191
101.313,89.118 104.165,87.553 "/>
<rect x="101.312" y="86.085" transform="matrix(0.8715 -0.4904 0.4904 0.8715 -29.6865 61.2979)" width="1.641" height="2.429"/>
<polygon fill="#006633" points="98.104,99.394 88.091,93.723 88.091,93.651 98.068,87.73 98.139,87.765 98.139,99.358 "/>
<path fill="none" stroke="#006633" stroke-width="2.15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M98.104,93.543h0.854c3.382,0,6.298-0.593,8.771-1.783c2.373-1.182,3.586-2.61,3.643-4.281c-0.057-1.665-1.262-3.063-3.643-4.203
c-2.474-1.23-5.391-1.854-8.771-1.854c-3.467,0-6.413,0.616-8.835,1.854c-0.139,0.047-0.288,0.117-0.432,0.213"/>
<path fill="#CCFFFF" d="M97.752,86.978c-2.122-0.014-3.947-0.788-5.49-2.313c-1.463-1.474-2.184-3.263-2.174-5.354
c-0.01-2.103,0.714-3.925,2.174-5.457c1.531-1.458,3.348-2.183,5.454-2.179c2.113-0.006,3.911,0.717,5.38,2.179
c1.535,1.527,2.313,3.354,2.314,5.457c-0.006,2.105-0.779,3.892-2.314,5.354C101.635,86.195,99.85,86.966,97.752,86.978z"/>
<path fill="none" stroke="#0000FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M97.752,86.978c-2.096,0-3.9-0.761-5.42-2.288c-1.475-1.474-2.219-3.229-2.219-5.271c0-2.09,0.744-3.9,2.219-5.421
c1.52-1.479,3.324-2.226,5.42-2.226c2.089,0,3.873,0.738,5.344,2.226c1.522,1.475,2.285,3.271,2.285,5.421
c0,2.048-0.758,3.807-2.285,5.271C101.622,86.217,99.841,86.978,97.752,86.978z"/>
</g>
<defs>
<radialGradient id="rellenoZoomHover" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
<stop offset="0.5" style="stop-color:#FFFFFF">
<animate id="rellenoZoomHoverAnimate" attributeName="stop-color" values="#FFFFFF;#81BEF7" dur="2s" repeatCount="1"/>
</stop>
<stop offset="1" style="stop-color:#81BEF7"/>
</radialGradient>
<radialGradient id="rellenoZoom" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
<stop offset="0.5" style="stop-color:#FFFFFF" />
<stop offset="1" style="stop-color:#A4A4A4"/>
</radialGradient>
</defs>
</g>
</svg>

SVG Element, HTML and JavaScript

I'm Creating a SVG elements but I want to make it clickable and change the color of it on click
Here's the code of the elements
<svg version="1.1" x="0px" y="0px" width="960px"
height="560px" viewBox="0 0 960 560" style="disable-background:new 0 0 960 560;" xml:space="preserve">
<g id="Layer_1">
<rect x="95.675" y="35.61" class="st0" width="774.026" height="494.805"/>
</g>
<g id="Layer_2">
<circle class="st1" cx="254.766" cy="144.67" r="68.182"/>
<circle class="st1" cx="474.571" cy="144.67" r="68.182"/>
<circle class="st1" cx="685.766" cy="144.67" r="68.182"/>
<ellipse class="st1" cx="474.571" cy="318.727" rx="167.695" ry="76.623"/>
<circle class="st1" cx="324.748" cy="463.532" r="47.403"/>
<circle class="st1" cx="477.565" cy="463.532" r="47.403"/>
<circle class="st1" cx="624.395" cy="463.532" r="47.403"/>
</g>
</svg>

As an example: changing an element's color on click:
$('#Layer_1').click( function() {
$('#Layer_1').css({ fill: "blue" });
});
You can build you idea from this.
Here is a working example: https://jsfiddle.net/ddan/bcLzp929/1/

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);