Develop Reference

Add border around svg sitemap

What do i have to do to get a border around my sitemap?
I have made a sitemap and i'd like to add a border around the elements just to give it a bit more character and less bland.
<style>
#svgJS g:hover polyline,
#svgJS g:hover line {
fill: none;
stroke-width: 2;
stroke: black;
}
#svgJS g:hover g text,
#svgJS g:hover text {
font-weight: bold;
}
#svgJS g:hover polygon,
#svgJS g:hover rect,
#svgJS g:focus polygon,
#svgJS g:focus rect {
fill: pink;
stroke: blue;
stroke-width: 2;
}
h1 {
font-family: sans-serif;
<!--text-align: centre;-->
}
a {
text-decoration: none;
}
a:link, a:visited {
color: #0000FF;
}
a:hover {
color: grey;
}
a:
.container {
margin: auto;
}
header {
position: sticky;
top: 0;
}
</style>
<svg style="text-align:center" id="svgJS" height="1920" width="1280">
<g id="GROUPONE">
<rect x="375" y="10" height="50" width="150"
stroke="#0000FF" fill="none" stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="41"
font-family="Sans-Serif" text-anchor="middle">
Main Page</text>
</g>
<g id="groupId2">
<line id="shapeId2" stroke="#0000FF" stroke-width="2"
x1="450" y1="60" x2="450" y2="110"></line>
<polyline points="455, 105 450, 110 445, 105"
stroke="#0000FF" stroke-width="2" fill="none" />
</g>
<g id="groupId3" >
<rect x="375" y="110" height="50"
width="150" stroke="#0000FF" fill="none"
stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="141"
font-family="Sans-Serif" text-anchor="middle">
Query form</text></g>

you can wrap your svg with a div tag and give it a border with CSS
<div class='myClassName'>
<SVG/>
<div>
then on your CSS
.myClassName {
border: 2px solid black;
}

I'm not sure what you're really looking for but I hope this answers your question.
Simply apply border style to the svg. like so:
/* ADDED THIS LINE */
svg {
border: 1px solid #ff0000
}
#svgJS g:hover polyline,
#svgJS g:hover line {
fill: none;
stroke-width: 2;
stroke: black;
}
#svgJS g:hover g text,
#svgJS g:hover text {
font-weight: bold;
}
#svgJS g:hover polygon,
#svgJS g:hover rect,
#svgJS g:focus polygon,
#svgJS g:focus rect {
fill: pink;
stroke: blue;
stroke-width: 2;
}
h1 {
font-family: sans-serif;
<!--text-align: centre;
-->
}
a {
text-decoration: none;
}
a:link,
a:visited {
color: #0000FF;
}
a:hover {
color: grey;
}
a: .container {
margin: auto;
}
header {
position: sticky;
top: 0;
}
<svg style="text-align:center" id="svgJS" height="1920" width="1280">
<g id="GROUPONE">
<rect x="375" y="10" height="50" width="150"
stroke="#0000FF" fill="none" stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="41"
font-family="Sans-Serif" text-anchor="middle">
Main Page</text>
</g>
<g id="groupId2">
<line id="shapeId2" stroke="#0000FF" stroke-width="2"
x1="450" y1="60" x2="450" y2="110"></line>
<polyline points="455, 105 450, 110 445, 105"
stroke="#0000FF" stroke-width="2" fill="none" />
</g>
<g id="groupId3" >
<rect x="375" y="110" height="50"
width="150" stroke="#0000FF" fill="none"
stroke-width="2" />
<text fill="#000" font-size="14" x="450" y="141"
font-family="Sans-Serif" text-anchor="middle">
Query form</text></g>

How to find xpath to the image element

