How to do morphing in SVG - javascript
I am working with svg animation right now. I want to setup morph animation on this svg. For example the vibe icon will be morph with Wibe on hover of the image. I try few examples from the stackoverflow. But that is not working. Right now the current animation on this image is rotating E of wibe and floating vibe icon.
Please help me regarding this issue. How can I use morph animation in this.
Thanks
<?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"
viewBox="0 0 1491.3333 803.33069"
height="500"
width="700"
xml:space="preserve"
id="svg2"
version="1.1" style="
background-color: #000;
"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
id="clipPath18"
clipPathUnits="userSpaceOnUse"><path
id="path16"
d="M 0,602.498 H 1118.496 V 0 H 0 Z" /></clipPath></defs><g
transform="matrix(1.3333333,0,0,-1.3333333,0,803.33067)"
id="g10"><g
id="g12"><g
clip-path="url(#clipPath18)"
id="g14"><g
transform="translate(665.3598,379.7295)"
id="g20"><path
id="path22"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m 0,0 h 26.962 c 13.938,0 23.293,3.023 28.064,9.077 4.763,6.046 7.149,12.378 7.149,18.979 0,6.235 -2.475,12.003 -7.427,17.33 C 49.789,50.705 40.72,53.36 27.517,53.36 23.481,53.36 18.8,53.262 13.481,53.083 8.17,52.902 3.676,52.625 0,52.265 Z m 0,-57.764 v -56.668 c 1.111,0 4.044,-0.18 8.807,-0.548 4.772,-0.367 11.193,-0.547 19.257,-0.547 15.409,0 26.407,2.566 33.001,7.696 6.609,5.139 9.91,12.296 9.91,21.456 0,3.675 -0.638,7.246 -1.921,10.727 -1.29,3.481 -3.578,6.512 -6.879,9.085 -3.301,2.565 -7.891,4.673 -13.758,6.316 -5.859,1.658 -13.563,2.483 -23.098,2.483 z m -91.859,165.587 c 7.337,1.095 15.769,2.108 25.303,3.023 9.535,0.923 19.25,1.74 29.152,2.483 9.911,0.728 19.535,1.276 28.882,1.643 9.355,0.368 17.509,0.548 24.486,0.548 45.843,0 80.134,-6.504 102.872,-19.527 22.738,-13.016 34.103,-33.278 34.103,-60.787 0,-13.931 -3.203,-25.761 -9.625,-35.483 -6.414,-9.715 -15.131,-18.057 -26.129,-25.034 15.402,-5.506 28.057,-13.383 37.959,-23.645 9.91,-10.278 14.854,-24.756 14.854,-43.473 0,-33.728 -12.468,-57.104 -37.411,-70.134 -24.937,-13.016 -61.793,-19.528 -110.569,-19.528 -12.836,0 -29.617,0.458 -50.337,1.373 -20.727,0.923 -41.898,2.851 -63.54,5.784 z m -25.049,-282.757 c -9.535,-1.47 -18.154,-2.573 -25.859,-3.3 -7.697,-0.743 -14.666,-1.111 -20.9,-1.111 -6.233,0 -13.21,0.368 -20.907,1.111 -7.704,0.727 -16.129,1.83 -25.296,3.3 v 283.852 c 8.057,1.838 16.031,3.121 23.923,3.848 7.892,0.743 15.491,1.111 22.828,1.111 6.969,0 14.494,-0.368 22.55,-1.111 8.072,-0.727 15.957,-2.01 23.661,-3.848 z m -237.89,119.924 34.102,163.928 c 2.941,0.735 8.62,1.463 17.06,2.206 8.439,0.727 17.426,1.095 26.961,1.095 12.1,0 22.828,-0.368 32.182,-1.095 9.348,-0.743 16.039,-1.471 20.076,-2.206 l -89.129,-283.304 c -6.234,-1.838 -13.016,-3.031 -20.345,-3.578 -7.344,-0.548 -14.674,-0.818 -22.003,-0.818 -7.344,0 -14.771,0.27 -22.287,0.818 -7.51,0.547 -15.304,1.74 -23.376,3.578 l -40.157,154.034 c -6.969,-24.576 -14.028,-50.427 -21.184,-77.569 -7.15,-27.141 -14.029,-52.625 -20.631,-76.465 -7.697,-1.838 -15.311,-3.031 -22.827,-3.578 -7.518,-0.548 -14.944,-0.818 -22.273,-0.818 -7.344,0 -14.674,0.27 -22.011,0.818 -7.336,0.547 -14.118,1.74 -20.352,3.578 l -86.368,283.304 c 4.029,0.735 11.095,1.463 21.178,2.206 10.083,0.727 21.177,1.095 33.278,1.095 9.535,0 18.799,-0.368 27.786,-1.095 8.987,-0.743 14.936,-1.471 17.877,-2.206 l 35.761,-168.332 39.609,168.332 c 6.234,1.838 13.113,3.031 20.63,3.586 7.509,0.54 14.936,0.825 22.273,0.825 7.336,0 14.763,-0.285 22.287,-0.825 7.517,-0.555 15.124,-1.748 22.821,-3.586 z" /></g><g
transform="translate(220.8446,208.5321)"
id="g24"><path
id="path26"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C 62.399,-4.247 111.294,-96.425 205.706,-86.576 172.84,-130.659 92.497,-208.532 24.911,-208.532 -117.925,-208.532 -130.651,8.887 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(580.4182,121.9514)"
id="g28"><path
id="path30"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C -85.441,36.938 -117.17,22.297 -153.931,0 -105.978,83.683 -54.72,98.899 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(653.5858,147.7134)"
id="g32"><path
id="path34"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="M 0,0 C -13.413,-15.054 -31.372,-29.682 -73.072,-25.757 -16.196,-124.558 53.294,-118.125 91.542,-83.726 164.849,-17.787 68.09,76.417 0,0" /> <animateMotion
path="M10,50 q60,50 100,0 q60,-50 100,0"
begin="g10.mouseover" dur="10s" repeatCount="indefinite" end="g10.mouseout"
/></g><g
transform="translate(925.3088,392.7031)"
id="g36"><path
id="path38"
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
d="m 0,0 c 0,0 0,41.564 40.817,43.368 40.271,1.78 44.37,-43.33 44.37,-43.33 z M 81.95,103.607 C -68.673,133.163 -111.656,-7.91 -72.935,-117.879 c 0,0 48.014,-94.48 168.825,-63.503 l -1.549,75.894 c 0,0 -80.541,-21.684 -86.736,37.172 l 159.346,2.403 c 0,0 34.441,146.082 -85.001,169.52" /><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" begin="g10.mouseover" repeatCount="1" end="g10.mouseout" /></g></g></g></g>
</svg>
Related
Simplify SVG (Vector Graphics) Path
Input is below: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600"> <g enable-background="new"> <path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 " transform="matrix(1,0,0,-1,0,600)"/> <path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 111.050781 268.679688 L 111.050781 265.421875 " transform="matrix(1,0,0,-1,0,600)"/> <path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 268.679688 L 110.949219 265.421875 " transform="matrix(1,0,0,-1,0,600)"/> </g> </svg> Expected Output is below: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800pt" height="600pt" viewBox="0 0 800 600"> <g enable-background="new"> <path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 265.42 L 109.73 265.69 L 108.7 266.41 L 108.01 267.46 L 107.78 268.68 "/> <path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 111.05 268.68 L 111.05 265.42 "/> <path transform="matrix(1,0,0,-1,0,600)" stroke-width="0.074" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#929292" d="M 110.95 268.68 L 110.95 265.42 "/> </g> </svg> This is about simplifying and beautifying SVG path. I would like the expected output to have the elements of path transform, stroke-width, stroke-linecap, stroke-linejoin, fill stroke and d (rounded to 2 decimals for simplicity). I have tried let svg_object_alt=document.querySelector('svg').outerHTML;, to convert svg as a string to be read and I am not sure how to extract all the information from it, to be formatted to the expected output? I would really appreciate any help I can obtain :) I think that the stroke-colour can just hardcode the code number (#929292) into it instead of using the rgb colour :)
you can use that... const mySvg_Paths = document.querySelectorAll('#my-svg > g > path'); for ( let attr of mySvg_Paths[2].attributes ) { console.log(attr.name,'-->\n', attr.value); } // or // console.log( 'outerHTML -->\n', mySvg_Paths[2].outerHTML ); // console.log( 'path.d -->\n', mySvg_Paths[2].getAttribute('d')); #my-svg { width : 800pt; height : 600pt; background : lightgreen; } #my-svg path { fill : none; stroke-width : 0.074; stroke-linecap : round; stroke-linejoin : round; stroke : rgb(50.19989%, 50.19989%, 50.19989%); stroke-opacity : 1; stroke-miterlimit : 10; } <svg id="my-svg" viewBox="0 0 800 600"> <g enable-background="new"> <path d="M 110.949219 265.421875 L 109.730469 265.691406 L 108.699219 266.410156 L 108.011719 267.460938 L 107.78125 268.679688 " transform="matrix(1,0,0,-1,0,600)"/> <path d="M 111.050781 268.679688 L 111.050781 265.421875 " transform="matrix(1,0,0,-1,0,600)" /> <path style="fill:none;stroke-width:0.074;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(50.19989%,50.19989%,50.19989%);stroke-opacity:1;stroke-miterlimit:10;" d="M 110.949219 268.679688 L 110.949219 265.421875 " transform="matrix(1,0,0,-1,0,600)"/> </g> </svg> then, you can have a look to -> Use RegEx to parse a string with complicated delimiting specialy this function: function parseData(pathData) { var pieces = pathData.match(/([a-z]+[-.,\d ]*)/gi), i; /* now parse each piece into its own array */ for (i=0; i<pieces.length; i++) pieces[i] = pieces[i].match(/([a-z]+|-?[.\d]*\d)/gi); return pieces; }
SVG: Select by class, html with javascript jQuery
Years back, Dan Miller had the same problem, as I have now, as they wanted a function (JavaScript) to get SVG elements by class. Dan proposed a function, but users were unable to run it: function getSvgElemByClass(svgRoot,classSearchStr) { // modification of Dustin Diaz's find by class script - http://www.dustindiaz.com/getelementsbyclass/ return( function getSvgElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; // SVG = XML, so we need the XML method: // using 'magic' namespace variable provided by websvg (svgns) var els = node.getElementsByTagNameNS(svgns,tag); var elsLen = els.length; var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)'); for (i = 0, j = 0; i < elsLen; i++) { // SVG specific helper if(els[i].hasAttribute('class') && pattern.test(els[i].getAttribute('class')) ) { classElements[j] = els[i]; j++; } else if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } )(classSearchStr,svgRoot) } An .svg file could look like this: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg1024" viewBox="0 0 20 20" width="20" height="20"> <style id="style_css_sheet" type="text/css"> .land { fill: #00ff00; stroke-width: 0.2; stroke: #e0e0e0; } .aa, .ab { fill: #ff0000; } </style> <g class="land bg" id="A"> <path d="M 0,5 H 5 V 0 H 0 Z" id="aa" class="land er bg"/> <path d="m 10,5 h 5 V 0 h -5 z" id="ab" class="land er bg"/> <path d="m 5,5 h 5 V 0 H 5 Z" id="ac" class="land tt bg"/> </g> <path d="M 0,10 H 5 v -5 H 0 Z" id="ba" class="land er au"/> <path d="m 10,10 h 5 v -5 h -5 z" id="bb" class="land tt au"/> <path d="m 5,10 h 5 v -5 H 5 Z" id="bc" class="land er au"/> <path d="M 0,15 H 5 V 10 H 0 Z" id="ca" class="land tt bg"/> <path d="m 10,15 h 5 V 10 h -5 z" id="cb" class="land tt au"/> <path d="m 5,15 h 5 V 10 H 5 Z" id="cc" class="land er bg"/> </svg> From html I would like to select by class, like select all class "tt", or select all class "au". Tried with the script of Dan Miller, tried to fix it, but could not do it. I would like to override the values set in the svg. (change .land {fill: #00ff00;}) I use this script https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js So that I can draw by id. That works, if I remove the .land{...}: var element = SVG.get('fi'); element.fill('#f06') How could I select by class? What to do, so that I can leave default colouring (.land{...})?
Simply use jQuery to change the fill by class: $('.land').css('fill', '#0000ff') Working Codepen.
You mention jQuery in your title, but later just Javascript. jQuery is not required. Modern browsers have the document.getElementsByClassName() method. var tt = document.getElementsByClassName("tt"); Array.from(tt).forEach(function(item) { item.style.fill = "#0000ff"; }); <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg1024" viewBox="0 0 20 20" width="20" height="20"> <style id="style_css_sheet" type="text/css"> .land { fill: #00ff00; stroke-width: 0.2; stroke: #e0e0e0; } .aa, .ab { fill: #ff0000; } </style> <g class="land bg" id="A"> <path d="M 0,5 H 5 V 0 H 0 Z" id="aa" class="land er bg"/> <path d="m 10,5 h 5 V 0 h -5 z" id="ab" class="land er bg"/> <path d="m 5,5 h 5 V 0 H 5 Z" id="ac" class="land tt bg"/> </g> <path d="M 0,10 H 5 v -5 H 0 Z" id="ba" class="land er au"/> <path d="m 10,10 h 5 v -5 h -5 z" id="bb" class="land tt au"/> <path d="m 5,10 h 5 v -5 H 5 Z" id="bc" class="land er au"/> <path d="M 0,15 H 5 V 10 H 0 Z" id="ca" class="land tt bg"/> <path d="m 10,15 h 5 V 10 h -5 z" id="cb" class="land tt au"/> <path d="m 5,15 h 5 V 10 H 5 Z" id="cc" class="land er bg"/> </svg>
SVG: dynamically created <use> won't show [duplicate]
One of the use elements is created dynamically, one is created statically. I have written a jsfiddle. https://jsfiddle.net/rhedin/r0dbf6uy/6/ <!doctype html> <body> <svg id="svg_box" width="200px" height="100px" viewBox="0 0 200 100" style="background-color:pink" > <defs> <g id="b"> <path d="m 4.23,7.7400001 0,-7.14000002 C 4.23,0.18000008 3.96,7.6293944e-8 3.39,7.6293944e-8 l -2.22,0 C 0.39000002,7.6293944e-8 1.9073486e-8,0.36000008 1.9073486e-8,1.0500001 c 0,0.75 0.420000000926514,1.02 1.349999980926514,1.02 0.21,0 0.45,0.03 0.66,0.03 L 2.01,17.1 c -0.12,0 -0.21,0 -0.3,0 C 0.51000002,17.1 1.9073486e-8,17.28 1.9073486e-8,18.12 1.9073486e-8,18.81 0.39000002,19.17 1.17,19.17 l 2.67,0 c 0.45,0 0.6,-0.24 0.6,-0.75 l 0,-1.17 c 0.99,1.47 2.52,2.19 4.56,2.19 3.93,0 6.93,-3.09 6.93,-6.9 0,-3.8699999 -2.94,-6.8999999 -6.87,-6.8999999 -2.07,0 -3.72,0.72 -4.83,2.1 z M 8.79,17.13 c -2.73,0 -4.62,-1.98 -4.62,-4.68 0,-2.7299999 1.92,-4.6799999 4.62,-4.6799999 2.73,0 4.62,2.01 4.62,4.6799999 0,2.79 -1.89,4.68 -4.62,4.68 z" /> </g> </defs> <use x="130px" y="10px" xlink:href="#b" /> </svg> <script> var svgElt = document.getElementById('svg_box'); var newUse = document.createElementNS("http://www.w3.org/2000/svg", 'use'); newUse.setAttribute('x', '150px'); newUse.setAttribute('y', '10px'); newUse.setAttribute('xlink:href', '#b'); svgElt.appendChild(newUse); </script> </body> Two both appear the same in Chrome's debugger. Why does only one show up? Thanks, Rick
You can't set an xlink:href attribute using setAttribute, you need to use setAttributeNS var svgElt = document.getElementById('svg_box'); var newUse = document.createElementNS("http://www.w3.org/2000/svg", 'use'); newUse.setAttribute('x', '150px'); newUse.setAttribute('y', '10px'); newUse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#b'); svgElt.appendChild(newUse); <!doctype html> <body> <svg id="svg_box" width="200px" height="100px" viewBox="0 0 200 100" style="background-color:pink" > <defs> <g id="b"> <path d="m 4.23,7.7400001 0,-7.14000002 C 4.23,0.18000008 3.96,7.6293944e-8 3.39,7.6293944e-8 l -2.22,0 C 0.39000002,7.6293944e-8 1.9073486e-8,0.36000008 1.9073486e-8,1.0500001 c 0,0.75 0.420000000926514,1.02 1.349999980926514,1.02 0.21,0 0.45,0.03 0.66,0.03 L 2.01,17.1 c -0.12,0 -0.21,0 -0.3,0 C 0.51000002,17.1 1.9073486e-8,17.28 1.9073486e-8,18.12 1.9073486e-8,18.81 0.39000002,19.17 1.17,19.17 l 2.67,0 c 0.45,0 0.6,-0.24 0.6,-0.75 l 0,-1.17 c 0.99,1.47 2.52,2.19 4.56,2.19 3.93,0 6.93,-3.09 6.93,-6.9 0,-3.8699999 -2.94,-6.8999999 -6.87,-6.8999999 -2.07,0 -3.72,0.72 -4.83,2.1 z M 8.79,17.13 c -2.73,0 -4.62,-1.98 -4.62,-4.68 0,-2.7299999 1.92,-4.6799999 4.62,-4.6799999 2.73,0 4.62,2.01 4.62,4.6799999 0,2.79 -1.89,4.68 -4.62,4.68 z" /> </g> </defs> <use x="130px" y="10px" xlink:href="#b" /> </svg> </body>
SVG Patch is not cleared
Thanks for advance, i have used the below code with (MoveTo Lineto), <svg height="200" width="500"> <path fill='none' stroke-width="30" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 L 418 117.5"/> </svg> it's shown fine but when i use same with(MoveTo Lineto MoveTo) <svg height="200" width="500"> <path fill='none' stroke-width="30" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 M 254 117.5 L 418 117.5"> </svg> .5 pixel is vary check the attached image. Why that difference? and how to solve? Sample: http://jsfiddle.net/3t8rspd1/1/
Please minus the half the stroke width from x position. you will get the correct path. eg. if stroke width is 20 mean minus the 10 from second MoveTo. calculation 254-(storkeWidth/2) = 244. if strokeWidth is 20. <svg height="200" width="500"> <path fill='none' stroke-width="20" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 M 244 117.5 L 418 117.5"/> </svg> Fiddle
stroke-linejoin <svg height="200" width="500"> <path fill='none' stroke-width="30" stroke-linejoin="round" stroke="black" d="M 100 63.125 L 254 63.125 L 254 117.5 L 418 117.5"/> </svg>
Parse SVG and add it to a svg element
I have a service where I want to dynamically add SVG parts to a g element. This is what the service returns: <g xmlns="http://www.w3.org/2000/svg" style="pointer-events: all;" opacity="1"> <title style="pointer-events: inherit;">Layer 1</title> <path id="svg_1" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 231.5 122.5 C 230.5 122.5 221.666 124.214 214.5 125.5 C 201.667 127.803 184.514 129.581 173.5 131.5 C 167.508 132.544 164.077 131.928 158.5 136.5 C 155.219 139.19 152 144.469 151.5 156.5 C 151.375 159.497 150.696 163.582 151.5 167.5 C 153.031 174.96 161.804 180.205 170.5 189.5 C 177.762 197.263 185.013 204.954 192.5 212.5 C 200.981 221.048 208.5 226.5 214.5 232.5 C 219.5 237.5 224.834 240.27 227.5 244.5 C 230.219 248.814 230.986 251.324 231.5 253.5 C 231.96 255.447 231.5 258.5 231.5 260.5 C 231.5 262.5 228.786 265.712 226.5 268.5 C 224.707 270.687 221.213 274.151 217.5 277.5 C 213.17 281.405 207.5 283.5 203.5 285.5 C 199.5 287.5 195.676 289.986 193.5 290.5 C 190.58 291.189 188.5 292.5 187.5 292.5 L 186.5 292.5 L 186.5 293.5" /> <path id="svg_2" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 39.5 35.5 C 40.5 35.5 42.5 35.5 45.5 35.5 C 47.5 35.5 50.5 35.5 52.5 35.5 C 54.5 35.5 56.5 35.5 57.5 35.5 L 58.5 35.5 L 59.5 35.5" /> <path id="svg_3" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 40.5 95.5 C 40.5 97.5 39.8088 103.572 38.5 108.5 C 36.8767 114.613 35.5 117.5 35.5 119.5 C 35.5 121.5 34.5 122.5 34.5 123.5 L 33.5 123.5 L 33.5 124.5 L 33.5 125.5" /> <path id="svg_6" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 81.5 176.5" /><path id="svg_7" style="pointer-events: inherit;" fill="none" stroke="#000000" stroke-width="5" d="M 79.5 167.5 C 79.5 170.5 80.1835 178.521 79.5 189.5 C 78.999 197.547 76.9069 204.357 75.5 211.5 C 73.75 220.385 72.663 227.522 71.5 235.5 C 70.6226 241.519 70.5 245.5 70.5 247.5 C 70.5 249.5 70.5 250.5 69.5 250.5 L 69.5 251.5 L 69.5 252.5" /> </g> The code I'm trying to use which has been modified many times is something to the affect of this: function parseSVG(s, layer) { var div= $(s); for(var i = 0; i < div.children.length; i++) { layer.append(div.children[i]); } } layer is the g element s is the svg from above. The closest I can get is adding title then all the path elements at once inside of svg_1.
You can use DOMParser to parse an XML string. var parser = new DOMParser(); var doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml"); The <g> in your example will be doc.documentElement
In addition to Robert's answer, you can convert the HTMLCollection to SVGElement in this way : const yourSvgElement = doc.getElementsByTagNameNS("http://www.w3.org/2000/svg", "svg").item(0); // yourSvgElement is now a SVGElement type Please note that the converted element is the first in the collection. See : HTMLCollection.item