Alright guys! I am currently trying to change the fill color of multiple classes with in a few svgs. I am not getting the results desired. I will show my code below.
Here is the Javascript
<script>
function secondary(color)
{
document.getElementsByClassName("secon").style.fill = color;
}
</script>
Here is what one of the buttons looks like :D
<label>
<input type="radio" id="42" name="45" mandatory="1"
onClick="secondary('#0066ff'); myFunction('A Vibrant Blue');" />
<img src="/pictures/Color Tiles/CunningBlue.png" alt="Cunning Blue"
border="0" /><span class="textcolor">Cunning Blue</span></div>
</label>
And finally here is the SVG GOODIES <3
<svg id="04246c25-b9d2-4d07-aadf-1f6435a119c7" data-name="Layer 2"
xmlns="http://www.w3.org/2000/svg" width="191.05" height="300.77" viewBox="0
0 191.05 300.77">
<title>Marble</title>
<g>
<path d="M141.41,70.09c14.72-8.66,53.25-24.24,53.25-24.24l13,4.33s-
28.57,11.69-40.26,24.24-4.76,14.72-22.08,22.51-45.45,2.6-51.52,0,11.69-
16.45,16.88-16.45S141.41,70.09,141.41,70.09Z" transform="translate(-82.04
-4.05)" style="fill: #fff"; class="secon" />
<path d="M222.36,94.33s-9.09,2.16-14.72,0-2.6-11.69-7.79-
9.52S193.79,102.55,189,106s-11.26,7.79-15.58,9.52-7.79,23.38,0,13.85,7.36-
11.26,15.15-16,10.82-13.41,19-12.33,22.08,2.38,25.54-
2.38S222.36,94.33,222.36,94.33Z" transform="translate(-82.04 -4.05)"
style="fill: #fff"; class="secon" />
<path d="M132.32,12.08s-3,13.42,4.33,19.48,25.16,7.79,13.45,12.12-13,16.88-
29.9,13.42S115,32.42,116.73,25.5,132.32,12.08,132.32,12.08Z"
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M168.22,20.11c-8.35-.43-13.84,1.06-18.72-1.3-2.11-1-5.65-9.52-8.68-
12.12s11.69-4.33,20.35,0S168.22,20.11,168.22,20.11Z"
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M134.48,137.62c5.63,5.19,21.21,17.32,29.44,16s20.31,1.3,17.08,7.79-
19.21,11.69-27,9.52-10.31-13.42-21.4-13.42S134.48,137.62,134.48,137.62Z"
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M231.88,141.08a154.39,154.39,0,0,1-20.35,7.79c-8.23,2.6-14.29,2.16-
12.55,7.79s11.26,11.69,20.35,7.36,20.35-8.66,29-
15.15S231.88,141.08,231.88,141.08Z" transform="translate(-82.04 -4.05)"
style="fill: #fff"; class="secon" />
<path d="M215.43,232.86c-8.23,1.73-8.66,9.09-27.27,6.06s-23.56-11.69-19.35-
13.85,11.13-1.3,18.92-7.36,6.33-13.85,11-
13.85,10.69,7.79,21.08,10.82S215.43,232.86,215.43,232.86Z"
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M128.1,187.84s16.82,9.09,22,7.36,19-11.26,22.92-
10,5.19,4.33,0,10.18-12.28,15.8-18,15.8-18.22-2.6-22.38-
4.33S128.1,187.84,128.1,187.84Z" transform="translate(-82.04 -4.05)"
style="fill: #fff"; class="secon" />
<path d="M106.77,245.84c5.63,1.73,22.08,10,30.3,8.23s30.3-
1.3,34.2,3.46,10.39,6.49,16.88,6.06,26.84,0,16.88,4.33-14.79,6.49-
28.61,7.79-20.31,3.9-31.56-2.6-16-7.79-22.94-8.66-1.3,6.93-
15.15-.43A117.46,117.46,0,0,1,82.1,245.84h24.68Z"
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M255.26,257.1s-16-3.46-25.11-5.63-17.75-3.9-22.51-
2.16,4.33,4.76,13,6.06,27.71,9.09,36.36,8.23S255.26,257.1,255.26,257.1Z"
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" />
<path d="M266.52,286.54a32.73,32.73,0,0,0-19-3.9c-10.82.87-23.81,3-
30.74,6.49s-18.18,6.93-26.41,6.93-21.16.87-
21.4,2.6,0.55,6.93,7.51,6.06S202,302.55,206.33,303s17.76,0.87,24.69,0,13.59-
6.93,19.13-7.79,12.47,4.33,20.26.43S266.52,286.54,266.52,286.54Z"
transform="translate(-82.04 -4.05)" style="fill: #fff"; class="secon" >
<path d="M82.1,286.54s12.12,1.3,18.18,0,18.61-4.33,22.94-
2.16,6.16,5.19,9.36,6.06,14.94,3.9,8.42,5.19-13.45,6.06-19.94,5.19-21.21-
3.46-30.74-3.9S82.1,286.54,82.1,286.54Z" transform="translate(-82.04 -4.05)"
style="fill: #fff"; class="secon" />
</g>
</svg>
</div>
Any help on this topic will be greatly appreciated.
getElementsByClassName returns an array of elements which contain that class.
Therefore you must iterate over that array, setting the style on each element.
function secondary(color) {
var elements = document.getElementsByClassName("secon");
for (var i = 0; i < elements.length; i++)
elements[i].style.fill = color;
}
I tested it out quickly here, and this solved the problem.
Related
Can someone mastered in SVG help me with creating that simple progress bar where the blue color is moving according to a percentage? I tried but with no luck or can be simpler.
Just for the POC purpose, I have added SVG code directly into the HTML. You can create a path group of vertical bars and put the filling object right behind that group. I have added simple animation to show the working animation. Please let me know if I have missed anything.
function loadAnim() {
window.onload = function () {
let xval = 100;
setInterval(() => {
if (xval <= 0) {
return 0;
} else {
document.getElementById('progress').setAttribute('x', '0');
}
}, 1000);
};
}
loadAnim();
rect#progress {
transition: all 0.9s linear;
}
<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 79 20"
style="enable-background: new 0 0 79 20"
xml:space="preserve"
>
<rect x="0" y="0" style="fill: #adadad" width="79" height="20" />
<rect
id="progress"
x="-79"
y="0"
style="fill: #0077d8"
width="79"
height="20"
/>
<g>
<path
style="fill: #ffffff"
d="M15,18.5v-17C15,0.7,15.7,0,16.5,0h-4C13.3,0,14,0.7,14,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C15.7,20,15,19.3,15,18.5z"
/>
<path
style="fill: #ffffff"
d="M20,18.5v-17C20,0.7,20.7,0,21.5,0h-4C18.3,0,19,0.7,19,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C20.7,20,20,19.3,20,18.5z"
/>
<path
style="fill: #ffffff"
d="M35,18.5v-17C35,0.7,35.7,0,36.5,0h-4C33.3,0,34,0.7,34,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C35.7,20,35,19.3,35,18.5z"
/>
<path
style="fill: #ffffff"
d="M25,18.5v-17C25,0.7,25.7,0,26.5,0h-4C23.3,0,24,0.7,24,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C25.7,20,25,19.3,25,18.5z"
/>
<path
style="fill: #ffffff"
d="M30,18.5v-17C30,0.7,30.7,0,31.5,0h-4C28.3,0,29,0.7,29,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C30.7,20,30,19.3,30,18.5z"
/>
<path style="fill: #ffffff" d="M0,18.5V20h1.5C0.7,20,0,19.3,0,18.5z" />
<path
style="fill: #ffffff"
d="M10,18.5v-17C10,0.7,10.7,0,11.5,0h-4C8.3,0,9,0.7,9,1.5v17C9,19.3,8.3,20,7.5,20h4
C10.7,20,10,19.3,10,18.5z"
/>
<path style="fill: #ffffff" d="M1.5,0H0v1.5C0,0.7,0.7,0,1.5,0z" />
<path
style="fill: #ffffff"
d="M5,18.5v-17C5,0.7,5.7,0,6.5,0h-4C3.3,0,4,0.7,4,1.5v17C4,19.3,3.3,20,2.5,20h4
C5.7,20,5,19.3,5,18.5z"
/>
<path
style="fill: #ffffff"
d="M65,18.5v-17C65,0.7,65.7,0,66.5,0h-4C63.3,0,64,0.7,64,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C65.7,20,65,19.3,65,18.5z"
/>
<path
style="fill: #ffffff"
d="M77.5,20H79v-1.5C79,19.3,78.3,20,77.5,20z"
/>
<path
style="fill: #ffffff"
d="M75,18.5v-17C75,0.7,75.7,0,76.5,0h-4C73.3,0,74,0.7,74,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C75.7,20,75,19.3,75,18.5z"
/>
<path
style="fill: #ffffff"
d="M70,18.5v-17C70,0.7,70.7,0,71.5,0h-4C68.3,0,69,0.7,69,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C70.7,20,70,19.3,70,18.5z"
/>
<path style="fill: #ffffff" d="M77.5,0C78.3,0,79,0.7,79,1.5V0H77.5z" />
<path
style="fill: #ffffff"
d="M50,18.5v-17C50,0.7,50.7,0,51.5,0h-4C48.3,0,49,0.7,49,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C50.7,20,50,19.3,50,18.5z"
/>
<path
style="fill: #ffffff"
d="M60,18.5v-17C60,0.7,60.7,0,61.5,0h-4C58.3,0,59,0.7,59,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C60.7,20,60,19.3,60,18.5z"
/>
<path
style="fill: #ffffff"
d="M45,18.5v-17C45,0.7,45.7,0,46.5,0h-4C43.3,0,44,0.7,44,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C45.7,20,45,19.3,45,18.5z"
/>
<path
style="fill: #ffffff"
d="M40,18.5v-17C40,0.7,40.7,0,41.5,0h-4C38.3,0,39,0.7,39,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C40.7,20,40,19.3,40,18.5z"
/>
<path
style="fill: #ffffff"
d="M55,18.5v-17C55,0.7,55.7,0,56.5,0h-4C53.3,0,54,0.7,54,1.5v17c0,0.8-0.7,1.5-1.5,1.5h4
C55.7,20,55,19.3,55,18.5z"
/>
</g>
</svg>
How can I dynamically insert an SVG into HTML?
The problem right now is that the SVG is a document, and I can only find how to insert nodes. I have tried some different things to convert the SVG to a node, but have not found anything that works.
const svgDoc = new DOMParser().parseFromString(svgText, "text/html");
window.document.querySelector("#container").appendChild(svgDoc);
const svgText = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
<title>My First Scalable Vector Graphic</title>
<desc>An experimental SVG from SitePoint.com</desc>
<g id="main">
<line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />
<polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />
<rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />
<circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />
<ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />
<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
</g>
</svg>
`;
<div id="container"></div>
Use document.documentElement to get the root element of a document.
const svgText = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
<title>My First Scalable Vector Graphic</title>
<desc>An experimental SVG from SitePoint.com</desc>
<g id="main">
<line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />
<polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />
<rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />
<circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />
<ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />
<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
</g>
</svg>
`;
const svgDoc = new DOMParser().parseFromString(svgText, "image/svg+xml");
window.document.querySelector("#container").appendChild(svgDoc.documentElement);
<div id="container"></div>
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>
I am using animateMotion to have an animation on my path. Here is the simple code:
<!DOCTYPE html>
<html>
<head>
<title>Example Of Many Things!</title>
</head>
<body>
<svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
<g id="3" class="cluster loop-node">
</g>
<g id="4" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
<text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
<text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
<g id="4t5" class="edge">
<path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
<polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>
<g id="6" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
<text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
</g>
<g id="5t6" class="edge">
<path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
<polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
</g>
</g>
</svg>
</body>
<script type="text/javascript">
var g8t3 = document.getElementById('4t5');
var path = document.getElementById('4t5').getElementsByTagName('path')[0]
path.setAttribute("id", "path4t5");
var circleAnim = ' <circle r="1" fill="green"><animateMotion id="myMoveAnimation4t5" dur="3s" begin="0s;myMoveAnimation5t6.end"><mpath xlink:href="#path4t5"></mpath></animateMotion></circle>'
g8t3.insertAdjacentHTML( 'beforeend', circleAnim );
// // now move circle on the path
var g8t4 = document.getElementById('5t6');
var path = document.getElementById('5t6').getElementsByTagName('path')[0]
path.setAttribute("id", "path5t6");
var circleAnim = ' <circle r="1" fill="green"><animateMotion id="myMoveAnimation5t6" dur="3s" begin="myMoveAnimation4t5.end"><mpath xlink:href="#path5t6"></mpath></animateMotion></circle>'
g8t4.insertAdjacentHTML( 'beforeend', circleAnim );
</script></html>
As you can see, there is a green circle on the path which is moving, which is correct.
But there is something weird: There is also another green circle on the left bottom of the graph, which is redundant. I don't how it appears and how I can get rid of it.
Any help?
Instead of appending two circles in your svg, append the two <animateMotion>s inside a single circle. Also, you'll probably want to set your <animationMotion>'s fill attribute to "fill".
As you wrote it, when your circles are in idle state, they will come back to their initial position (unset).
var g8t3 = document.getElementById('4t5');
var path = document.getElementById('4t5').getElementsByTagName('path')[0]
path.setAttribute("id", "path4t5");
var circleAnim = '<circle r="1" fill="green">' +
// first part of the anim
'<animateMotion id="myMoveAnimation4t5" dur="3s" begin="0s;myMoveAnimation5t6.end"><mpath xlink:href="#path4t5" fill="freeze"></mpath></animateMotion>' +
// second part of the anim
'<animateMotion id="myMoveAnimation5t6" dur="3s" begin="myMoveAnimation4t5.end" fill="freeze"><mpath xlink:href="#path5t6"></mpath></animateMotion>' +
'</circle>'
g8t3.insertAdjacentHTML('beforeend', circleAnim);
<svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
<g id="3" class="cluster loop-node">
</g>
<g id="4" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
<text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
<text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
<g id="4t5" class="edge">
<path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
<polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>
<g id="6" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
<text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
</g>
<g id="5t6" class="edge">
<path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
<polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
</g>
</g>
</g>
</svg>
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);