I have a below HTML Code which points to a SVG (image) Element on the screen
<div _ngcontent-c25="" class="chart-div ng-star-inserted">
<!---->
<!----><div _ngcontent-c25="" class="pie-div ng-star-inserted" d3-pie="">
<svg width="80" height="80">
<g transform="translate(40,40)" width="80" height="80"><g transform="translate(40,40)"></g>
<path d="M2.4492935982947065e-15,-40A40,40 0 0,1 30.83714902626715,-25.476856947665098L13.876717061820216,-11.464585626449294A18,18 0 0,0 1.102182119232618e-15,-18Z" fill="#3182bd"></path>
<path d="M30.83714902626715,-25.476856947665098A40,40 0 0,1 36.923912424205994,15.382610028521366L16.615760590892698,6.922174512834615A18,18 0 0,0 13.876717061820216,-11.464585626449294Z" fill="#6baed6"></path>
<path d="M36.923912424205994,15.382610028521366A40,40 0 0,1 3.4424059772594435,39.851597723149425L1.5490826897667496,17.93321897541724A18,18 0 0,0 16.615760590892698,6.922174512834615Z" fill="#9ecae1"></path>
<path d="M3.4424059772594435,39.851597723149425A40,40 0 1,1 -7.347880794884118e-15,-40L-3.3065463576978533e-15,-18A18,18 0 1,0 1.5490826897667496,17.93321897541724Z" fill="#c6dbef"></path>
</g>
</svg>
<div class="attrFilter-tooltip" id="attributeFilterTooltipCountry" style="display: none; position: fixed; left: 1567px; top: 325px; z-index: 1000; background: rgb(238, 238, 238); box-shadow: rgb(153, 153, 153) 0px 0px 5px; color: rgb(51, 51, 51); width: 100px; text-align: center;"><div class="attrLabel" style="font-weight: bold;">Germany</div><div class="attrCount">693</div><div class="attrPercent">51.4%</div></div></div>
<!----><p _ngcontent-c25="" class="filtered-text ng-star-inserted">
no value filtered
</p>
<!---->
<!---->
<!---->
</div>
I am able to find the element till the div tag but if I try to access the element in SVG and its child chrome is unable to find the element
XPath : //div[#class='pie-div ng-star-inserted'] - this works perfectly until div
but if I try to access its child element SVG and path it's not locating it at all (though code is visible on screen)
Xpath I've tried : //div[#class='pie-div ng-star-inserted']/svg/g/path1
on-screen the element would look like as in the below screenshot.
The element is actually a svg image on screen (Pie Chart) once we hover on that it displays a popup of the corresponding location data

your xpath needs to be //div[#class='pie-div ng-star-inserted']/*[name()='svg']/*[name()='g']/*[name()='path'] - found by searching for xpath + svg
There is another syntax //div[#class='pie-div ng-star-inserted']/svg:svg/svg:g/svg:path - and using the NSresolver argument, you can make it work as follows
const xpath = "//div[#class='pie-div ng-star-inserted']/svg:svg/svg:g/svg:path";
let result = document.evaluate(
xpath,
document,
prefix => prefix === 'svg' ? 'http://www.w3.org/2000/svg' : null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
null
);
for (var i = 0; i < result.snapshotLength; i++) {
console.log(result.snapshotItem(i).getAttribute('fill'));
}
<div _ngcontent-c25="" class="chart-div ng-star-inserted">
<div _ngcontent-c25="" class="pie-div ng-star-inserted" d3-pie="">
<svg width="80" height="80">
<g transform="translate(40,40)" width="80" height="80"><g transform="translate(40,40)"></g>
<path d="M2.4492935982947065e-15,-40A40,40 0 0,1 30.83714902626715,-25.476856947665098L13.876717061820216,-11.464585626449294A18,18 0 0,0 1.102182119232618e-15,-18Z" fill="#3182bd"></path>
<path d="M30.83714902626715,-25.476856947665098A40,40 0 0,1 36.923912424205994,15.382610028521366L16.615760590892698,6.922174512834615A18,18 0 0,0 13.876717061820216,-11.464585626449294Z" fill="#6baed6"></path>
<path d="M36.923912424205994,15.382610028521366A40,40 0 0,1 3.4424059772594435,39.851597723149425L1.5490826897667496,17.93321897541724A18,18 0 0,0 16.615760590892698,6.922174512834615Z" fill="#9ecae1"></path>
<path d="M3.4424059772594435,39.851597723149425A40,40 0 1,1 -7.347880794884118e-15,-40L-3.3065463576978533e-15,-18A18,18 0 1,0 1.5490826897667496,17.93321897541724Z" fill="#c6dbef"></path>
</g>
</svg>
<div class="attrFilter-tooltip" id="attributeFilterTooltipCountry" style="display: none; position: fixed; left: 1567px; top: 325px; z-index: 1000; background: rgb(238, 238, 238); box-shadow: rgb(153, 153, 153) 0px 0px 5px; color: rgb(51, 51, 51); width: 100px; text-align: center;">
<div class="attrLabel" style="font-weight: bold;">Germany</div>
<div class="attrCount">693</div>
<div class="attrPercent">51.4%</div>
</div>
</div>
<p _ngcontent-c25="" class="filtered-text ng-star-inserted">
no value filtered
</p>
</div>

