Skip to content

Instantly share code, notes, and snippets.

@rbu

rbu/gauge.svg

Created January 13, 2015 15:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rbu/6cda4f71909d0f5e4f11 to your computer and use it in GitHub Desktop.
Save rbu/6cda4f71909d0f5e4f11 to your computer and use it in GitHub Desktop.
Download ZIP
d3 bug report
Display the source blob
Display the rendered blob
Raw
gauge.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="100%"
viewBox="0 0 446 182">
<g id="logo">
<linearGradient id="logo-gradient-1" gradientUnits="userSpaceOnUse" x1="37.2417" y1="7.0552" x2="97.9669" y2="67.7803">
<stop offset="0" stop-color="#F9A03C"/>
<stop offset="1" stop-color="#F7974E"/>
</linearGradient>
<linearGradient id="logo-gradient-2" gradientUnits="userSpaceOnUse" x1="-8.0391" y1="17.2148" x2="45.724" y2="70.978">
<stop offset="0" stop-color="#F9A03C"/>
<stop offset="1" stop-color="#F7974E"/>
</linearGradient>
<linearGradient id="logo-gradient-3" gradientUnits="userSpaceOnUse" x1="11.9321" y1="36.5513" x2="66.3901" y2="91.0092">
<stop offset="0" stop-color="#F9A03C"/>
<stop offset="1" stop-color="#F7974E"/>
</linearGradient>
<linearGradient id="logo-gradient-4" gradientUnits="userSpaceOnUse" x1="1.6533" y1="-1.6533" x2="86.899" y2="83.5924">
<stop offset="0" stop-color="#F26D58"/>
<stop offset="1" stop-color="#F9A03C"/>
</linearGradient>
<linearGradient id="logo-gradient-5" gradientUnits="userSpaceOnUse" x1="45.2446" y1="-9.5483" x2="108.0998" y2="53.3068">
<stop offset="0" stop-color="#B84E51"/>
<stop offset="1" stop-color="#F68E48"/>
</linearGradient>
<linearGradient id="logo-gradient-6" gradientUnits="userSpaceOnUse" x1="6.6323" y1="64.3193" x2="49.6788" y2="107.3658">
<stop offset="0" stop-color="#F9A03C"/>
<stop offset="1" stop-color="#F7974E"/>
</linearGradient>
<path fill="url(#logo-gradient-1)" d="M95.82,65.857c0.043-0.418,0.074-0.84,0.098-1.264c0.029-0.502-30.211-29.194-30.211-29.194h-0.723C64.984,35.399,95.635,67.73,95.82,65.857z"/>
<path fill="url(#logo-gradient-2)" d="M31.302,55.904c-0.04,0.088-0.08,0.176-0.121,0.264c-0.043,0.092-0.087,0.184-0.131,0.275c-0.964,2.01,13.495,16.145,14.658,14.428c0.053-0.076,0.106-0.156,0.159-0.232c0.059-0.09,0.117-0.176,0.175-0.266C46.972,68.961,31.715,54.986,31.302,55.904z"/>
<path fill="url(#logo-gradient-3)" d="M51.734,75.781c-0.041,0.09-0.332,0.582-0.598,0.842c-0.045,0.09,14.115,14.133,14.115,14.133h1.275C66.527,90.756,53.234,76.375,51.734,75.781z"/>
<path fill="url(#logo-gradient-4)" d="M95.938,64.338c-0.662,14.68-12.807,26.418-27.645,26.418h-2.006L51.469,76.158c1.219-1.719,2.352-3.5,3.361-5.357h13.463c4.258,0,7.723-3.463,7.723-7.723c0-4.258-3.465-7.723-7.723-7.723h-7.967c0.607-3.209,0.939-6.518,0.939-9.903c0-3.437-0.338-6.793-0.967-10.053h4.949l30.604,30.155C95.887,65.15,95.916,64.746,95.938,64.338z M8.05,0H0v19.955h8.05c14.06,0,25.5,11.437,25.5,25.497c0,3.825-0.853,7.456-2.369,10.716l14.686,14.471c4.822-7.215,7.641-15.877,7.641-25.187C53.508,20.39,33.115,0,8.05,0z"/>
<path fill="url(#logo-gradient-5)" d="M68.293,0H35.695c7.962,4.861,14.555,11.754,19.047,19.955h13.551c4.258,0,7.723,3.463,7.723,7.723c0,4.259-3.465,7.722-7.723,7.722h-3.045l30.604,30.155c0.072-0.818,0.117-1.641,0.117-2.477c0-6.727-2.414-12.898-6.422-17.701c4.008-4.801,6.422-10.973,6.422-17.699C95.969,12.417,83.555,0,68.293,0z"/>
<path fill="url(#logo-gradient-6)" d="M66.287,90.756H35.928C42.039,86.982,47.322,82,51.469,76.158L66.287,90.756z M45.867,70.639L31.182,56.168C27.125,64.887,18.284,70.951,8.05,70.951H0v19.953h8.05C23.804,90.904,37.709,82.846,45.867,70.639z"/>
</g>
</svg>
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script>
$(function() {
window.svgs = [];
window.embeds = [];
var second = 1000;
function empty() {
$(".playground").empty();
}
function removeFirst() {
/*
// @D3 Workaround:
// This piece of code makes it less like that the problem occurs
// does not reliably prevent it. There is still a race condition between
// element DOM removal and d3.timer.stop() actually running (at which point
// the DOM node can already be inaccessible)
function stopAnimationOnSvg(svg) {
svg.select('#logo').interrupt().transition();
d3.timer.flush();
}
stopAnimationOnSvg(window.svgs[0]);
*/
$(".playground").children().first().remove();
}
function render() {
var embed = document.createElement("embed")
embed.className = 'gauge-svg'
embed.setAttribute("src", "gauge.svg")
embed.setAttribute("type", "image/svg+xml")
embed = $(embed);
$(".playground").append(embed);
embed[0].onload = function() {
didLoadSvg(embed);
};
}
function didLoadSvg(embed) {
var svg = d3.select(embed[0].getSVGDocument());
svgs.push(svg);
// @D3: Workaround commenting this in keeps a reference and does not trigger the bug
//embeds.push(embed[0]);
svg.select('#logo')
.transition()
.duration(5*second)
.attr('transform', function(d, i) {
return "translate(100,100) rotate (180) scale(2)";
});
}
var startLoading = new Date();
function clock() {
now = new Date();
difference = (now - startLoading) / 1000;
$('.clock').text(difference);
}
window.clockInterval = setInterval(clock, 10);
window.onerror = function(e) {
clearInterval(window.clockInterval);
$('.clock').append("... got Exception: " + e + '. ')
}
setTimeout(render, 0)
setTimeout(removeFirst, 1*second)
// @D3: Comment in this line to see that future animations also do not run
// setTimeout(render, 4000)
});
</script>
</head>
<body>
<div class="clock"></div>
<div class="playground"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment