Develop Reference

Add a tick selected css

.showcase-components-colorlist color {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
<div class="showcase-components-colorlist color">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
How to add a check mark to one of the circles as generated by the code above.

One way to do this is through pseudo content. You need to give the element which you'll set the pseudo content a relative container. Then, you create your pseudo content (in this case, a check mark). The positioning will be relative to the parent element's dimensions.
.showcase-components-colorlist {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.showcase-components-colorlist.selected::before {
content: '✅';
position: absolute;
left: 11px;
top: 9px;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1">
</circle>
</svg>
</div>
<div class="showcase-components-colorlist selected">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>

Create your own <svg-option> Native JavaScript Web Component.
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
creates:
<script>
customElements.define("svg-option",class extends HTMLElement{
connectedCallback(){
this.style.display = "inline-block";
this.innerHTML=`<svg viewBox="0 0 50 50">
<circle cx="50%" cy="50%" r="49%" fill="${this.getAttribute("fill") || "green"}"/>
<circle cx="50%" cy="50%" r="30%" fill="${this.getAttribute("selected-fill") || "beige"}" visibility="hidden"/>
</svg>`;
this.select();
this.onclick = (evt) => this.toggle();
}
select(state = this.hasAttribute("selected")) {
this.querySelector("circle:nth-child(2)").setAttribute("visibility" , state ? "visible" :"hidden");
}
toggle(){
this.select( this.toggleAttribute("selected") );
}
})
</script>
<style>
svg-option {
--svg-option-size:180px;
width: var(--svg-option-size);
height: var(--svg-option-size);
cursor: pointer;
}
svg-option[selected]{
background:lightgreen;
}
svg-option:not([selected]){
background:pink;
}
</style>
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>

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>

Click event doesn't work on firefox for small objects

I have drawn two rectangles using path in svg. Click event works fine on large rectangle, but the same doesn't works on small rectangle.
Image for bigger rectangle:
Here is my code snippet:
`
<svg id="svgDocument" style="overflow: hidden; z-index: 0; float: left; position: relative; height: 600px; width: 900px;
margin-top: 0px; margin-left: 0px;" xmlns="http://www.w3.org/2000/svg">
<g id="rootGroup" transform="scale(8192) translate(-117.71870117262006, -202.511474609375)">
<path id="data" stroke-linecap="square" stroke-linejoin="round" d="M117.7315673828125,202.5401611328125,117.7315673828125,202.5142822265625,
117.763427734375,202.5142822265625,117.763427734375,202.5401611328125Z" fill="Blue" stroke-width="0.0006103515625" stroke="red" class="mapShape"
nodeValue="Blue"/>
<path id="data1" stroke-linecap="square" stroke-linejoin="round" d="M117.7685546875,202.54638671874997,117.7685546875,202.54309082031253,117.7730712890625,
202.54309082031253,117.7730712890625,202.54638671874997Z" fill="Blue" stroke-width="0.0006103515625" stroke="red" class="mapShape" nodeValue="Blue"/>
</g>
</svg>
<script>
document.getElementById('data').addEventListener('click', function (e){
alert('Event triggered for big rect');
});
document.getElementById('data1').addEventListener('click', function (e){
alert('Event triggered for small rect');
});
</script>
Here is my fiddle link:Sample
I have tried using mouseup, mousedown, mousemove, mouseenter events, but none of them works for small rectangle.
Kindly help me to resolve this issue.

If you try this code:
$(document).ready(function(){
$(this).on('click', function(e){
alert($(e.target).attr('id'));
});
});
Paths you have given are wrong:
<svg id="svgDocument" style="overflow: hidden; z-index: 0; float: left; position: relative; height: 600px; width: 900px;
margin-top: 0px; margin-left: 0px;" xmlns="http://www.w3.org/2000/svg">
<g id="rootGroup">
<path id="data" stroke-linecap="square" stroke-linejoin="round" d="M150 0 L75 200 L225 200 Z" fill="Blue" stroke-width="0.0006103515625" stroke="red" class="mapShape"
nodeValue="Blue"/>
</g>
<g id="g2">
<path id="data1" stroke-linecap="square" stroke-linejoin="round" d="M250 0 L75 200 L225 200 Z" fill="Red" stroke-width="0.0006103515625" stroke="red" class="mapShape" nodeValue="Blue"/>
</g>
</svg>
This selects correct ID on 'click' event.
jsfiddle: https://jsfiddle.net/k4p6suy4/1/

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)

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");
?>