With a SVG circle, how to position the starting point?

I'm working to create an SVG circle progress indicator in react... Here is my output:
CODEPEN
The problem is I need the red stroke to start at the top, not at the current 90% angle... Is there some CSS I can add to reposition the red stroke to start at the top?
FYI, I'm using the following component in react to render this HTML: https://github.com/wmartins/react-circular-progress/blob/gh-pages/src/js/components/CircularProgress.jsx.js
codepen source below
html
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
<circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
<circle class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
<text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>
css
.CircularProgress-Bg,
.CircularProgress-Fg {
fill: none;
}
.CircularProgress-Bg {
stroke: #CCC;
}
.CircularProgress-Fg {
transition: stroke-dashoffset .5s ease-in-out;
stroke: red;
}
.CircularProgress-Text {
font-size: 15px;
font-weight: 600;
fill: rgba(255,255,255,0.9);
transform: translate(0 50%);
}

You could use transform, add transform="rotate(-90 25 25)" and it will start at the top
.CircularProgress-Bg,
.CircularProgress-Fg {
fill: none;
}
.CircularProgress-Bg {
stroke: #CCC;
}
.CircularProgress-Fg {
transition: stroke-dashoffset .5s ease-in-out;
stroke: red;
}
.CircularProgress-Text {
font-size: 15px;
font-weight: 600;
fill: rgba(255,255,255,0.9);
transform: translate(0 50%);
}
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
<circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
<circle transform="rotate(-90 25 25)" class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-startOffest: 50%;stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
<text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>
If to use CSS, you can rotate the svg element instead of the circle (which might or might not be possible based on its shape)
.CircularProgress {
transform: rotate(-90deg);
}
.CircularProgress-Bg,
.CircularProgress-Fg {
fill: none;
}
.CircularProgress-Bg {
stroke: #CCC;
}
.CircularProgress-Fg {
transition: stroke-dashoffset .5s ease-in-out;
stroke: red;
}
.CircularProgress-Text {
font-size: 15px;
font-weight: 600;
fill: rgba(255,255,255,0.9);
transform: translate(0, 50%);
}
<svg class="CircularProgress" width="50" height="50" viewBox="0 0 50 50">
<circle class="CircularProgress-Bg" cx="25" cy="25" r="24" stroke-width="2px"></circle>
<circle class="CircularProgress-Fg" cx="25" cy="25" r="24" stroke-width="2px" style="stroke-dasharray: 150.796; stroke-dashoffset: 125.161;"></circle>
<text class="CircularProgress-Text" x="25" y="25" dy=".4em" text-anchor="middle">17%</text>
</svg>

svg with inline css to image data uri

