Skip to content

Instantly share code, notes, and snippets.

@CatherineH

CatherineH/layering svgs with javascript.html

Last active June 21, 2023 13:22
Show Gist options
  • Save CatherineH/5d923ec585acdb89ab2df34c095a681c to your computer and use it in GitHub Desktop.
Save CatherineH/5d923ec585acdb89ab2df34c095a681c to your computer and use it in GitHub Desktop.
Download ZIP
two ways to layer SVGs with javascript
Raw
layering svgs with javascript.html
<html>
<body>
<p>Quick SVG</p>
<svg id="quickSVG"></svg>
<p>DOM SVG</p>
<svg id="appendSVG"></svg>
<script>
var circle ="<svg>\n" +
" <ellipse\n" +
" style=\"opacity:1;fill:#337ab7;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:20, 20;stroke-dashoffset:0;stroke-opacity:1\"\n" +
" id=\"path3336\"\n" +
" cx=\"62.857143\"\n" +
" cy=\"67.85714\"\n" +
" rx=\"62.857143\"\n" +
" ry=\"67.14286\" />\n" +
"</svg>";
var star = "<svg>\n" +
" <path\n" +
" style=\"opacity:1;fill:#ffff00;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:20, 20;stroke-dashoffset:0;stroke-opacity:1\"\n" +
" id=\"path4138\"\n" +
" d=\"m 180,1049.505 c -21.93314,16.1273 -43.86101,-37.0107 -71.08468,-36.8554 -27.223668,0.1553 -48.543907,53.54 -70.659598,37.664 -22.11569,-15.8761 21.645478,-53.15125 13.085211,-78.99451 -8.560267,-25.84326 -65.920458,-29.62323 -57.655572,-55.56247 8.2648856,-25.93924 57.238644,4.16144 79.171778,-11.96586 21.933136,-16.12731 7.802827,-71.84817 35.026501,-72.00346 27.22367,-0.15529 13.72995,55.72314 35.84564,71.59918 22.11569,15.87604 70.74287,-14.78137 79.30313,11.06189 8.56027,25.84326 -48.75306,30.27735 -57.01795,56.21659 -8.26489,25.93924 35.91867,62.71274 13.98554,78.84004 z\"\n" +
" transform=\"matrix(0.54241747,0,0,0.49688174,3.8655522,-389.06137)\" />\n" +
"</svg>\n";
function getSVGContents(inputString){
let domParser = new DOMParser();
let svgDOM = domParser.parseFromString(inputString, 'text/xml')
.getElementsByTagName('svg')[0];
return svgDOM.innerHTML
}
function addSVGs(inputStrings){
// takes a list of strings of SVGs to merge together into one large element
let svgMain = document.createElement("svg");
for(let stringI=0;stringI<inputStrings.length;stringI++){
let domParser = new DOMParser();
let svgDOM = domParser.parseFromString(inputStrings[stringI], 'text/xml')
.getElementsByTagName('svg')[0];
while(svgDOM.childNodes.length>0){
svgMain.appendChild(svgDOM.childNodes[0]);
}
}
return svgMain
}
var svgMain = addSVGs([circle, star]);
document.getElementById("quickSVG").innerHTML =
getSVGContents(star)+getSVGContents(circle);
document.getElementById("appendSVG").innerHTML = svgMain.innerHTML;
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment