Parse SVG and add it to a svg element - javascript

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

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;
}

Dynamically create svg group clones which is store in a variable using java script or jquery

i have a lot shapes created using svg tags and which in turn stored in js variables . I want to clone and append the groups to svg element with unique ids using js.
var ped_pb = '<g transform="scale(1.5)" stroke-width=".0005"><path i:knockout="Off" fill-rule="evenodd" clip-rule="evenodd" d="M10.411,0.506V13.17h12.697V0.506H10.411z"/><g> <defs><path id="XMLID_1_" d="M0,0.253h23.87v23.809H0V0.253z"/> </defs> <clipPath id="XMLID_2_"><use xlink:href="#XMLID_1_" /></clipPath><path i:knockout="Off" clip-path="url(#XMLID_2_)" fill="none" stroke="#000000" stroke-width="1.0131" stroke-miterlimit="8" d="M10.411,0.506h12.697V13.17H10.411V0.506z"/></g><g stroke-width=".000000000000000000005"><path i:knockout="Off" clip-path="url(#XMLID_4_)" stroke="#000000" stroke-width="0.0317" stroke-linejoin="round" stroke-miterlimit="10" d="M1.523,23.777l7.555-8.422l-1.523-1.361l-7.523,8.422L1.523,23.777zM7.904,21.782l1.777-8.611l-8.38,2.723c-0.54,0.158-0.825,0.729-0.667,1.267c0.19,0.538,0.762,0.823,1.301,0.665l6.698-2.185l-1.301-1.172l-1.429,6.902c-0.095,0.538,0.254,1.076,0.794,1.203C7.269,22.668,7.777,22.321,7.904,21.782z"/></g></g>';
i need a js function to populate the above shapes stored in variable to an svg element in different x or y coordinates as when required.

i have achieved the goal in the following way
var ped_pb = '<g transform="scale(1.5)" stroke-width=".0005" style="border: 1px dashed black;"><path i:knockout="Off" fill-rule="evenodd" clip-rule="evenodd" d="M10.411,0.506V13.17h12.697V0.506H10.411z"/><g> <defs><path id="XMLID_1_" d="M0,0.253h23.87v23.809H0V0.253z"/> </defs> <clipPath id="XMLID_2_"><use xlink:href="#XMLID_1_" /></clipPath><path i:knockout="Off" clip-path="url(#XMLID_2_)" fill="none" stroke-width="1.0131" stroke-miterlimit="8" d="M10.411,0.506h12.697V13.17H10.411V0.506z"/></g><g stroke-width=".000000000000000000005"><path i:knockout="Off" clip-path="url(#XMLID_4_)" stroke-width="0.0317" stroke-linejoin="round" stroke-miterlimit="10" d="M1.523,23.777l7.555-8.422l-1.523-1.361l-7.523,8.422L1.523,23.777zM7.904,21.782l1.777-8.611l-8.38,2.723c-0.54,0.158-0.825,0.729-0.667,1.267c0.19,0.538,0.762,0.823,1.301,0.665l6.698-2.185l-1.301-1.172l-1.429,6.902c-0.095,0.538,0.254,1.076,0.794,1.203C7.269,22.668,7.777,22.321,7.904,21.782z"/></g></g>';
function clone(){
var element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
element.setAttributeNS(null, 'id', 'lk');
element.innerHTML= ped_pb;
gg.appendChild(element)
element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
element.setAttributeNS(null, 'id', 'lk1');
element.setAttributeNS(null, 'transform', 'translate(40,80)');
element.setAttributeNS(null, 'fill', '#0FF');
element.innerHTML= ped_pb;
gg.appendChild(element)
element = document.createElementNS('http://www.w3.org/2000/svg', 'g');
element.setAttributeNS(null, 'id', 'lk2');
element.setAttributeNS(null, 'transform', 'translate(80,120)');
element.setAttributeNS(null, 'fill', '#f00');
element.innerHTML= ped_pb;
gg.appendChild(element)
}
document.addEventListener("onload",init(),false)
function init()
{
//clone()
clone()
}
<svg id="mySVG" width="400" height="400" xmlns="http://www.w3.org/2000/svg" >
<g id="gg">
<path id="pawn" d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
</g>
</svg>