So I have currently tried converting an SVG to an image with a data uri, and it works for simple SVGs, however I am using mermaid js for complex charts and graphs which contains internal css and other elements, here is an example:
<div class="mermaid" data-processed="true"><svg id="mermaidChart1" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 1112 268" style="max-width:1112px;"><style type="text/css" title="mermaid-svg-internal-css">/* */
#mermaidChart1 .node { fill:#ffa; stroke:#666; stroke-width:3px; }
#mermaidChart1 .node text { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart1 .edgeLabel text { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart1 .cluster rect { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; vertical-align: baseline; background: transparent; }
#markdown-preview .mermaid .label { color: rgb(51, 51, 51); }
#markdown-preview .node rect, #markdown-preview .node circle, #markdown-preview .node polygon { fill: rgb(238, 238, 238); stroke: rgb(51, 51, 51); stroke-width: 1px; }
#markdown-preview .edgePath .path { stroke: rgb(51, 51, 51); }
#markdown-preview .cluster rect { fill: rgb(255, 255, 222) !important; rx: 4px !important; stroke: rgb(170, 170, 51) !important; stroke-width: 1px !important; }
#markdown-preview .cluster text { fill: rgb(51, 51, 51); }
#markdown-preview text { font-family: 'Roboto Slab', verdana, arial; font-size: 14px; }
/* */
</style><g><g class="output"><g class="clusters"><g class="cluster" id="subGraph2" transform="translate(969,124)" style="opacity: 1;"><g class="label"><g transform="translate(-49.5,-12)"><foreignObject width="99" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph2</div></foreignObject></g></g><rect width="206" height="208" x="-103" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Effects</text></g><g class="cluster" id="subGraph1" transform="translate(581.5,124)" style="opacity: 1;"><g class="label"><g transform="translate(-48,-12)"><foreignObject width="96" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph1</div></foreignObject></g></g><rect width="469" height="208" x="-234.5" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Combat Scenario</text></g><g class="cluster" id="subGraph0" transform="translate(158.5,124)" style="opacity: 1;"><g class="label"><g transform="translate(-49.5,-12)"><foreignObject width="99" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph0</div></foreignObject></g></g><rect width="277" height="208" x="-138.5" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Weapon & Target</text></g></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M257,77L297,77L322,77L347,77L403.9148936170213,102" marker-end="url(#arrowhead125)" style="fill:none"></path><defs><marker id="arrowhead125" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M272,171L297,171L322,171L347,171L403.9148936170213,146" marker-end="url(#arrowhead126)" style="stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;"></path><defs><marker id="arrowhead126" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M504.0851063829787,102L561,77L595,77" marker-end="url(#arrowhead127)" style="fill:none"></path><defs><marker id="arrowhead127" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M504.0851063829787,146L561,171L586,171" marker-end="url(#arrowhead128)" style="fill:none"></path><defs><marker id="arrowhead128" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M782,77L816,77L841,77L866,77L891,77" marker-end="url(#arrowhead129)" style="fill:none"></path><defs><marker id="arrowhead129" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M791,171L816,171L841,171L866,171L908.5,171" marker-end="url(#arrowhead130)" style="fill:none"></path><defs><marker id="arrowhead130" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="Damage" transform="translate(688.5,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-93.5" y="-22" width="187" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-83.5,-12)"><foreignObject width="167" height="24"><div style="display: inline-block; white-space: nowrap;">DamageCalculator</div></foreignObject></g></g></g><g class="node" id="Output" transform="translate(969,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-78" y="-22" width="156" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-68,-12)"><foreignObject width="136" height="24"><div style="display: inline-block; white-space: nowrap;">Bonus Damage</div></foreignObject></g></g></g><g class="node" id="Visual" transform="translate(688.5,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-102.5" y="-22" width="205" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-92.5,-12)"><foreignObject width="185" height="24"><div style="display: inline-block; white-space: nowrap;">VisualEffectHandler</div></foreignObject></g></g></g><g class="node" id="Output2" transform="translate(969,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-60.5" y="-22" width="121" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-50.5,-12)"><foreignObject width="101" height="24"><div style="display: inline-block; white-space: nowrap;">Set On Fire</div></foreignObject></g></g></g><g class="node" id="CombatHandler" transform="translate(454,124)" style="opacity: 1;"><rect rx="5" ry="5" x="-82" y="-22" width="164" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-72,-12)"><foreignObject width="144" height="24"><div style="display: inline-block; white-space: nowrap;">CombatHandler</div></foreignObject></g></g></g><g class="node" id="Tags" transform="translate(158.5,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-98.5" y="-22" width="197" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-88.5,-12)"><foreignObject width="177" height="24"><div style="display: inline-block; white-space: nowrap;">silver, magic, sharp</div></foreignObject></g></g></g><g class="node" id="Optional" transform="translate(158.5,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-113.5" y="-22" width="227" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-103.5,-12)"><foreignObject width="207" height="24"><div style="display: inline-block; white-space: nowrap;">werewolf, undead, frail</div></foreignObject></g></g></g></g></g></g></svg></div>
Now the problem is when I target svg tags and do the xml serialization like so:
var svgToDataUri = function(svgElement){
console.log("converting svg to datauri");
// Create canvas for converting image to data URL
var image = document.createElement("img");
var parent = svgElement.parentElement;
image.style.width = svgElement.width + "px";
image.style.height = svgElement.height + "px";
// get svg data
var xml = new XMLSerializer().serializeToString(svgElement);
// make it base64
var svg64 = btoa(xml);
var image64 = 'data:image/svg+xml;base64,' + svg64;
// Get data URL encoding of image
image.setAttribute("src", image64);
parent.insertBefore(image, svgElement);
parent.removeChild(svgElement);
};
The output image is missing bits and also does not seem to be styled correctly, even though it is basically replacing the existing content so should have all same styles on the page, so do I need to do anything special when outputting more complex svg elements to images or should this work? (tried it in FF, Chrome)
Here is an example of the actual output and desired output:
So as you can see it just blacks out sections and some lines are not visible, the one below looks how I would expect it to look.

#markdown-preview doesn't occur as an id of any element of your svg - or of the posted html for that matter. This means it won't render as you expect as original svg (see second attached image below).
Probably the html originally surrounding the div does contain an element with that id.
Quick fix: give the outer group in the svg the markdown-preview id: replace </style><g><g class="output"> with </style><g id="markdown-preview"><g class="output"> (see attached and HTML snippet image below)
Permanent fix: file an issue with the software that rendered the svg.
results
I've uncommented the parent.removeChild(svgElement); in your code so I could see both the img (first in each) and the original svg (second).
Fixed:
The original HTML:
The code I used to reproduce 'fixed'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" defer>
var svgToDataUri = function(svgElement){
console.log("converting svg to datauri");
// Create canvas for converting image to data URL
var image = document.createElement("img");
var parent = svgElement.parentElement;
image.style.width = svgElement.width + "px";
image.style.height = svgElement.height + "px";
// get svg data
var xml = new XMLSerializer().serializeToString(svgElement);
// make it base64
var svg64 = btoa(xml);
var image64 = 'data:image/svg+xml;base64,' + svg64;
// Get data URL encoding of image
image.setAttribute("src", image64);
parent.insertBefore(image, svgElement);
// parent.removeChild(svgElement);
};
</script>
</head>
<body>
<div class="mermaid" data-processed="true"><svg id="mermaidChart1" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 1112 268" style="max-width:1112px;"><style type="text/css" title="mermaid-svg-internal-css">/* */
#mermaidChart1 .node { fill:#ffa; stroke:#666; stroke-width:3px; }
#mermaidChart1 .node text { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart1 .edgeLabel text { fill:#000; stroke:none; font-weight:300; font-family:"Helvetica Neue",Helvetica,Arial,sans-serf; font-size:14px; }
#mermaidChart1 .cluster rect { rx:4px; fill: rgb(255, 255, 222); rx: 4px; stroke: rgb(170, 170, 51); stroke-width: 1px; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; vertical-align: baseline; background: transparent; }
#markdown-preview .mermaid .label { color: rgb(51, 51, 51); }
#markdown-preview .node rect, #markdown-preview .node circle, #markdown-preview .node polygon { fill: rgb(238, 238, 238); stroke: rgb(51, 51, 51); stroke-width: 1px; }
#markdown-preview .edgePath .path { stroke: rgb(51, 51, 51); }
#markdown-preview .cluster rect { fill: rgb(255, 255, 222) !important; rx: 4px !important; stroke: rgb(170, 170, 51) !important; stroke-width: 1px !important; }
#markdown-preview .cluster text { fill: rgb(51, 51, 51); }
#markdown-preview text { font-family: 'Roboto Slab', verdana, arial; font-size: 14px; }
/* */
</style><g id="markdown-preview"><g class="output"><g class="clusters"><g class="cluster" id="subGraph2" transform="translate(969,124)" style="opacity: 1;"><g class="label"><g transform="translate(-49.5,-12)"><foreignObject width="99" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph2</div></foreignObject></g></g><rect width="206" height="208" x="-103" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Effects</text></g><g class="cluster" id="subGraph1" transform="translate(581.5,124)" style="opacity: 1;"><g class="label"><g transform="translate(-48,-12)"><foreignObject width="96" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph1</div></foreignObject></g></g><rect width="469" height="208" x="-234.5" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Combat Scenario</text></g><g class="cluster" id="subGraph0" transform="translate(158.5,124)" style="opacity: 1;"><g class="label"><g transform="translate(-49.5,-12)"><foreignObject width="99" height="24"><div style="display: inline-block; white-space: nowrap;">subGraph0</div></foreignObject></g></g><rect width="277" height="208" x="-138.5" y="-104"></rect><text x="0" y="-90" fill="black" stroke="none" id="mermaidChart1Text" style="text-anchor: middle;"> Weapon & Target</text></g></g><g class="edgePaths"><g class="edgePath" style="opacity: 1;"><path class="path" d="M257,77L297,77L322,77L347,77L403.9148936170213,102" marker-end="url(#arrowhead125)" style="fill:none"></path><defs><marker id="arrowhead125" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M272,171L297,171L322,171L347,171L403.9148936170213,146" marker-end="url(#arrowhead126)" style="stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;"></path><defs><marker id="arrowhead126" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M504.0851063829787,102L561,77L595,77" marker-end="url(#arrowhead127)" style="fill:none"></path><defs><marker id="arrowhead127" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M504.0851063829787,146L561,171L586,171" marker-end="url(#arrowhead128)" style="fill:none"></path><defs><marker id="arrowhead128" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M782,77L816,77L841,77L866,77L891,77" marker-end="url(#arrowhead129)" style="fill:none"></path><defs><marker id="arrowhead129" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g><g class="edgePath" style="opacity: 1;"><path class="path" d="M791,171L816,171L841,171L866,171L908.5,171" marker-end="url(#arrowhead130)" style="fill:none"></path><defs><marker id="arrowhead130" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="6" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" style="fill: #333"></path></marker></defs></g></g><g class="edgeLabels"><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g><g class="edgeLabel" transform="" style="opacity: 1;"><g transform="translate(0,0)" class="label"><foreignObject width="0" height="0"><div style="display: inline-block; white-space: nowrap;"><span style="background:#e8e8e8"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node" id="Damage" transform="translate(688.5,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-93.5" y="-22" width="187" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-83.5,-12)"><foreignObject width="167" height="24"><div style="display: inline-block; white-space: nowrap;">DamageCalculator</div></foreignObject></g></g></g><g class="node" id="Output" transform="translate(969,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-78" y="-22" width="156" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-68,-12)"><foreignObject width="136" height="24"><div style="display: inline-block; white-space: nowrap;">Bonus Damage</div></foreignObject></g></g></g><g class="node" id="Visual" transform="translate(688.5,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-102.5" y="-22" width="205" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-92.5,-12)"><foreignObject width="185" height="24"><div style="display: inline-block; white-space: nowrap;">VisualEffectHandler</div></foreignObject></g></g></g><g class="node" id="Output2" transform="translate(969,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-60.5" y="-22" width="121" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-50.5,-12)"><foreignObject width="101" height="24"><div style="display: inline-block; white-space: nowrap;">Set On Fire</div></foreignObject></g></g></g><g class="node" id="CombatHandler" transform="translate(454,124)" style="opacity: 1;"><rect rx="5" ry="5" x="-82" y="-22" width="164" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-72,-12)"><foreignObject width="144" height="24"><div style="display: inline-block; white-space: nowrap;">CombatHandler</div></foreignObject></g></g></g><g class="node" id="Tags" transform="translate(158.5,77)" style="opacity: 1;"><rect rx="5" ry="5" x="-98.5" y="-22" width="197" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-88.5,-12)"><foreignObject width="177" height="24"><div style="display: inline-block; white-space: nowrap;">silver, magic, sharp</div></foreignObject></g></g></g><g class="node" id="Optional" transform="translate(158.5,171)" style="opacity: 1;"><rect rx="5" ry="5" x="-113.5" y="-22" width="227" height="44"></rect><g class="label" transform="translate(0,0)"><g transform="translate(-103.5,-12)"><foreignObject width="207" height="24"><div style="display: inline-block; white-space: nowrap;">werewolf, undead, frail</div></foreignObject></g></g></g></g></g></g></svg></div>
<script>
svgToDataUri(document.getElementById("mermaidChart1"));
</script>
</body>
</html>
B.t.w. here's some things I learned the hard way to do while developing mscgen_js, but you might already know and left out just to simplify your sample code:
add a charset to the data uri, so text will render correctly even when it's not ASCII (provided fonts are available) data:image/svg+xml;charset=utf-8;base64,
for similar reasons, when dumping the generated uri in links/ url bars encodeURIComponent and unescape it before feeding it to the btoa
(... and think of a strategy for hitting browse max uri length in case you ever run on IE)

stroke-dasharray to visual data without libraries

I am trying to animate stroke-dasharray of a svg circle based on data values without using libraries.
Data is coming from a javascript calculation, so length of stroke will be different from circle to another.
code will as following: Codepen
or
var circle_1 = 20,
circle_2 = 33,
circle_3 = 42;
document.getElementById('circle_1').innerHTML = circle_1;
document.getElementById('circle_2').innerHTML = circle_2;
document.getElementById('circle_3').innerHTML = circle_3;
.container {
text-align: center;
height: 200px;
}
li {
list-style: none;
display: inline-block;
margin: 100px 50px;
position: relative;
width: 100px;
height: 100px;
}
circle {
stroke: #222;
fill: transparent;
stroke-width: 3px
}
.result {
position: absolute;
top: 40%;
left: 40%;
}
<div class="container">
<li>
<svg width="100" height="100">
<circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" />
</svg>
<div class="result" id="circle_1"></div>
</li>
<li>
<svg width="100" height="100">
<circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" />
</svg>
<div class="result" id="circle_2"></div>
</li>
<li>
<svg width="100" height="100">
<circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" />
</svg>
<div class="result" id="circle_3"></div>
</li>
</div>

If I understand you correctly, you want a pie chart using SVG circle and no library. I worked on something like that recently, here is a mixin I made:
http://codepen.io/Draccoz/pen/GJVJVM
=pie-chart($size, $ring-size, $ring-color: false, $bg-size: 0, $bg-color: transparent)
$d: $size - $ring-size
width: $size
height: $size
>
circle
cx: $size / 2
cy: $size / 2
&:nth-child(1)
r: $bg-size / 2
#if $bg-color
fill: $bg-color
&:nth-child(2)
font-size: $d * 1.01 * $PI
stroke-width: $ring-size
r: $d / 2
fill: transparent
#if $ring-color
stroke: $ring-color
/* stroke-linecap: round */
transition: stroke-dashoffset 1s ease-in-out
transform: translateY($size) rotate(-90deg)
stroke-dasharray: 1em 1em
stroke-dashoffset: 0
#content
Hope it helps.