How to convert html with lots of svg charts into a pdf? - javascript

I have a dashboard with lots of svg charts. I need to give a feature to export this entire html as a pdf.
I looked into few tools like phantomjs and htmltocanvas etc. But I am unable to convert svg into pdf or even images.
I thought, may be using htmltocanvas I'll first convert html into png and then convert png into pdf using phantomjs.
htmltocanvas converts rest of the html page into png but not the svg charts.
Is there any better way or tools to do this?
Below is the code to convert html to image.
html2canvas($(".content"), {
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = img;
}
});
and one of the SVG chart is as follows.
<svg width="330" height="320" style="overflow: hidden;"><defs><clipPath id="c3-1462852070590-clip"><rect width="330" height="316"></rect></clipPath><clipPath id="c3-1462852070590-clip-xaxis"><rect x="-31" y="-20" width="392" height="20"></rect></clipPath><clipPath id="c3-1462852070590-clip-yaxis"><rect x="-29" y="-4" width="20" height="340"></rect></clipPath><clipPath id="c3-1462852070590-clip-grid"><rect width="330" height="316"></rect></clipPath><clipPath id="c3-1462852070590-clip-subchart"><rect width="330"></rect></clipPath></defs><g transform="translate(0.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="165" y="158" style="opacity: 0;"></text><rect class="c3-zoom-rect" width="330" height="316" style="opacity: 0;"></rect><g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&t=dashboardMenuOption#c3-1462852070590-clip)" class="c3-regions" style="visibility: hidden;"></g><g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&t=dashboardMenuOption#c3-1462852070590-clip-grid)" class="c3-grid" style="visibility: hidden;"><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="316" style="visibility: hidden;"></line></g></g><g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&t=dashboardMenuOption#c3-1462852070590-clip)" class="c3-chart"><g class="c3-event-rects c3-event-rects-single" style="fill-opacity: 0;"><rect class=" c3-event-rect c3-event-rect-0" x="0" y="0" width="330" height="316"></rect></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-FS1" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-FS1 c3-bars c3-bars-FS1" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-FS2" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-FS2 c3-bars c3-bars-FS2" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-Renewal" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-Renewal c3-bars c3-bars-Renewal" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-Tele-sales" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-Tele-sales c3-bars c3-bars-Tele-sales" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-FS1" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-FS1 c3-lines c3-lines-FS1"></g><g class=" c3-shapes c3-shapes-FS1 c3-areas c3-areas-FS1"></g><g class=" c3-selected-circles c3-selected-circles-FS1"></g><g class=" c3-shapes c3-shapes-FS1 c3-circles c3-circles-FS1" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-FS2" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-FS2 c3-lines c3-lines-FS2"></g><g class=" c3-shapes c3-shapes-FS2 c3-areas c3-areas-FS2"></g><g class=" c3-selected-circles c3-selected-circles-FS2"></g><g class=" c3-shapes c3-shapes-FS2 c3-circles c3-circles-FS2" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-Renewal" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-Renewal c3-lines c3-lines-Renewal"></g><g class=" c3-shapes c3-shapes-Renewal c3-areas c3-areas-Renewal"></g><g class=" c3-selected-circles c3-selected-circles-Renewal"></g><g class=" c3-shapes c3-shapes-Renewal c3-circles c3-circles-Renewal" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-Tele-sales" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-Tele-sales c3-lines c3-lines-Tele-sales"></g><g class=" c3-shapes c3-shapes-Tele-sales c3-areas c3-areas-Tele-sales"></g><g class=" c3-selected-circles c3-selected-circles-Tele-sales"></g><g class=" c3-shapes c3-shapes-Tele-sales c3-circles c3-circles-Tele-sales" style="cursor: pointer;"></g></g></g><g class="c3-chart-arcs" transform="translate(122.984375,158)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 0;"></text><g class="c3-chart-arc c3-target c3-target-FS1"><g class=" c3-shapes c3-shapes-FS1 c3-arcs c3-arcs-FS1"><path class=" c3-shape c3-shape c3-arc c3-arc-FS1" transform="" d="M7.154090006472169e-15,-116.83515625A116.83515625,116.83515625 0 1,1 -107.89143050974987,44.831829747643916L0,0Z" style="fill: rgb(31, 119, 180); cursor: pointer; opacity: 1;"></path></g><text dy=".35em" class="" transform="translate(77.74499355097029,51.88454845881587)" style="opacity: 1; text-anchor: middle; pointer-events: none;">68.7%</text></g><g class="c3-chart-arc c3-target c3-target-FS2"><g class=" c3-shapes c3-shapes-FS2 c3-arcs c3-arcs-FS2"><path class=" c3-shape c3-shape c3-arc c3-arc-FS2" transform="" d="M-44.4439868873686,-108.0517735417486A116.83515625,116.83515625 0 0,1 -11.653578222643608,-116.25251760960121L0,0Z" style="fill: rgb(255, 140, 0); cursor: pointer; opacity: 1;"></path></g><text dy=".35em" class="" transform="translate(-22.67752725334393,-90.67535579576993)" style="opacity: 1; text-anchor: middle; pointer-events: none;"></text></g><g class="c3-chart-arc c3-target c3-target-Renewal"><g class=" c3-shapes c3-shapes-Renewal c3-arcs c3-arcs-Renewal"><path class=" c3-shape c3-shape c3-arc c3-arc-Renewal" transform="" d="M-107.89143050974987,44.831829747643916A116.83515625,116.83515625 0 0,1 -44.4439868873686,-108.0517735417486L0,0Z" style="fill: rgb(0, 128, 0); cursor: pointer; opacity: 1;"></path></g><text dy=".35em" class="" transform="translate(-86.32911494813567,-35.82700522353499)" style="opacity: 1; text-anchor: middle; pointer-events: none;">25.1%</text></g><g class="c3-chart-arc c3-target c3-target-Tele-sales"><g class=" c3-shapes c3-shapes-Tele-sales c3-arcs c3-arcs-Tele-sales"><path class=" c3-shape c3-shape c3-arc c3-arc-Tele-sales" transform="" d="M-11.653578222643608,-116.25251760960121A116.83515625,116.83515625 0 0,1 8.230819442412569e-14,-116.83515625L0,0Z" style="fill: rgb(214, 39, 40); cursor: pointer; opacity: 1;"></path></g><text dy=".35em" class="" transform="translate(-4.66725363658852,-93.35152454302703)" style="opacity: 1; text-anchor: middle; pointer-events: none;"></text></g></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-FS1" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-FS1"></g></g><g class="c3-chart-text c3-target c3-target-FS2" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-FS2"></g></g><g class="c3-chart-text c3-target c3-target-Renewal" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-Renewal"></g></g><g class="c3-chart-text c3-target c3-target-Tele-sales" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-Tele-sales"></g></g></g></g><g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&t=dashboardMenuOption#c3-1462852070590-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&t=dashboardMenuOption#c3-1462852070590-clip-xaxis)" transform="translate(0,316)" style="visibility: visible; opacity: 0;"><text class="c3-axis-x-label" transform="" x="330" dx="-0.5em" dy="-0.5em" style="text-anchor: end;"></text><g class="tick" transform="translate(165, 0)" style="opacity: 1;"><line y2="6" x1="0" x2="0"></line><text y="9" x="0" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><path class="domain" d="M0,6V0H330V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&t=dashboardMenuOption#c3-1462852070590-clip-yaxis)" transform="translate(0,0)" style="visibility: visible; opacity: 0;"><text class="c3-axis-y-label" transform="rotate(-90)" x="0" dx="-0.5em" dy="1.2em" style="text-anchor: end;"></text><g class="tick" transform="translate(0,296)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,257)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">10</tspan></text></g><g class="tick" transform="translate(0,218)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">20</tspan></text></g><g class="tick" transform="translate(0,179)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">30</tspan></text></g><g class="tick" transform="translate(0,140)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">40</tspan></text></g><g class="tick" transform="translate(0,101)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">50</tspan></text></g><g class="tick" transform="translate(0,62)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">60</tspan></text></g><g class="tick" transform="translate(0,23)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">70</tspan></text></g><path class="domain" d="M-6,1H0V316H-6"></path></g><g class="c3-axis c3-axis-y2" transform="translate(330,0)" style="visibility: hidden; opacity: 0;"><text class="c3-axis-y2-label" transform="rotate(-90)" x="0" dx="-0.5em" dy="-0.5em" style="text-anchor: end;"></text><g class="tick" transform="translate(0,316)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,285)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" transform="translate(0,253)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" transform="translate(0,222)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" transform="translate(0,190)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" transform="translate(0,159)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" transform="translate(0,127)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" transform="translate(0,96)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" transform="translate(0,64)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" transform="translate(0,33)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" transform="translate(0,1)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V316H6"></path></g></g><g transform="translate(0.5,320.5)" style="visibility: hidden;"><g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&t=dashboardMenuOption#c3-1462852070590-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&t=dashboardMenuOption#c3-1462852070590-clip)" class="c3-brush" style="pointer-events: all; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><rect class="background" x="0" width="330" style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0" width="0" style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(http://localhost:8080/charts/dashboard?operation=getUserDashBoard&t=dashboardMenuOption#c3-1462852070590-clip-xaxis)" style="opacity: 0;"><g class="tick" transform="translate(165, 0)" style="opacity: 1;"><line y2="6" x1="0" x2="0"></line><text y="9" x="0" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><path class="domain" d="M0,6V0H330V6"></path></g></g><g transform="translate(258.2671875,0)"><g class=" c3-legend-item c3-legend-item-FS1" style="visibility: visible; cursor: pointer;"><text x="14" y="131" style="pointer-events: none;">FS1</text><rect class="c3-legend-item-event" x="0" y="117" width="43.296875" height="19" style="fill-opacity: 0;"></rect><rect class="c3-legend-item-tile" x="0" y="122" width="10" height="10" style="pointer-events: none; fill: rgb(31, 119, 180);"></rect></g><g class=" c3-legend-item c3-legend-item-FS2" style="visibility: visible; cursor: pointer; opacity: 1;"><text x="14" y="150" style="pointer-events: none;">FS2</text><rect class="c3-legend-item-event" x="0" y="136" width="43.296875" height="19" style="fill-opacity: 0;"></rect><rect class="c3-legend-item-tile" x="0" y="141" width="10" height="10" style="pointer-events: none; fill: darkorange;"></rect></g><g class=" c3-legend-item c3-legend-item-Renewal" style="visibility: visible; cursor: pointer; opacity: 1;"><text x="14" y="169" style="pointer-events: none;">Renewal</text><rect class="c3-legend-item-event" x="0" y="155" width="68.25" height="19" style="fill-opacity: 0;"></rect><rect class="c3-legend-item-tile" x="0" y="160" width="10" height="10" style="pointer-events: none; fill: green;"></rect></g><g class=" c3-legend-item c3-legend-item-Tele-sales" style="visibility: visible; cursor: pointer; opacity: 1;"><text x="14" y="188" style="pointer-events: none;">Tele sales</text><rect class="c3-legend-item-event" x="0" y="174" width="74.03125" height="19" style="fill-opacity: 0;"></rect><rect class="c3-legend-item-tile" x="0" y="179" width="10" height="10" style="pointer-events: none; fill: rgb(214, 39, 40);"></rect></g></g></svg>
There are many more such charts on a single html page.


