I am using animateMotion to have an animation on my path. Here is the simple code:
<!DOCTYPE html>
<html>
<head>
<title>Example Of Many Things!</title>
</head>
<body>
<svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
<g id="3" class="cluster loop-node">
</g>
<g id="4" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
<text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
<text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
<g id="4t5" class="edge">
<path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
<polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>
<g id="6" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
<text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
</g>
<g id="5t6" class="edge">
<path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
<polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
</g>
</g>
</svg>
</body>
<script type="text/javascript">
var g8t3 = document.getElementById('4t5');
var path = document.getElementById('4t5').getElementsByTagName('path')[0]
path.setAttribute("id", "path4t5");
var circleAnim = ' <circle r="1" fill="green"><animateMotion id="myMoveAnimation4t5" dur="3s" begin="0s;myMoveAnimation5t6.end"><mpath xlink:href="#path4t5"></mpath></animateMotion></circle>'
g8t3.insertAdjacentHTML( 'beforeend', circleAnim );
// // now move circle on the path
var g8t4 = document.getElementById('5t6');
var path = document.getElementById('5t6').getElementsByTagName('path')[0]
path.setAttribute("id", "path5t6");
var circleAnim = ' <circle r="1" fill="green"><animateMotion id="myMoveAnimation5t6" dur="3s" begin="myMoveAnimation4t5.end"><mpath xlink:href="#path5t6"></mpath></animateMotion></circle>'
g8t4.insertAdjacentHTML( 'beforeend', circleAnim );
</script></html>
As you can see, there is a green circle on the path which is moving, which is correct.
But there is something weird: There is also another green circle on the left bottom of the graph, which is redundant. I don't how it appears and how I can get rid of it.
Any help?
Instead of appending two circles in your svg, append the two <animateMotion>s inside a single circle. Also, you'll probably want to set your <animationMotion>'s fill attribute to "fill".
As you wrote it, when your circles are in idle state, they will come back to their initial position (unset).
var g8t3 = document.getElementById('4t5');
var path = document.getElementById('4t5').getElementsByTagName('path')[0]
path.setAttribute("id", "path4t5");
var circleAnim = '<circle r="1" fill="green">' +
// first part of the anim
'<animateMotion id="myMoveAnimation4t5" dur="3s" begin="0s;myMoveAnimation5t6.end"><mpath xlink:href="#path4t5" fill="freeze"></mpath></animateMotion>' +
// second part of the anim
'<animateMotion id="myMoveAnimation5t6" dur="3s" begin="myMoveAnimation4t5.end" fill="freeze"><mpath xlink:href="#path5t6"></mpath></animateMotion>' +
'</circle>'
g8t3.insertAdjacentHTML('beforeend', circleAnim);
<svg width="465pt" height="188pt" viewBox="0.00 0.00 465.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
<g id="3" class="cluster loop-node">
</g>
<g id="4" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M92.6667,-53C92.6667,-53 119.3333,-53 119.3333,-53 121.6667,-53 124,-55.3333 124,-57.6667 124,-57.6667 124,-62.3333 124,-62.3333 124,-64.6667 121.6667,-67 119.3333,-67 119.3333,-67 92.6667,-67 92.6667,-67 90.3333,-67 88,-64.6667 88,-62.3333 88,-62.3333 88,-57.6667 88,-57.6667 88,-55.3333 90.3333,-53 92.6667,-53"></path>
<text text-anchor="start" x="100.6663" y="-57.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:12</text>
</g>
<g id="5" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M167.3333,-25C167.3333,-25 195.6667,-25 195.6667,-25 199.3333,-25 203,-28.6667 203,-32.3333 203,-32.3333 203,-39.6667 203,-39.6667 203,-43.3333 199.3333,-47 195.6667,-47 195.6667,-47 167.3333,-47 167.3333,-47 163.6667,-47 160,-43.3333 160,-39.6667 160,-39.6667 160,-32.3333 160,-32.3333 160,-28.6667 163.6667,-25 167.3333,-25"></path>
<text text-anchor="start" x="176.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:13</text>
</g>
<g id="4t5" class="edge">
<path fill="none" stroke="#717070" d="M124.2764,-54.1903C133.5025,-51.2575 144.8656,-47.6454 155.028,-44.4149" id="path4t5"></path>
<polygon fill="#717070" stroke="#717070" points="155.6709,-46.0469 159.9058,-42.8644 154.6106,-42.7114 155.6709,-46.0469"></polygon>
<g id="6" class="node cu-node">
<path fill="#ffffff" stroke="#a4a4a4" d="M246.3333,-25C246.3333,-25 274.6667,-25 274.6667,-25 278.3333,-25 282,-28.6667 282,-32.3333 282,-32.3333 282,-39.6667 282,-39.6667 282,-43.3333 278.3333,-47 274.6667,-47 274.6667,-47 246.3333,-47 246.3333,-47 242.6667,-47 239,-43.3333 239,-39.6667 239,-39.6667 239,-32.3333 239,-32.3333 239,-28.6667 242.6667,-25 246.3333,-25"></path>
<text text-anchor="start" x="255.1663" y="-33.6" font-family="font-awesome" font-size="6.00" fill="#000000">1:14</text>
</g>
<g id="5t6" class="edge">
<path fill="none" stroke="#717070" d="M203.0871,-36C212.5795,-36 223.8229,-36 233.8327,-36" id="path5t6"></path>
<polygon fill="#717070" stroke="#717070" points="233.939,-37.7501 238.939,-36 233.939,-34.2501 233.939,-37.7501"></polygon>
</g>
</g>
</g>
</svg>
I am trying to convert an svg graph to a png image. To do so, I am first converting my svg graph to a canvas using the library 'canvg', and then I use the method canvas.toDataURL('image/png') to finally convert my graph into a png image. The reason why I am using the library 'canvg' is because I needed my code to work on ie9 and I couldn't find another way around, although I haven't tested on it yet.
All seems to work perfectly until I get the result, when I have noticed that all my paths are thicker than in the initial svg graph. So, trying to find out what I was doing wrong, I start doing small tests on http://canvg.github.io/canvg/examples/index.htm. It is then when I noticed that if I do not set the attribute fill to none either inline or in a css file then the path is thicker than one pixel. As my svg graph have some of the styles in a separate css file, I tried to flatten them (I took the idea from Convert embedded SVG to PNG in-place):
function flatten_svg_element_css(target){
if (target.nodeType != Node.TEXT_NODE) {
var cssStyle = window.getComputedStyle(target);
if (cssStyle) {
var fillStyle = '';
if( cssStyle.getPropertyValue('fill') == 'none' && cssTyle.getPropertyValue('stroke') == 'rgb(0, 0, 0)'){
fillStyle = 'fill:none; stroke:rgb(0, 0, 0);';
}
target.style.cssText = fillStyle + cssStyle.cssText;
}
}
}
function flatten_svg_css(target) {
for (var i = 0; i < target.childNodes.length; i++) {
var child = target.childNodes[i];
if (child.childNodes != null && child.childNodes.length > 0) {
flatten_svg_css(child);
}
else{
flatten_svg_element_css(child);
}
}
}
But it seems that it never gets into the condition cssStyle.getPropertyValue('fill') == 'none' && cssTyle.getPropertyValue('stroke') == 'rgb(0, 0, 0).
When the target is a path, the function getPropertyValue('fill') returns rgb(0, 0, 0) instead of none. But if I test directly the element with Firebug window.getComputedStyle(d3.select('.domain').node()).getPropertyValue('fill'), I got the value to none.
This is the svg graph that I am trying to convert to a png image. The graph has been generated using the library 'dc.js':
<svg width="1166" height="317">
<g>
<g class="grid-line horizontal" transform="translate(50,10)">
<line x1="1" y1="265" x2="1066" y2="265" opacity="0" />
<line x1="1" y1="239" x2="1066" y2="239" opacity="0" />
<line x1="1" y1="212" x2="1066" y2="212" opacity="0" />
<line x1="1" y1="186" x2="1066" y2="186" opacity="0" />
<line x1="1" y1="159" x2="1066" y2="159" opacity="0" />
<line x1="1" y1="133" x2="1066" y2="133" opacity="0" />
<line x1="1" y1="106" x2="1066" y2="106" opacity="0" />
<line x1="1" y1="80" x2="1066" y2="80" opacity="0" />
<line x1="1" y1="53" x2="1066" y2="53" opacity="0" />
<line x1="1" y1="27" x2="1066" y2="27" opacity="0" />
<line x1="1" y1="0" x2="1066" y2="0" opacity="0" />
</g>
<g class="chart-body" transform="translate(50, 10)"
clip-path="url(http://127.0.0.1:1234/index.jsp?gwt.codesvr=127.0.0.1:9997#analysis_charts_first_chart-clip)">
<g class="stack _0">
<rect class="bar" fill="#1f77b4" y="133" height="132" width="532"
x="1">
<title>ds1 - missing: 50%</title>
</rect>
<rect class="bar" fill="#1f77b4" y="133" height="132" width="532"
x="534">
<title>ds3 - missing: 50%</title>
</rect>
</g>
<g class="stack _1">
<rect class="bar" fill="#ffbb78" y="87" height="46" width="532"
x="1">
<title>ds1 - something else: 17%</title>
</rect>
<rect class="bar" fill="#ffbb78" y="133" height="0" width="532"
x="534">
<title>ds3 - something else: 0%</title>
</rect>
</g>
<g class="stack _2">
<rect class="bar" fill="#aec7e8" y="0" height="87" width="532"
x="1">
<title>ds1 - total: 33%</title>
</rect>
<rect class="bar" fill="#aec7e8" y="0" height="133" width="532"
x="534">
<title>ds3 - total: 50%</title>
</rect>
</g>
</g>
<g class="axis x" transform="translate(50,275)">
<g class="tick" style="opacity: 1;" transform="translate(266.5,0)">
<line y2="6" x2="0" />
<text dy=".71em" style="text-anchor: middle;" y="9" x="0">ds1
</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(799.5,0)">
<line y2="6" x2="0" />
<text dy=".71em" style="text-anchor: middle;" y="9" x="0">ds3
</text>
</g>
<path class="domain" d="M0,6V0H1066V6" />
</g>
<text class="x-axis-label" transform="translate(583,305)"
text-anchor="middle">Datasets</text>
<g class="axis y" transform="translate(50,10)">
<g class="tick" style="opacity: 1;" transform="translate(0,265)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">0%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,239)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">10%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,212)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">20%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,186)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">30%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,159)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">40%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,133)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">50%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,106)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">60%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,80)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">70%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,53)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">80%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,27)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">90%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,0)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">100%</text>
</g>
<path class="domain" d="M-6,0H0V265H-6" />
</g>
<text transform="translate(12,142.5),rotate(-90)" class="y-axis-label y-label"
text-anchor="middle">Data Quality</text>
</g>
<defs>
<clipPath id="analysis_charts_first_chart-clip">
<rect width="1066" height="265" transform="translate(-0, -0)" />
</clipPath>
</defs>
</svg>
So I guess I am doing something wrong when trying to flatten the styles recursively.
I'm trying to convert an SVG graph I generated into a printable image. From my research, I assumed I'd have to somehow make a canvas out of the SVG, then make an image out of that. However, every example I've found uses an image tag inside the svg, or it's some static file that doesn't change. Here's one of the generated graphs I'm trying to print out.
<svg width="603" height="250">
<g>
<path d="M0,250Q9.380000000000003,235.10638297872342,20.1,234.04255319148936C36.18,232.4468085106383,134.67000000000002,257.4468085106383,160.8,234.04255319148936S267.33,7.978723404255318,281.4,0S297.48,131.38297872340425,301.5,154.25531914893617S307.53000000000003,221.80851063829786,321.6,228.72340425531914S428.13000000000005,227.12765957446808,442.20000000000005,223.40425531914894S450.24,190.95744680851064,462.3,191.48936170212767S550.74,223.40425531914892,562.8,228.72340425531914S578.88,242.5531914893617,582.9,244.68085106382978Q585.5799999999999,246.09929078014184,603,250L603,250Q585.5799999999999,250,582.9,250C578.88,250,574.8599999999999,250,562.8,250S474.36,250,462.3,250S456.27000000000004,250,442.20000000000005,250S335.67,250,321.6,250S305.52,250,301.5,250S295.46999999999997,250,281.4,250S186.93,250,160.8,250S36.18,250,20.1,250Q9.380000000000003,250,0,250Z" class="area" fill="rgba(55,173,223,0.25)"></path>
</g>
<g class="y_grid">
<g style="opacity: 1;" transform="translate(0,250)">
<line class="tick" x2="603" y2="0"></line>
<text x="-3" y="0" dy=".32em" text-anchor="end">0</text>
</g>
<g style="opacity: 1;" transform="translate(0,143.61702127659575)">
<line class="tick" x2="603" y2="0"></line>
<text x="-3" y="0" dy=".32em" text-anchor="end">20</text>
</g>
<g style="opacity: 1;" transform="translate(0,37.2340425531915)">
<line class="tick" x2="603" y2="0"></line>
<text x="-3" y="0" dy=".32em" text-anchor="end">40</text>
</g>
<path class="domain" d="M603,0H0V250H603"></path>
</g>
<g class="x_grid_d3">
<g style="opacity: 1;" transform="translate(0.37222222222222223,0)">
<line class="tick" x2="0" y2="250"></line>
<text x="0" y="253" dy=".71em" text-anchor="middle">Apr 15</text>
</g>
<g style="opacity: 1;" transform="translate(116.69166666666668,0)">
<line class="tick" x2="0" y2="250"></line>
<text x="0" y="253" dy=".71em" text-anchor="middle">Apr 20</text>
</g>
<g style="opacity: 1;" transform="translate(233.0111111111111,0)">
<line class="tick" x2="0" y2="250"></line>
<text x="0" y="253" dy=".71em" text-anchor="middle">Apr 26</text>
</g>
<g style="opacity: 1;" transform="translate(349.3305555555556,0)">
<line class="tick" x2="0" y2="250"></line>
<text x="0" y="253" dy=".71em" text-anchor="middle">May 02</text>
</g>
<g style="opacity: 1;" transform="translate(465.65000000000003,0)">
<line class="tick" x2="0" y2="250"></line>
<text x="0" y="253" dy=".71em" text-anchor="middle">May 08</text>
</g>
<g style="opacity: 1;" transform="translate(581.9694444444444,0)">
<line class="tick" x2="0" y2="250"></line>
<text x="0" y="253" dy=".71em" text-anchor="middle">May 13</text>
</g>
<path class="domain" d="M0,250V0H603V250"></path>
</g>
</svg>
Is it possible to get this thing printed somehow? Also, I need to do this all client side, no help from the server if possible.
Also, I've tried using canvg, but all I get is a black box. Here's that bit of code:
svg = $('.full-graph').html()
canvg 'canvas', svg, renderCallback: ->
image = document.getElementById('canvas').toDataURL 'image/png'
window.open image
You can use Apache batik to conver the svg into a jpg/png.
Depending on the browser (http://caniuse.com/#feat=svg) you can load an svg in a separate window/tab or use it as the src of an img tag. In either case the browser should print it like any other image.
Be sure to include the version and other required attributes in the svg tag.
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="640px" height="640px">
If you are generating the svg on the client, you can try encoding it as a data url (http://caniuse.com/#feat=datauri) and using the data url as the img src or anchor href.