How to do morphing in SVG

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>

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>

Drawing img containing SVG source with canvas to get Data URL

I ultimately want to get a data URI of an SVG graphic, and I am trying to do this by adding the SVG source to an image element, drawing the image with canvas, and then
In this sample jsFiddle, it fails when trying to draw the canvas, what am I missing?
I believe this should work in Firefox, and not Chrome, due to a security restriction.
var image = new Image();
var xml = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill-rule="evenodd" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" overflow="hidden" preserveAspectRatio="none" width="1291px" height="1006px" viewBox="0 0 491871 383286"><rect fill="#ffffff" fill-opacity="0" width="100%" height="100%"></rect><g transform="translate(6858 12192) scale(1.309375)"><g id="editor-ged1ef149_00"><g></g><g id="editor-ged1ef149_00-bg"><g></g><path fill="#FFFFFF" fill-opacity="1" d="M 0 0 L 365760 0 365760 274320 0 274320 Z"></path></g><g id="editor-ged1ef149_01"><g></g><path d="M 18288 10985.51953125 L 347472.0076446533 10985.51953125 347472.0076446533 56705.520990371704 18288 56705.520990371704 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 18288 10985.51953125 L 347472.0076446533 10985.51953125 347472.0076446533 56705.520990371704 18288 56705.520990371704 Z"></path><g direction="ltr" style="opacity: 0.8;"><g pointer-events="none" transform="matrix(381,0,0,380.99999999999994,21945,31712.5209903717)"><g><g id="editor-ged1ef149_01-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"><g class="sketchy-text-content-text" transform="translate(0 43.34375)"><text x="0px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">Click</text><text x="128.34375px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">to</text><text x="186.6875px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">add</text><text x="285.03125px" style="font-family:Arial;font-size:48px;fill:#000000;font-weight:bold;" y="0px" text-rendering="geometricPrecision">title</text></g></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 18186.157517899763 10911.694510739857 L 347573.84248210024 10911.694510739857 347573.84248210024 56595.32219570406 18186.157517899763 56595.32219570406 Z" pointer-events="none" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="0.3" stroke-width="290.9785202863962" stroke="#000000"></path><path d="M 21336 14033.51953125 L 344424.0076446533 14033.51953125 344424.0076446533 53657.5209903717 21336 53657.5209903717 Z" pointer-events="all"></path><path d="M 21945 31712.5209903717 L 162926.90625 31712.5209903717 162926.90625 53048.5209903717 21945 53048.5209903717 Z" pointer-events="all"></path></g></g><g id="editor-ged1ef149_02"><g></g><path d="M 18288 64008 L 347472.0076446533 64008 347472.0076446533 262716.00018310547 18288 262716.00018310547 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 18288 64008 L 347472.0076446533 64008 347472.0076446533 262716.00018310547 18288 262716.00018310547 Z"></path><g direction="ltr" style="opacity: 0.8;"><g pointer-events="none" transform="matrix(381,0,0,381,21945,67665)"><g><g id="editor-ged1ef149_02-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"><g class="sketchy-text-content-text" transform="translate(0 44.671875)"><text x="0px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">Click</text><text x="98.125px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">to</text><text x="142.25px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">add</text><text x="220.375px" style="font-family:Arial;font-size:40px;fill:#000000;" y="0px" text-rendering="geometricPrecision">text</text></g></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 18186.157517899763 63869.78520286396 L 347573.84248210024 63869.78520286396 347573.84248210024 262608.1145584726 18186.157517899763 262608.1145584726 Z" pointer-events="none" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" stroke-opacity="0.3" stroke-width="290.9785202863962" stroke="#000000"></path><path d="M 21336 67056 L 344424.0076446533 67056 344424.0076446533 259668.00018310547 21336 259668.00018310547 Z" pointer-events="all"></path><path d="M 21945 70713 L 130291.875 70713 130291.875 91287 21945 91287 Z" pointer-events="all"></path></g></g><g id="editor-ged1ef149_05"><g><path stroke="#5da2ff" stroke-opacity="0.6" stroke-width="1925.9140811455848" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path></g><path fill="#3D85C6" fill-opacity="1" stroke="#666666" stroke-opacity="1" stroke-width="762" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="8" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 127307 125743 L 238666.9967956543 125743 238666.9967956543 192678.99939346313 127307 192678.99939346313 Z"></path></g><g id="editor-ged1ef149_06"><g></g><path fill="#FF0000" fill-opacity="1" d="M 36727.9988 250551.9999 C 46095.4988 239712.24990000002 55462.9988 232937.40615 64830.4988 230227.46865 L 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 C 92932.9988 232937.40615 102300.4988 239712.24990000002 111667.9988 250551.9999 L 102300.4988 176028.71865 111667.9988 120474.9999 C 105422.9988 113248.4999 99177.9988 107828.6249 92932.9988 104215.3749 L 92932.9988 82535.87489999998 C 80442.9988 75309.37489999998 67952.9988 75309.37489999998 55462.9988 82535.87489999998 L 55462.9988 104215.3749 C 49217.9988 107828.62489999998 42972.9988 113248.4999 36727.9988 120474.9999 L 46095.4988 176028.71865 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 36727.9988 250551.9999 C 46095.4988 239712.24990000002 55462.9988 232937.40615 64830.4988 230227.46865 L 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 C 92932.9988 232937.40615 102300.4988 239712.24990000002 111667.9988 250551.9999 L 102300.4988 176028.71865 111667.9988 120474.9999 C 105422.9988 113248.4999 99177.9988 107828.6249 92932.9988 104215.3749 L 92932.9988 82535.87489999998 C 80442.9988 75309.37489999998 67952.9988 75309.37489999998 55462.9988 82535.87489999998 L 55462.9988 104215.3749 C 49217.9988 107828.62489999998 42972.9988 113248.4999 36727.9988 120474.9999 L 46095.4988 176028.71865 Z"></path><path fill="#cc0000" fill-opacity="1" d="M 64830.4988 208547.96865 L 64830.4988 230227.46865 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 83565.4988 208547.96865 C 77320.4988 206741.34365 71075.4988 206741.34365 64830.4988 208547.96865 Z"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 64830.4988 208547.96865 L 64830.4988 230227.46865 55462.9988 212612.8749 C 67952.9988 205386.3749 80442.9988 205386.3749 92932.9988 212612.8749 L 83565.4988 230227.46865 83565.4988 208547.96865 C 77320.4988 206741.34365 71075.4988 206741.34365 64830.4988 208547.96865 Z"></path><path stroke="#666666" stroke-opacity="1" stroke-width="762" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="8" d="M 36727.9988 250551.9999 L 46095.4988 176028.71865 36727.9988 120474.9999 C 42972.9988 113248.4999 49217.9988 107828.6249 55462.9988 104215.3749 L 55462.9988 82535.87489999998 C 67952.9988 75309.37489999998 80442.9988 75309.37489999998 92932.9988 82535.87489999998 L 92932.9988 104215.3749 C 99177.9988 107828.62489999998 105422.9988 113248.4999 111667.9988 120474.9999 L 102300.4988 176028.71865 111667.9988 250551.9999 C 102300.4988 239712.24990000002 92932.9988 232937.40615 83565.4988 230227.46865 L 92932.9988 212612.8749 C 80442.9988 205386.3749 67952.9988 205386.3749 55462.9988 212612.8749 L 64830.4988 230227.46865 C 55462.9988 232937.40615 46095.4988 239712.24990000002 36727.9988 250551.9999 Z M 55462.9988 212612.8749 L 55462.9988 104215.3749 M 92932.9988 104215.3749 L 92932.9988 212612.8749 M 64830.4988 208547.96865 L 64830.4988 230227.46865 M 83565.4988 230227.46865 L 83565.4988 208547.96865"></path><path stroke="#000" stroke-opacity="0" stroke-width="2036.8496420047734" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all" d="M 36727.9988 250551.9999 L 46095.4988 176028.71865 36727.9988 120474.9999 C 42972.9988 113248.4999 49217.9988 107828.6249 55462.9988 104215.3749 L 55462.9988 82535.87489999998 C 67952.9988 75309.37489999998 80442.9988 75309.37489999998 92932.9988 82535.87489999998 L 92932.9988 104215.3749 C 99177.9988 107828.62489999998 105422.9988 113248.4999 111667.9988 120474.9999 L 102300.4988 176028.71865 111667.9988 250551.9999 C 102300.4988 239712.24990000002 92932.9988 232937.40615 83565.4988 230227.46865 L 92932.9988 212612.8749 C 80442.9988 205386.3749 67952.9988 205386.3749 55462.9988 212612.8749 L 64830.4988 230227.46865 C 55462.9988 232937.40615 46095.4988 239712.24990000002 36727.9988 250551.9999 Z M 55462.9988 212612.8749 L 55462.9988 104215.3749 M 92932.9988 104215.3749 L 92932.9988 212612.8749 M 64830.4988 208547.96865 L 64830.4988 230227.46865 M 83565.4988 230227.46865 L 83565.4988 208547.96865"></path><g direction="ltr"><g pointer-events="none" transform="matrix(381,0,0,380.99999999999994,59119.9988,140863.9374)"><g><g id="editor-ged1ef149_06-paragraph-0"><g><g class="sketchy-text-background"></g><g class="sketchy-text-content"></g></g></g></g><rect style="opacity: 0;"></rect><rect style="opacity: 1;"></rect></g><path d="M 59119.9988 140863.9374 L 59119.9988 140863.9374 59119.9988 148864.9374 59119.9988 148864.9374 Z" pointer-events="all"></path></g></g></g><path stroke="#0096fd" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" pointer-events="none" d="M 238747.87589498807 125848.21002386636 L 238747.87589498807 192773.26968973747 127303.10262529833 192773.26968973747 127303.10262529833 125848.21002386636 Z"></path><path stroke="#0096fd" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 182880 125848 L 182880 120029"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M 1163.9140811455848 0 C 1163.9140811455848 642.811997130027 642.8119971300271 1163.9140811455848 7.126682895371086e-14 1163.9140811455848 -642.8119971300268 1163.9140811455848 -1163.9140811455845 642.8119971300271 -1163.9140811455848 1.4253365790742172e-13 -1163.9140811455848 -642.8119971300268 -642.8119971300273 -1163.9140811455845 -2.1380048686113256e-13 -1163.9140811455848 642.8119971300267 -1163.9140811455848 1163.9140811455845 -642.8119971300273 1163.9140811455848 -2.8506731581484343e-13" transform="translate(182880,120028.63961813843)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(182880,125848.21002386636)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,125848.21002386636)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,159310.73985680193)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(238747.87589498807,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(182880,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,192773.26968973747)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,159310.73985680193)"></path><path fill="#0096fd" fill-opacity="1" stroke="#ffffff" stroke-opacity="1" stroke-width="290.9785202863962" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="10" d="M -1163.9140811455848 1163.9140811455848 L -1163.9140811455848 -1163.9140811455848 1163.9140811455848 -1163.9140811455848 1163.9140811455848 1163.9140811455848 Z" transform="translate(127303.10262529833,125848.21002386636)"></path></g><defs><filter id="myblur" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" stdDeviation="1524"></feGaussianBlur></filter></defs></svg>';
image.src = 'data:image/svg+xml,' + xml;
document.querySelector('#container').appendChild(image);
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
image.src = canvas.toDataURL();

You need to set the dimension of the canvas to the dimensions of the image. Here's an update to your fiddle.
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
image.src = canvas.toDataURL();
}
Adding image.onload makes this work in Firefox.

Categories

Resources