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)
Related
.showcase-components-colorlist color {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
<div class="showcase-components-colorlist color">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
How to add a check mark to one of the circles as generated by the code above.
One way to do this is through pseudo content. You need to give the element which you'll set the pseudo content a relative container. Then, you create your pseudo content (in this case, a check mark). The positioning will be relative to the parent element's dimensions.
.showcase-components-colorlist {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.showcase-components-colorlist.selected::before {
content: '✅';
position: absolute;
left: 11px;
top: 9px;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1">
</circle>
</svg>
</div>
<div class="showcase-components-colorlist selected">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
Create your own <svg-option> Native JavaScript Web Component.
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
creates:
<script>
customElements.define("svg-option",class extends HTMLElement{
connectedCallback(){
this.style.display = "inline-block";
this.innerHTML=`<svg viewBox="0 0 50 50">
<circle cx="50%" cy="50%" r="49%" fill="${this.getAttribute("fill") || "green"}"/>
<circle cx="50%" cy="50%" r="30%" fill="${this.getAttribute("selected-fill") || "beige"}" visibility="hidden"/>
</svg>`;
this.select();
this.onclick = (evt) => this.toggle();
}
select(state = this.hasAttribute("selected")) {
this.querySelector("circle:nth-child(2)").setAttribute("visibility" , state ? "visible" :"hidden");
}
toggle(){
this.select( this.toggleAttribute("selected") );
}
})
</script>
<style>
svg-option {
--svg-option-size:180px;
width: var(--svg-option-size);
height: var(--svg-option-size);
cursor: pointer;
}
svg-option[selected]{
background:lightgreen;
}
svg-option:not([selected]){
background:pink;
}
</style>
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
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>
All,
There is a double walled circle and a text. Ideally the text should be rendered within the circle but in IE & Firefox , the circle is coming down and the text on the top. The issue can be seen using the below code.
Any help or advice on how to get it fixed in IE & firefox is much appreciated.
<div class="col-xs-4 col-sm-2">
<div style="margin-top: 20px; position: relative; display: inline-block; max-width: 116px; max-height: 116px;">
<svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF">
<g transform="translate(32, 32)">
<path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path>
<path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path>
</g></g></g>
</svg>
<span style="font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">400</span>
</div>
</div>
The styling you have added to the divs pushes the number outside of the SVG.
I would just avoid the problem in the first place by using an SVG <text> element that you can position inside the svg.
You might have to fiddle with the x and y values a bit.
ps: There's also a <circle> element you could use instead of a <path>.
<svg width="100%" height="100%" viewBox="0 0 418 418" tabindex="-1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-31.000000, -31.000000)" stroke="#9B9B9B" stroke-width="2" fill="#FFFFFF">
<g transform="translate(32, 32)">
<path d="M208,416 C322.875228,416 416,322.875228 416,208 C416,93.124772 322.875228,0 208,0 C93.124772,0 -9.09494702e-13,93.124772 -9.09494702e-13,208 C-9.09494702e-13,322.875228 93.124772,416 208,416 Z"></path>
<path d="M208,398.666667 C313.302292,398.666667 398.666667,313.302292 398.666667,208 C398.666667,102.697708 313.302292,17.3333333 208,17.3333333 C102.697708,17.3333333 17.3333333,102.697708 17.3333333,208 C17.3333333,313.302292 102.697708,398.666667 208,398.666667 Z"></path>
</g>
</g>
</g>
<text x="47%" y="49%" style="font-size: 32px;">400</text>
</svg>
I don't know what are your constraints, but to render these circles in particular I'd play with border-radius: 50% and display: flex:
.circle {
border: 2px solid #888;
border-radius: 50%; /* make the border a circle */
display: flex; /* align the content vertically and horizontally */
align-items: center; /* same */
justify-content: space-around; /* same */
}
<div class="circle" style="width: 100px; height: 100px;">
<div class="circle" style="width: 90px; height: 90px;">
400
</div>
</div>
Svg image convert canvas to png but chrome browser is error: Tainted canvases may not be exported But Firefox is not error and image save and download.
my svg object:
I think error source can be foreignobject.because I remove this object,chrome not error.it has to stay svg inside
<svg xmlns="http://www.w3.org/2000/svg" id="drawcontentssvg" width="410" height="230" viewBox="-100 -70 410 230">
<defs><filter x="0" y="0" width="1" height="1" id="dhx_text_background">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic"></feComposite>
</filter></defs>
<g id="shapeImg" shape-rendering="crispedges">
<g transform="translate(0,0) rotate(0,105,45)" dhx_id="1">
<rect class="dhx_item_shape" id="1" height="90" width="210" fill="white" rx="1" ry="1" stroke="#FF9800" stroke-width="1"></rect>
<foreignObject overflow="hidden" transform="translate(0 0)" width="210" height="90"><div class="shape_content" style="height: 90px;">
<div style="text-align: center; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: rgba(0, 0, 0, 0.38); font-size: 14px; line-height: 17px; margin-top: 25px; white-space: nowrap; text-transform: uppercase;">fsfsfsfsf</div>
<div style="text-align: center;"></div></div>
</foreignObject>
<rect height="3.5" width="210" stroke="#FF9800" fill="#FF9800" stroke-width="1"></rect>
</g>
</g>
</svg>
(Sorry I'm quite a begginner to web development and I didn't know where this question goes, hence so many tags..)
I have been playing with diagram builder example in AlloyUI. It looks great for drawing but I need to make sense out of it afterwards (i.e. convert it to an xml format) so that I can send information to another application. I have tried to capture the related html part after render and it looks like this:
(tidied version here)
<div id="myDiagramContainer" class="yui3-widget aui-component aui-diagram-builder aui-diagram-builder-focused">
<div id="myDiagramBuilder" class="aui-diagram-builder-content aui-layout"><div id="yui_3_9_0pr3_1_1372686463356_237" class="yui3-widget aui-tabbable"><div id="yui_3_9_0pr3_1_1372686463356_239" class="aui-tabbable-content"><ul class="aui-nav aui-nav-tabs"><li id="yui_3_9_0pr3_1_1372686463356_266" class="yui3-widget aui-tab aui-active aui-tab-selected" role="presentation"><a id="yui_3_9_0pr3_1_1372686463356_268" class="aui-tab-content aui-tab-label" role="tab" tabindex="0">Add node</a></li><li id="yui_3_9_0pr3_1_1372686463356_285" class="yui3-widget aui-tab aui-tab-disabled aui-disabled" role="presentation"><a id="yui_3_9_0pr3_1_1372686463356_287" class="aui-tab-content aui-tab-label" role="tab" tabindex="-1">Settings</a></li></ul><div class="aui-tab-content" id="yui_3_9_0pr3_1_1372686463356_719"><div class="aui-tab-pane aui-active" role="tabpanel" aria-labelledby="yui_3_9_0pr3_1_1372686463356_268" id="yui_3_9_0pr3_1_1372686463356_718"><ul class="aui-diagram-builder-fields-container aui-clearfix" id="yui_3_9_0pr3_1_1372686463356_717"><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Start"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-start-icon" id="yui_3_9_0pr3_1_1372686463356_716"></span><div class="aui-diagram-builder-field-label">Start</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Task"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-task-icon" id="yui_3_9_0pr3_1_1372686463356_972"></span><div class="aui-diagram-builder-field-label">Task</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="State"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-state-icon"></span><div class="aui-diagram-builder-field-label">State</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Join"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-join-icon"></span><div class="aui-diagram-builder-field-label">Join</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Fork"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-fork-icon"></span><div class="aui-diagram-builder-field-label">Fork</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="Condition"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-condition-icon"></span><div class="aui-diagram-builder-field-label">Condition</div></li><li class="aui-diagram-builder-field aui-diagram-builder-field-draggable" id="availableFields_field_yui_3_9_0pr3_1_1372686463356_166" title="End"><span class="aui-icon aui-diagram-builder-field-icon aui-diagram-node-end-icon" id="yui_3_9_0pr3_1_1372686463356_1253"></span><div class="aui-diagram-builder-field-label">End</div></li></ul></div><div class="aui-tab-pane" role="tabpanel" aria-labelledby="yui_3_9_0pr3_1_1372686463356_287" id="yui_3_9_0pr3_1_1372686463356_2499"><div id="yui_3_9_0pr3_1_1372686463356_2164" class="aui-table-selection yui3-widget yui3-datatable aui-table aui-table-property-list aui-table-sortable aui-table-scrollable-x aui-table-striped" tabindex="0" style="width: 260px;"><div id="yui_3_9_0pr3_1_1372686463356_2166" class="aui-table-content"><div class="aui-table-x-scroller" style="width: 258px;" id="yui_3_9_0pr3_1_1372686463356_2491"><table cellspacing="0" class="aui-table-table" id="yui_3_9_0pr3_1_1372686463356_2326" style="width: 100%;"><colgroup id="yui_3_9_0pr3_1_1372686463356_2375"><col><col style="width: auto;"></colgroup><thead class="aui-table-columns" id="yui_3_9_0pr3_1_1372686463356_2336"><tr><th id="yui_3_9_0pr3_1_1372686463356_2200" colspan="1" rowspan="1" class="aui-table-header aui-table-first-header aui-table-col-name aui-table-sortable-column" scope="col" data-yui3-col-id="name" title="Sort by Property Name" aria-labelledby="yui_3_9_0pr3_1_1372686463356_2200"><div class="aui-table-sort-liner" tabindex="0" unselectable="on">Property Name<span class="aui-table-sort-indicator"></span></div></th><th id="yui_3_9_0pr3_1_1372686463356_2201" colspan="1" rowspan="1" class="aui-table-header aui-table-col-value aui-table-sortable-column" scope="col" data-yui3-col-id="value" title="Sort by Value" aria-labelledby="yui_3_9_0pr3_1_1372686463356_2201"><div class="aui-table-sort-liner" tabindex="0" unselectable="on">Value<span class="aui-table-sort-indicator"></span></div></th></tr></thead><tbody class="aui-table-data" id="yui_3_9_0pr3_1_1372686463356_2486"><tr id="yui_3_9_0pr3_1_1372686463356_3688" data-yui3-record="model_11" class="aui-table-even "><td class="aui-table-col-name aui-table-cell ">Name</td><td class="aui-table-col-value aui-table-cell ">2</td></tr></tbody></table></div></div></div><div id="yui_3_9_0pr3_1_1372686463356_2388" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn">Close</button></div></div></div></div></div><div class="aui-diagram-builder-content-container" id="yui_3_9_0pr3_1_1372686463356_1249"><div tabindex="1" class="aui-diagram-builder-canvas" id="yui_3_9_0pr3_1_1372686463356_1248"><div class="aui-diagram-builder-drop-container yui3-dd-drop" id="yui_3_9_0pr3_1_1372686463356_191"><div id="yui_3_9_0pr3_1_1372686463356_740" class="aui-diagram-node-start yui3-widget yui3-overlay aui-diagram-node yui3-widget-positioned yui3-widget-stacked" tabindex="1" data-nodeid="diagramNode_field_Start" style="height: 40px; width: 40px; left: 151px; top: 213px; z-index: 100;"><div id="yui_3_9_0pr3_1_1372686463356_742" class="aui-diagram-node-content yui3-widget-stdmod yui3-widget-content-expanded"><div class="yui3-widget-bd" id="yui_3_9_0pr3_1_1372686463356_971"><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 40px; height: 40px;" id="yui_3_9_0pr3_1_1372686463356_970"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_827" width="49" height="49" viewBox="-7 -7 49 49" style="position: absolute; top: -7px; left: -7px; overflow: auto; visibility: visible; width: 49px; height: 49px;"><svg:circle id="yui_3_9_0pr3_1_1372686463356_833" pointer-events="visiblePainted" r="15" cx="15" cy="15" fill="none" stroke-dasharray="none" stroke="transparent" stroke-linecap="butt" stroke-width="7" stroke-opacity="0" stroke-linejoin="round" transform="matrix(1,0,0,1,5,5)" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle aui-diagram-node-shape-boundary"></svg:circle></svg:svg></div></div></div><div class="aui-diagram-node-label" id="yui_3_9_0pr3_1_1372686463356_2144">Start</div><div class="aui-diagram-builder-controls" id="yui_3_9_0pr3_1_1372686463356_2776"><div id="yui_3_9_0pr3_1_1372686463356_932" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn yui3-widget aui-btn-content" id="yui_3_9_0pr3_1_1372686463356_2775"><i class="aui-icon-remove"></i> </button></div></div></div><div id="yui_3_9_0pr3_1_1372686463356_989" class="aui-diagram-node-task yui3-widget yui3-overlay aui-diagram-node yui3-widget-positioned yui3-widget-stacked" tabindex="1" data-nodeid="diagramNode_field_Task" style="height: 70px; width: 70px; left: 355px; top: 202px; z-index: 100;"><div id="yui_3_9_0pr3_1_1372686463356_991" class="aui-diagram-node-content yui3-widget-stdmod yui3-widget-content-expanded"><div class="yui3-widget-bd" id="yui_3_9_0pr3_1_1372686463356_1205"><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 70px; height: 70px;" id="yui_3_9_0pr3_1_1372686463356_1204"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_1064" width="77" height="77" viewBox="-7 -7 77 77" style="position: absolute; top: -7px; left: -7px; overflow: auto; visibility: visible; width: 77px; height: 77px;"><svg:rect id="yui_3_9_0pr3_1_1372686463356_1070" pointer-events="visiblePainted" width="55" height="55" x="0" y="0" fill="none" stroke-dasharray="none" stroke="transparent" stroke-linecap="butt" stroke-width="7" stroke-opacity="0" stroke-linejoin="round" transform="matrix(1,0,0,1,8,8)" style="left: 0px; top: 0px;" class="yui3-shape yui3-svgShape yui3-rect yui3-svgRect aui-diagram-node-shape-boundary"></svg:rect></svg:svg></div></div></div><div class="aui-diagram-node-label" id="yui_3_9_0pr3_1_1372686463356_1206">Task</div><div class="aui-diagram-builder-controls" id="yui_3_9_0pr3_1_1372686463356_1207"><div id="yui_3_9_0pr3_1_1372686463356_1169" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn yui3-widget aui-btn-content" id="yui_3_9_0pr3_1_1372686463356_1208"><i class="aui-icon-remove"></i> </button></div></div></div><div id="yui_3_9_0pr3_1_1372686463356_1270" class="aui-diagram-node-end yui3-widget yui3-overlay aui-diagram-node yui3-widget-positioned yui3-widget-stacked" tabindex="1" data-nodeid="diagramNode_field_End" style="height: 40px; width: 40px; left: 566px; top: 214px; z-index: 100;"><div id="yui_3_9_0pr3_1_1372686463356_1272" class="aui-diagram-node-content yui3-widget-stdmod yui3-widget-content-expanded"><div class="yui3-widget-bd" id="yui_3_9_0pr3_1_1372686463356_1486"><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 40px; height: 40px;" id="yui_3_9_0pr3_1_1372686463356_1485"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_1345" width="49" height="49" viewBox="-7 -7 49 49" style="position: absolute; top: -7px; left: -7px; overflow: auto; visibility: visible; width: 49px; height: 49px;"><svg:circle id="yui_3_9_0pr3_1_1372686463356_1351" pointer-events="visiblePainted" r="15" cx="15" cy="15" fill="none" stroke-dasharray="none" stroke="transparent" stroke-linecap="butt" stroke-width="7" stroke-opacity="0" stroke-linejoin="round" transform="matrix(1,0,0,1,5,5)" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle aui-diagram-node-shape-boundary"></svg:circle></svg:svg></div></div></div><div class="aui-diagram-node-label" id="yui_3_9_0pr3_1_1372686463356_2755">End</div><div class="aui-diagram-builder-controls"><div id="yui_3_9_0pr3_1_1372686463356_1450" class="aui-toolbar-content yui3-widget aui-component aui-toolbar"><button class="aui-btn"><i class="aui-icon-remove"></i> </button></div></div></div></div><div style="position: absolute; left: 0px; top: 0px; visibility: visible; width: 1019px; height: 600px;" id="yui_3_9_0pr3_1_1372686463356_3872"><svg:svg pointer-events="none" overflow="auto" id="yui_3_9_0pr3_1_1372686463356_202" style="position: absolute; top: -7px; left: -298px; overflow: auto; visibility: visible; width: 888px; height: 266px;" width="888" height="266" viewBox="-298 -7 888 266"><svg:path id="yui_3_9_0pr3_1_1372686463356_669" pointer-events="visiblePainted" width="569" height="241" x="0" y="0" fill="none" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: hidden;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M402, 237C487,237 487, 241 572, 241"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_671" pointer-events="visiblePainted" width="572.9999934834163" height="246.93858848751862" x="0" y="0" fill="#27aae1" fill-opacity="1" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: hidden;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M572, 241 M555.0217716335618, 234.93866668652237 L559.0000847155875, 240.95306815478037, 554.9784499302822, 246.93858848751862, 572.9999934834163, 241.00361014194, 555.0217716335618, 234.93866668652237z"></svg:path><svg:circle id="yui_3_9_0pr3_1_1372686463356_831" pointer-events="visiblePainted" r="12" cx="344" cy="237" fill="#ffd700" fill-opacity="0.8" stroke-dasharray="none" stroke="#ff6600" stroke-linecap="butt" stroke-width="6" stroke-opacity="0.8" stroke-linejoin="round" style="visibility: hidden;" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle"></svg:circle><svg:circle id="yui_3_9_0pr3_1_1372686463356_1068" pointer-events="visiblePainted" r="12" cx="572" cy="241" fill="#ffd700" fill-opacity="0.8" stroke-dasharray="none" stroke="#ff6600" stroke-linecap="butt" stroke-width="6" stroke-opacity="0.8" stroke-linejoin="round" style="visibility: hidden;" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle"></svg:circle><svg:circle id="yui_3_9_0pr3_1_1372686463356_1349" pointer-events="visiblePainted" r="12" cx="12" cy="12" fill="#ffd700" fill-opacity="0.8" stroke-dasharray="none" stroke="#ff6600" stroke-linecap="butt" stroke-width="6" stroke-opacity="0.8" stroke-linejoin="round" style="visibility: hidden;" class="yui3-shape yui3-svgShape yui3-circle yui3-svgCircle"></svg:circle><svg:path id="yui_3_9_0pr3_1_1372686463356_1770" pointer-events="visiblePainted" width="341" height="234" x="0" y="0" fill="none" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M186, 233C273.5,233 273.5, 232 361, 232"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_1772" pointer-events="visiblePainted" width="344.99999952849356" height="239.98348866894088" x="0" y="0" fill="#27aae1" fill-opacity="1" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M361, 232 M343.99474600913277, 226.01490712636024 L348.00000499653675, 232.0113978037331, 344.00526705873256, 238.0149025141725, 361.99999961565106, 231.99912324586668, 343.99474600913277, 226.01490712636024z"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_2113" pointer-events="visiblePainted" width="566.1" height="239" x="0" y="0" fill="none" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M421, 232C496,232 496, 232 571, 232"></svg:path><svg:path id="yui_3_9_0pr3_1_1372686463356_2115" pointer-events="visiblePainted" width="570" height="245" x="0" y="0" fill="#27aae1" fill-opacity="1" stroke-dasharray="none" stroke="#27aae1" stroke-linecap="butt" stroke-width="2" stroke-opacity="1" stroke-linejoin="round" transform="matrix(1,0,0,1,0,0)" style="left: 0px; top: 0px; visibility: visible;" class="yui3-shape yui3-svgShape yui3-path yui3-svgPath" d=" M571, 232 M554, 226 L558, 232, 554, 238, 572, 232, 554, 226z"></svg:path></svg:svg></div><span class="aui-diagram-builder-connector-name aui-unselectable aui-hide">connector655</span><span class="aui-diagram-builder-connector-name aui-unselectable" style="left: 266.5px; top: 221px;" id="yui_3_9_0pr3_1_1372686463356_3438">1</span><span class="aui-diagram-builder-connector-name aui-unselectable" style="left: 488.5px; top: 221px;" id="yui_3_9_0pr3_1_1372686463356_3655">2</span></div></div></div>
</div>
Looking at this I couldn't really make any sense out of it. I could't find anything related to this in YUI3 and AUI documentations.
So the question is how can I get information (e.g. nodes, connections and possibly positions) from an AUI digram?
You can use the .toJSON method in DiagramBuilder