Skip to content

Instantly share code, notes, and snippets.

@vaseker

vaseker/index.html

Last active August 29, 2015 14:06
Show Gist options
  • Save vaseker/01f2518b6be3d6196a03 to your computer and use it in GitHub Desktop.
Save vaseker/01f2518b6be3d6196a03 to your computer and use it in GitHub Desktop.
Download ZIP
FF SVG bug demo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>F1 track</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
<object data="../src/track.min.svg" type="image/svg+xml" id="track"></object>
<input type="button" value="Start" onclick="start()">
<input type="button" value="Pause" onclick="pause()">
<input type="button" value="Segment1" onclick="segment(195)">
<input type="button" value="Segment2" onclick="segment(490)">
<script src="../src/js/script.js"></script>
</body>
</html>
Raw
script.js
var carDistance = 0,
move = (function () {
var map = document.getElementById('track'), svgContent, car, path, start, startPoint, carStartPoint, trackLength, pos, posP = {};
if (!map) {
return;
}
var onload = function () {
svgContent = map.contentDocument;
car = svgContent.getElementById('Car');
path = svgContent.getElementById('Track');
start = svgContent.getElementById('Start');
carStartPoint = { x: 494, y: 352 };
startPoint = carStartPoint.x + ',' + carStartPoint.y;
pos = path.getPointAtLength(carDistance);
trackLength = path.getTotalLength();
};
if (map.contentDocument && map.contentDocument.URL !== 'about:blank') {
setTimeout(onload, 0);
}
map.addEventListener('load', onload, false);
return function () {
if (!car || !path) {
return;
}
carDistance += 2.5;
if (carDistance > trackLength) {
carDistance = 0;
}
var pos1 = path.getPointAtLength(carDistance),
angle = Math.atan2(pos.y - pos1.y, pos.x - pos1.x) * 180 / Math.PI;
pos = pos1;
var x = posP.x = pos.x - carStartPoint.x,
y = posP.y = pos.y - carStartPoint.y;
car.setAttribute('transform', 'translate(' + x + ', ' + y + ')rotate(' + angle + ',' + startPoint + ')');
};
})(),
animation,
start = function () {
animation = setInterval(move, 50);
},
pause = function () {
clearInterval(animation);
},
segment = function (distance) {
carDistance = distance;
move();
};
Display the source blob
Display the rendered blob
Raw
track.min.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 379" width="550" height="379">
<path id="Track" stroke="#1E1E1E" stroke-width="5.2" stroke-miterlimit="10" d="M541.205 304.086V345.9c0 3.097-.834 5.905-5.663 5.905h-115.8s-51.113-2.198-78.468-27.256C317.57 302.835 220.1 216.802 217.65 214.597s-1.955-6.883 1.353-8.79c3.308-1.91 7.825-5.273 10.03-7.06 1.55-1.255 5.534-4.22 6.74-7.78 1.208-3.56 1.47-8.28 1.803-20.45.298-10.91-.186-58.69-29.15-72.648-31.8-15.324-54.056 5.97-60.784 24.508-3.387 9.33-7.56 22.122-10.73 31.982-6.53 20.308-14.607 14.327-28.084 7.247-13.478-7.08-79.432-43.198-89.453-48.824-10.02-5.626-11.987-9.496-3.88-19.593S47.13 51.504 52.407 44.41c5.048-6.79 7.58-8.25 21.328-10.083 9.628-1.282 22.083-2.732 25.35-3.028 3.14-.286 5.07.364 8.553 5.488s26.11 38.695 29.648 43.783c3.537 5.088 7.563 4.854 13.274 3.27s22.46-6.46 27.282-7.915c4.822-1.455 6.48-4.724 9.032-8.672 2.55-3.948 23.262-46.438 26.025-51.914s6.446-6.596 12.606-2.32c6.16 4.277 43.063 32.25 50.33 38.248 25.81 21.307 28.932 38.425 28.047 89.286-.99 56.957 16.762 89.14 30.707 108.465 10.295 14.266 32.977 32.837 36.403 36.154 3.115 3.016 1.354 7.133-1.238 9.41-2.592 2.278-5.893 4.898-9.056 7.924-3.874 3.705.34 9.084 3.032 11.808 3.334 3.374 8.828 7.757 17.118 11.143 11.14 4.55 27.017 6.566 35.373 2.434 4.745-2.347 4.05-5.99 3.926-9.178-.09-2.29-.582-9.6-.448-13.127.16-4.24 3.753-7.328 7.894-7.408h107.368s6.24 2.404 6.24 5.904z" fill="none"/>
<circle id="Start" fill="#1D1D1B" cx="484.844" cy="352.072" r="3.927"/>
<g id="Finish"><circle id="Point" fill="#1D1D1B" cx="511.47" cy="351.998" r="5.281"/><defs><filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="507.547" y="348.071" width="7.847" height="7.85"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/></filter></defs><mask maskUnits="userSpaceOnUse" x="507.547" y="348.071" width="7.847" height="7.85" id="Flag_1_"><circle fill="#fff" cx="511.474" cy="351.998" r="3.927" filter="url(#Adobe_OpacityMaskFilter)"/></mask><g id="Flag" mask="url(#Flag_1_)"><path fill="#fff" d="M507.547 348.07h1.962v1.963h-1.963z"/><path d="M509.508 348.07h1.962v1.963h-1.962z"/><path fill="#fff" d="M511.47 348.07h1.962v1.963h-1.962z"/><path d="M513.432 348.07h1.962v1.963h-1.962zM507.547 350.033h1.962v1.962h-1.963z"/><path fill="#fff" d="M509.508 350.033h1.962v1.962h-1.962z"/><path d="M511.47 350.033h1.962v1.962h-1.962z"/><path fill="#fff" d="M513.432 350.033h1.962v1.962h-1.962zM507.547 351.998h1.962v1.962h-1.963z"/><path d="M509.508 351.998h1.962v1.962h-1.962z"/><path fill="#fff" d="M511.47 351.998h1.962v1.962h-1.962z"/><path d="M513.432 351.998h1.962v1.962h-1.962zM507.547 353.96h1.962v1.96h-1.963z"/><path fill="#fff" d="M509.508 353.96h1.962v1.96h-1.962z"/><path d="M511.47 353.96h1.962v1.96h-1.962z"/><path fill="#fff" d="M513.432 353.96h1.962v1.96h-1.962z"/></g></g>
<path fill="#ED5B48" d="M488.77 351.998l15.93-7.956-2.518 7.956 2.52 7.955z" id="Car"/></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment