I'm working with an ecommerce platform and cannot install d3 or other svg libraries. For security reasons, the site won't let me manipulate iframes that have "external sources"—apparently, all iframes are external, but whatever.
So what I have resorted to is trying to inject an svg into a div tag. not sure why my code won't work. Do I need to append an svg or something fancy? It's supposed to change the circle to red when pressed.
<html>
<head>
</head>
<body>
<div id=inlinetest>
<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100mm"
height="100mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="drawing-2.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.7"
inkscape:cx="110.88456"
inkscape:cy="710.05401"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="250"
inkscape:window-height="250"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
id="path3336"
cx="131.42857"
cy="129.50507"
r="131.42857" />
</g>
</svg>
</div>
<div>
<button onclick="myFunction()">Click me</button>
</div>
</body>
<script>
function myFunction() {
document.getElementById('inlinetest').innerHTML = "<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100mm"
height="100mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="drawing-2.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.7"
inkscape:cx="110.88456"
inkscape:cy="710.05401"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="250"
inkscape:window-height="250"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="fill:none;stroke:#FF0000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
id="path3336"
cx="131.42857"
cy="129.50507"
r="131.42857" />
</g>
</svg>";
}
</script>
</html>Couple problems here. First of all, I'll mention that how you're doing this is highly inadvisable. Replacing the entire SVG element with a string using innerHTML rather than just modifying a single property in the SVG, using onclick property, breaking out a string into all those lines. A lot can go wrong.
First, to get your code at least functioning, you need to escape all the newline characters in your string assignment. That can be done by just adding \ to the end of every line that breaks the string. Unfortunately, you also use double quote to enclose the string, while having double quotes in your string. You'll need to escape those too.
Lastly, your onclick property won't work because at that point in the document, myFunction doesn't exist. I've added it as an event listener using addEventListener instead.
While this "works", I would encourage you to instead update the individual elements in the SVG or add a class and use CSS to do it, but certainly don't replace the whole thing every time using a huge string to do so.
<html>
<head>
</head>
<body>
<div id=inlinetest>
<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100mm"
height="100mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="drawing-2.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.7"
inkscape:cx="110.88456"
inkscape:cy="710.05401"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="250"
inkscape:window-height="250"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
id="path3336"
cx="131.42857"
cy="129.50507"
r="131.42857" />
</g>
</svg>
</div>
<div>
<button id="myButton">Click me</button>
</div>
</body>
<script>
document.getElementById('myButton').addEventListener('click', function() {
document.getElementById('inlinetest').innerHTML = "<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\"\
xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"\
xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\
width=\"100mm\"\
height=\"100mm\"\
viewBox=\"0 0 744.09448819 1052.3622047\"\
id=\"svg2\"\
version=\"1.1\"\
inkscape:version=\"0.91 r13725\"\
sodipodi:docname=\"drawing-2.svg\">\
<defs\
id=\"defs4\" />\
<sodipodi:namedview\
id=\"base\"\
pagecolor=\"#ffffff\"\
bordercolor=\"#666666\"\
borderopacity=\"1.0\"\
inkscape:pageopacity=\"0.0\"\
inkscape:pageshadow=\"2\"\
inkscape:zoom=\"0.7\"\
inkscape:cx=\"110.88456\"\
inkscape:cy=\"710.05401\"\
inkscape:document-units=\"px\"\
inkscape:current-layer=\"layer1\"\
showgrid=\"false\"\
inkscape:window-width=\"250\"\
inkscape:window-height=\"250\"\
inkscape:window-x=\"-8\"\
inkscape:window-y=\"-8\"\
inkscape:window-maximized=\"1\" />\
<metadata\
id=\"metadata7\">\
<rdf:RDF>\
<cc:Work\
rdf:about=\"\">\
<dc:format>image/svg+xml</dc:format>\
<dc:type\
rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />\
<dc:title></dc:title>\
</cc:Work>\
</rdf:RDF>\
</metadata>\
<g\
inkscape:label=\"Layer 1\"\
inkscape:groupmode=\"layer\"\
id=\"layer1\">\
<circle\
style=\"fill:none;stroke:#FF0000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none\"\
id=\"path3336\"\
cx=\"131.42857\"\
cy=\"129.50507\"\
r=\"131.42857\" />\
</g>\
</svg>";
});
</script>
</html>