Here's PhantomJS code that works for the SVG you provided (version 2.1.1).
var link = "http://example.com/svg.html";
var page = require('webpage').create();
var system = require('system');
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 5.1; rv:31.0) Gecko/20100101 Firefox/31.0';
page.viewportSize = { width: 1280, height: 720 };
page.onError = function(msg, trace) {
var msgStack = ['ERROR: ' + msg];
if (trace && trace.length) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
});
}
console.error(msgStack.join('\n'));
};
page.onConsoleMessage = function(msg, lineNum, sourceId) {
console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
};
page.open(link, function(status) {
console.log(status);
// Give it time to load
setTimeout(function(){
page.render("svg.png");
page.render("svg.pdf");
phantom.exit();
}, 3000);
});

Related

resize SVG in order to fit container size

Hi have a div container (with a fixed width and height) containing various contents (with an undefined height).
A part of this content can be an SVG diagram/graphic which have a defined viewBox and which is wrapped within an tag.
I am looking for a solution which will make the SVG scale keeping its aspect ratio in order to make it 100% visible it in div container.
Pure CSS solution preferred (the div container is already a flex box container) but javascript can also be an option
<div class="slide">
<h1 id="preferredpizzas">Preferred pizzas</h1>
<h2 id="donutchart">Donut chart</h2>
<object class="c3">
<svg viewBox="0 0 800 600">...</svg></object>
<p>this text should be visible as well</p>
</div>
fiddle : https://jsfiddle.net/rzu23r4g/

