I'm trying to load an SVG from a separate file, then use getElementsByClassName to go through and set an onClick event listener to each path in the SVG. Trouble is, any kind of getElement doesn't seem to look at the stuff added in the embed tag. I'm trying to avoid hardcoding in the SVG, because that will work but it leads to huge files and I want to be able to load different svg's but use the same web page.
Here's the code I'm using to try and set up the SVG onclick listeners:
<embed id="svgImage" src="van-gogh-sunflowers-basic.svg" type="image/svg+xml" height="400" width="450" />
<script>
var svgPaths = document.getElementsByClassName("colorable");
console.log(svgPaths.length);
for(var i = svgPaths.length-1; i >= 0; i--){
svgPaths.item(i).addEventListener("click", function() {
changeFillColor(svgPaths.item(i));
});
}
</script>
The changeFillColor function:
function changeFillColor(shape){
shape.style.fill=selectedColor;
}
And here's a part of the SVG to show how that's set up. I only included the first three paths, because the entire thing is pretty long. It was made using Inkscape.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg8"
version="1.1"
viewBox="0 0 329.22162 412.91873"
height="412.91873mm"
width="329.22162mm">
<defs
id="defs2" />
<g
style="display:inline"
transform="translate(-62.134083,6.7997357)"
id="layer1">
<path class="colorable"
id="path895"
d="m 277.74346,331.80277 c 0,0 7.13069,-32.23073 5.1341,-35.51085 -1.9966,-3.28013 -103.82296,-27.09667 -103.82296,-27.09667 l -6.27502,10.83866 c 0,0 -0.71306,11.2665 -6.56024,20.67904 -5.84716,9.41251 -1.33279,11.93863 -1.33279,11.93863 l 19.30215,32.4143 52.76717,3.70798 c 0,0 34.65519,-11.12392 35.22565,-11.55176 0.57045,-0.42782 5.56194,-5.41933 5.56194,-5.41933 z"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.28236124px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="colorable"
id="path891"
d="m 253.0236,380.72082 c 0,0 -3.02531,10.48768 -29.74879,7.76494 C 196.55134,385.76298 189.694,373.15758 189.694,373.15758 l -0.80675,-7.86579 c 0,0 -27.026,-40.63986 -24.0007,-52.64021 0,0 27.14593,37.97626 63.22726,32.27169 36.08133,-5.70455 49.62965,-13.12048 49.62965,-13.12048 0,0 -3.99319,19.11027 -14.11877,32.6586 -10.1256,13.54832 -7.36864,8.55973 -10.60109,16.25943 z"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.28236124px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path class="colorable"
id="path903"
d="m 280.0253,316.97094 c 0,0 3.49403,0.99829 -0.57048,4.42102"
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.28236124px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
transform="translate(-62.400064,-52.90387)"
id="layer2" />
</svg>
I expected that it should grab the elements without any problem, but it doesn't grab anything. The length of svgPaths is always 0, and I haven't been able to find any other function that would get me the paths from the file. If I make something else in the html page have a class="colorable", then it will grab that element, but it skips right over the tag.
