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>
Related
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);
});
I have made a simple donut chart (based on the Google Visualization example at https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#donut).
As it only shows one slice (the other is transparent/invisible), I'd like to move the <text> element to the centre of the chart, i.e., within the hole. I know that it simply involves updating the 'x' and 'y' coordinate attributes but I'm having trouble accessing them in the DOM, particularly as there are no IDs/classes to hang onto.
So, how can I target the <text> element of the penultimate <g> element in this code? I'd like to change x="239.45622566746957" y="285.69328724429994" to x="200" y="200"
Javascript preferred but jQuery also fine...
<div id="donutchart" style="position: relative;">
<div style="position: relative; width: 560px; height: 412px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="560" height="412" style="overflow: hidden;" aria-label="A chart.">
<defs id="defs"/>
<rect x="0" y="0" width="560" height="412" stroke="none" stroke-width="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="107" y="58.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Time spent at work</text>
</g>
<g>
<rect x="340" y="79" width="113" height="31" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<rect x="340" y="79" width="113" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="357" y="89.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Work</text>
</g>
<rect x="340" y="79" width="12" height="12" stroke="none" stroke-width="0" fill="#b1d123"/>
</g>
<g>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="1" fill="none"/>
</g>
</g>
<g>
<path d="M179.37407264075225,181.84279120188216L127.43518160188061,144.10697800470538A107,107,0,0,1,214,100L214,164.2A42.800000000000004,42.800000000000004,0,0,0,179.37407,181.84279" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"/>
<text text-anchor="start" x="163.54377433253043" y="136.70671275570004" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">15%</text>
</g>
<g>
<path d="M214,164.2L214,100A107,107,0,1,1,127.43518,144.10697L179.37407264075225,181.84279120188216A42.800000000000004,42.800000000000004,0,1,0,214,164.19999" stroke="#ffffff" stroke-width="1" fill="#b1d123"/>
<text text-anchor="start" x="239.45622566746957" y="285.69328724429994" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">85%</text>
</g>
<g/>
</svg>
</div>
</div>
<div style="display: none; position: absolute; top: 422px; left: 570px; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold;">85 (85%)
</div>
<div></div>
</div>
Use a selector like this:
document.querySelector('#donutchart svg > g:nth-last-child(2) text');
This will not work in IE8, as older versions of IE do not support SVG. If you need to support IE8, you will need a selector for the equivalent VML structure.
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.
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 :-)
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");
?>