Your fiddle markup is invalid (the object tag is superfluous and you've unclosed tags)
Once I fixed that, I changed the div to be a flexbox and orient vertically and it all displays in the box.
.slide{
display: flex;
flex-flow: column;
width: 500px;
height : 370px;
border: 1px solid #000;
overflow: hidden;
}
<div class="slide">
<h1 id="preferredpizzas">Preferred pizzas</h1>
<h2 id="donutchart">Donut chart</h2>
<svg viewBox="0 0 800 600"><defs><clipPath id="c3-1485081006314-clip"><rect width="800" height="574"></rect></clipPath><clipPath id="c3-1485081006314-clip-xaxis"><rect x="-31" y="-20" width="862" height="42"></rect></clipPath><clipPath id="c3-1485081006314-clip-yaxis"><rect x="-29" y="-4" width="20" height="598"></rect></clipPath><clipPath id="c3-1485081006314-clip-grid"><rect width="800" height="574"></rect></clipPath><clipPath id="c3-1485081006314-clip-subchart"><rect width="800"></rect></clipPath></defs><g transform="translate(0.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="400" y="287" style="opacity: 0.999437568;"></text><rect class="c3-zoom-rect" width="800" height="574" style="opacity: 0;"></rect><g clip-path="url(file:///#c3-1485081006314-clip)" class="c3-regions" style="visibility: hidden;"></g><g clip-path="url(file:///#c3-1485081006314-clip-grid)" class="c3-grid" style="visibility: hidden;"><g class="c3-ygrids"><line class="c3-ygrid" x1="0" x2="800" y1="570" y2="570"></line><line class="c3-ygrid" x1="0" x2="800" y1="498" y2="498"></line><line class="c3-ygrid" x1="0" x2="800" y1="425" y2="425"></line><line class="c3-ygrid" x1="0" x2="800" y1="353" y2="353"></line><line class="c3-ygrid" x1="0" x2="800" y1="281" y2="281"></line><line class="c3-ygrid" x1="0" x2="800" y1="208" y2="208"></line><line class="c3-ygrid" x1="0" x2="800" y1="136" y2="136"></line><line class="c3-ygrid" x1="0" x2="800" y1="64" y2="64"></line></g><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="574" style="visibility: hidden;"></line></g></g><g clip-path="url(file:///#c3-1485081006314-clip)" class="c3-chart"><g class="c3-event-rects" style="fill-opacity: 0;"></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-un" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-un c3-bars c3-bars-un" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-deux" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-deux c3-bars c3-bars-deux" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-quatre" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-quatre c3-bars c3-bars-quatre" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-un" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-un c3-lines c3-lines-un"></g><g class=" c3-shapes c3-shapes-un c3-areas c3-areas-un"></g><g class=" c3-selected-circles c3-selected-circles-un"></g><g class=" c3-shapes c3-shapes-un c3-circles c3-circles-un" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-deux" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-deux c3-lines c3-lines-deux"></g><g class=" c3-shapes c3-shapes-deux c3-areas c3-areas-deux"></g><g class=" c3-selected-circles c3-selected-circles-deux"></g><g class=" c3-shapes c3-shapes-deux c3-circles c3-circles-deux" style="cursor: pointer;"></g></g><g class="c3-chart-line c3-target c3-target-quatre" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-quatre c3-lines c3-lines-quatre"></g><g class=" c3-shapes c3-shapes-quatre c3-areas c3-areas-quatre"></g><g class=" c3-selected-circles c3-selected-circles-quatre"></g><g class=" c3-shapes c3-shapes-quatre c3-circles c3-circles-quatre" style="cursor: pointer;"></g></g></g><g class="c3-chart-arcs" transform="translate(400,282)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 1;"></text><g class="c3-chart-arc c3-target c3-target-un"><g class=" c3-shapes c3-shapes-un c3-arcs c3-arcs-un"><path class=" c3-shape c3-shape c3-arc c3-arc-un" transform="" d="M-49.22649582305915,263.33849340531725A267.9,267.9 0 0,1 -73.31431504031106,-257.6730898059982L-43.98858902418663,-154.6038538835989A160.73999999999998,160.73999999999998 0 0,0 -29.535897493835492,158.00309604319037Z" style="fill: rgb(31, 119, 180); opacity: 1;"></path></g><text dy=".35em" class="" transform="translate(-214.0913151596445,9.898038856955004)" style="opacity: 1; text-anchor: middle; pointer-events: none;">42.6%</text></g><g class="c3-chart-arc c3-target c3-target-deux"><g class=" c3-shapes c3-shapes-deux c3-arcs c3-arcs-deux"><path class=" c3-shape c3-shape c3-arc c3-arc-deux" transform="" d="M-73.31431504031106,-257.6730898059982A267.9,267.9 0 0,1 -4.921243162373638e-14,-267.9L-2.952745897424183e-14,-160.73999999999998A160.73999999999998,160.73999999999998 0 0,0 -43.98858902418663,-154.6038538835989Z" style="fill: rgb(255, 127, 14); opacity: 1;"></path></g><text dy=".35em" class="" transform="translate(-29.60966999328745,-212.264763545174)" style="opacity: 1; text-anchor: middle; pointer-events: none;"></text></g><g class="c3-chart-arc c3-target c3-target-quatre"><g class=" c3-shapes c3-shapes-quatre c3-arcs c3-arcs-quatre"><path class=" c3-shape c3-shape c3-arc c3-arc-quatre" transform="" d="M1.6404143874578793e-14,-267.9A267.9,267.9 0 1,1 -49.22649582305915,263.33849340531725L-29.535897493835492,158.00309604319037A160.73999999999998,160.73999999999998 0 1,0 9.842486324747276e-15,-160.73999999999998Z" style="fill: rgb(44, 160, 44); opacity: 1;"></path></g><text dy=".35em" class="" transform="translate(213.4057486635518,19.77495480017487)" style="opacity: 1; text-anchor: middle; pointer-events: none;">52.9%</text></g></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-un" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-un"></g></g><g class="c3-chart-text c3-target c3-target-deux" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-deux"></g></g><g class="c3-chart-text c3-target c3-target-quatre" style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-quatre"></g></g></g></g><g clip-path="url(file:///#c3-1485081006314-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(file:///#c3-1485081006314-clip-xaxis)" transform="translate(0,574)" style="visibility: visible; opacity: 0;"><text class="c3-axis-x-label" transform="" x="800" dx="-0.5em" dy="-0.5em" style="text-anchor: end;"></text><g class="tick" transform="translate(400, 0)" style="opacity: 1;"><line y2="6" x1="0" x2="0"></line><text y="9" x="0" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><path class="domain" d="M0,6V0H800V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(file:///#c3-1485081006314-clip-yaxis)" transform="translate(0,0)" style="visibility: visible; opacity: 0;"><text class="c3-axis-y-label" transform="rotate(-90)" x="0" dx="-0.5em" dy="1.2em" style="text-anchor: end;"></text><g class="tick" transform="translate(0,570)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,498)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">5</tspan></text></g><g class="tick" transform="translate(0,425)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">10</tspan></text></g><g class="tick" transform="translate(0,353)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">15</tspan></text></g><g class="tick" transform="translate(0,281)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">20</tspan></text></g><g class="tick" transform="translate(0,208)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">25</tspan></text></g><g class="tick" transform="translate(0,136)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">30</tspan></text></g><g class="tick" transform="translate(0,64)" style="opacity: 1;"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">35</tspan></text></g><path class="domain" d="M-6,1H0V574H-6"></path></g><g class="c3-axis c3-axis-y2" transform="translate(800,0)" style="visibility: hidden; opacity: 0;"><text class="c3-axis-y2-label" transform="rotate(-90)" x="0" dx="-0.5em" dy="-0.5em" style="text-anchor: end;"></text><g class="tick" transform="translate(0,574)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" transform="translate(0,517)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" transform="translate(0,460)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" transform="translate(0,403)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" transform="translate(0,345)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" transform="translate(0,288)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" transform="translate(0,231)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" transform="translate(0,173)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" transform="translate(0,116)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" transform="translate(0,59)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" transform="translate(0,1)" style="opacity: 1;"><line x2="6" y2="0"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V574H6"></path></g></g><g transform="translate(0.5,600.5)" style="visibility: hidden;"><g clip-path="url(file:///#c3-1485081006314-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(file:///#c3-1485081006314-clip)" class="c3-brush" style="pointer-events: all;"><rect class="background" x="0" width="800" style="visibility: hidden; cursor: crosshair;"></rect><rect class="extent" x="0" width="0" style="cursor: move;"></rect><g class="resize e" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g><g class="resize w" transform="translate(0,0)" style="cursor: ew-resize; display: none;"><rect x="-3" width="6" height="6" style="visibility: hidden;"></rect></g></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(file:///#c3-1485081006314-clip-xaxis)" style="visibility: hidden; opacity: 0;"><g class="tick" transform="translate(400, 0)" style="opacity: 1;"><line y2="6" x1="0" x2="0"></line><text y="9" x="0" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><path class="domain" d="M0,6V0H800V6"></path></g></g><g transform="translate(0,578)"><g class="c3-legend-item c3-legend-item-un" style="visibility: visible; cursor: pointer;"><text x="337.953125" y="9" style="pointer-events: none;">un</text><rect class="c3-legend-item-event" x="323.953125" y="-5" width="41" height="22" style="fill-opacity: 0;"></rect><line class="c3-legend-item-tile" x1="321.953125" y1="4" x2="331.953125" y2="4" stroke-width="10" style="stroke: rgb(31, 119, 180); pointer-events: none;"></line></g><g class="c3-legend-item c3-legend-item-deux" style="visibility: visible; cursor: pointer;"><text x="378.953125" y="9" style="pointer-events: none;">deux</text><rect class="c3-legend-item-event" x="364.953125" y="-5" width="56.109375" height="22" style="fill-opacity: 0;"></rect><line class="c3-legend-item-tile" x1="362.953125" y1="4" x2="372.953125" y2="4" stroke-width="10" style="stroke: rgb(255, 127, 14); pointer-events: none;"></line></g><g class="c3-legend-item c3-legend-item-quatre" style="visibility: visible; cursor: pointer;"><text x="435.0625" y="9" style="pointer-events: none;">quatre</text><rect class="c3-legend-item-event" x="421.0625" y="-5" width="54.984375" height="22" style="fill-opacity: 0;"></rect><line class="c3-legend-item-tile" x1="419.0625" y1="4" x2="429.0625" y2="4" stroke-width="10" style="stroke: rgb(44, 160, 44); pointer-events: none;"></line></g></g><text class="c3-title" x="400" y="0"></text></svg><div class="c3-tooltip-container" style="position: absolute; pointer-events: none; display: none;"></div>
<p>this text should be visible as well</p>
</div>

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)

The SVG text node disappear after change its text content

svg:
<text xml:space="preserve" y="228" x="349.98" text-anchor="middle" stroke-width="0" stroke-linejoin="null" stroke-linecap="null" stroke-dasharray="null" stroke="#000000" fill="#000000" style="cursor: move; pointer-events: inherit;" font-size="24" font-family="serif" id="cur_b">cur_b</text> <text xml:space="preserve" y="222" x="103.98" text-anchor="middle" stroke-width="0" stroke-linejoin="null" stroke-linecap="null" stroke-dasharray="null" stroke="#000000" fill="#000000" style="cursor: move; pointer-events: inherit;" font-size="24" font-family="serif" id="cur_a">cur_a</text> <text xml:space="preserve" y="229" x="590.0211" text-anchor="middle" stroke-width="0" stroke-linejoin="null" stroke-linecap="null" stroke-dasharray="null" stroke="#000000" fill="#000000" style="cursor: move; pointer-events: inherit;" font-size="24" font-family="serif" id="cur_c">cur_c</text>
NSString* theJS = # "var theNode0 = document.getElementById('cur_a');
theNode0.textContent='200A';
theNode0.setAttribute('fill','#FF0000');
var theNode1 = document.getElementById('cur_c');
theNode1.textContent='200A';
theNode1.setAttribute('fill','#00FF00');"
[self.webView stringByEvaluatingJavaScriptFromString:theJS];
The SVG text node value is changed but disappeared after about one second.

How to change the css style for Google charts

In rails 3.2.13 project, I am using google charts for reports, but graph is not aligned properly.
Graph should be in responsive format(not fixed format). Now Height & Width of this chart is in 'px' format, I need to change in '%' format. How can I change CSS style for google chart?
I am using below gem for charts
gem 'reporter', '0.0.14.alpha' , :git => "https://github.com/kpvarma/reporter.git"
In views, outer div container contains 100% width
<div id="<%= container_id %>" style="float:left;width: 100%;"></div>
Generated HTML code is
<div id="self_users_chart" style="float: left; width: 100%; position: relative;"><div dir="ltr" style="position: relative; width: 676px; height: 200px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="676" height="200" style="overflow: hidden;"><defs id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_0"><rect x="84" y="38" width="508" height="124"></rect></clipPath></defs><rect x="0" y="0" width="676" height="200" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="604" y="38" width="60" height="31" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="604" y="38" width="60" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="621" y="48.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Jobs</text></g><rect x="604" y="38" width="12" height="12" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="604" y="57" width="60" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="621" y="67.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Applic...</text><rect x="621" y="57" width="43" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><rect x="604" y="57" width="12" height="12" stroke="none" stroke-width="0" fill="#dc3912"></rect></g></g><g><rect x="84" y="38" width="508" height="124" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(#_ABSTRACT_RENDERER_ID_0)"><g><rect x="84" y="161" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="130" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="100" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="69" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="38" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect></g><g><rect x="84" y="161" width="508" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g><g><path d="M211.25,69.25L464.75,130.75" stroke="#3366cc" stroke-width="2" fill-opacity="1" fill="none"></path><path d="M211.25,161.5L464.75,130.75" stroke="#dc3912" stroke-width="2" fill-opacity="1" fill="none"></path></g></g><g></g><g><g><text text-anchor="middle" x="211.25" y="176.86666666666665" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">13 Feb, 2014</text></g><g><text text-anchor="middle" x="464.75" y="176.86666666666665" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">17 Feb, 2014</text></g><g><text text-anchor="end" x="72" y="165.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">0</text></g><g><text text-anchor="end" x="72" y="134.95" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">1</text></g><g><text text-anchor="end" x="72" y="104.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">2</text></g><g><text text-anchor="end" x="72" y="73.45" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">3</text></g><g><text text-anchor="end" x="72" y="42.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">4</text></g></g></g><g><g><text text-anchor="middle" x="338" y="193.5333333333333" font-family="Arial" font-size="12" font-style="italic" stroke="none" stroke-width="0" fill="#222222">Time</text></g><g><text text-anchor="middle" x="36.7" y="100" font-family="Arial" font-size="12" font-style="italic" transform="rotate(-90 36.7 100)" stroke="none" stroke-width="0" fill="#222222">Events</text></g></g><g></g></svg></div></div><div style="display: none; position: absolute; top: 210px; left: 686px; white-space: nowrap; font-family: Arial; font-size: 12px;">Applic...</div><div></div></div>

I'm not sure if the below would be helping in your conversion but the standard conversion is as below.
1em = 12pt = 16px = 100%.
It can be found at this link
please update if this is helpful. Also you can refer Converting width from percentage to pixels for similar question.
Also there is a calculator online found here, where in you give the pixel-width and you get in percentage.
Happy Coding :-)

html with css convert to word doc using php

I need to convert Graph html with css to word file.This is my code.i need to export word docment file .
<?php
include("html_to_doc.inc.php");
$content = '<div id="piechart" style="width: 900px; height: 500px; position: relative;">
<div dir="ltr" style="position: relative; width: 900px; height: 500px;">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="900" height="500" style="overflow: hidden;"><defs id="defs"></defs>
<rect x="0" y="0" width="900" height="500" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="542" y="96" width="198" height="37" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="542" y="96" width="198" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="561" y="107.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">male</text></g><rect x="542" y="96" width="14" height="14" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="542" y="119" width="198" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="561" y="130.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">femle</text></g><rect x="542" y="119" width="14" height="14" stroke="none" stroke-width="0" fill="#dc3912"></rect></g></g><g><path d="M340,251L266.7041014722907,386.4389576857993A154,154,0,0,1,340,97L340,251A0,0,0,0,0,340,251" stroke="#ffffff" stroke-width="1" fill="#dc3912"></path><text text-anchor="start" x="204.75670248578234" y="226.71643359920404" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#ffffff">42.1%</text></g>
<g><path d="M340,251L340,97A154,154,0,1,1,266.7041014722907,386.4389576857993L340,251A0,0,0,1,0,340,251" stroke="#ffffff" stroke-width="1" fill="#3366cc"></path>
<text text-anchor="start" x="435.24329751421766" y="285.083566400796" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#ffffff">57.9%</text></g><g></g></svg></div></div><div style="display: none; position: absolute; top: 510px; left: 910px; white-space: nowrap; font-family: Arial; font-size: 14px; font-weight: bold;">8 (42.1%)</div><div></div></div>';
$f_name="test.doc";
$my_file = 'export_doc_html.html';
$handle = fopen($my_file, 'w') or die('Cannot open file: '.$my_file);
$data = $content;
fwrite($handle, $data);
$htmltodoc= new HTML_TO_DOC();
$htmltodoc->createDoc("export_doc_html.html",$f_name);
//$htmltodoc->createDocFromURL("http://yahoo.com","test");
?>

Categories

Resources