Skip to content

Instantly share code, notes, and snippets.

@bertspaan

bertspaan/README.md

Created August 8, 2013 08:36
Show Gist options
  • Save bertspaan/6182774 to your computer and use it in GitHub Desktop.
Save bertspaan/6182774 to your computer and use it in GitHub Desktop.
Download ZIP
Animated SVG Spinner using svg:use element
Raw
README.md

Animated SVG Spinner using svg:use element

Chrome loads external SVG files in an existing SVG element with the svg:use element, but animations do not play...

Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<meta charset="utf-8">
<title> Animated SVG Spinner using svg:use element</title>
</head>
<body>
<div id="invisible-svg" style="display: none;">
<svg id="spinner" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="160px" height="160px" xml:space="preserve" style="stroke: #893af2; stroke-width: 9px; stroke-linecap: round;">
<g>
<line x1="50" y1="3.167" x2="50" y2="23.5" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0s" />
</line>
<line x1="80.102" y1="14.124" x2="67.033" y2="29.7" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.1333s" />
</line>
<line x1="96.121" y1="41.867" x2="76.096" y2="45.398" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.2666s" />
</line>
<line x1="90.559" y1="73.415" x2="72.949" y2="63.249" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.4s" />
</line>
<line x1="66.018" y1="94.007" x2="59.064" y2="74.901" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.5333s" />
</line>
<line x1="33.983" y1="94.007" x2="40.937" y2="74.901" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.6666s" />
</line>
<line x1="9.442" y1="73.417" x2="27.052" y2="63.25" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.8s" />
</line>
<line x1="3.879" y1="41.868" x2="23.904" y2="45.399" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.9333s" />
</line>
<line x1="19.897" y1="14.124" x2="32.966" y2="29.7" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.0666s" />
</line>
</g>
</svg>
</div>
<div style="padding: 30px; bottom: 0; left: 0; right: 50%; top: 0; position: absolute;">
<h3>Chrome and Firefox:</h3>
<p>
This animating spinner works in Chrome and Firefox: <br /><code>&lt;use xlink:href=&quot;#spinner&quot; /&gt;</code>
</p>
<svg width="100%" height="100%" style="overflow: scroll;">
<g transform="translate(15,15)">
<use xlink:href="#spinner" transform="translate(0,20)" />
</g>
</svg>
</div>
<div style="padding: 30px; bottom: 0; left: 50%; right: 0; top: 0; position: absolute;">
<h3>Firefox only:</h3>
<p>
This animating spinner only works in Firefox: <br /><code>&lt;use xlink:href=&quot;spinner.svg#spinner&quot; /&gt;</code>
</p>
<svg width="100%" height="100%" style="overflow: scroll;">
<g transform="translate(15,15)">
<use xlink:href="spinner.svg#spinner" transform="translate(0,20)" />
</g>
</svg>
</div>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
spinner.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="spinner" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="160px" height="160px" xml:space="preserve" style="stroke: #a673f9; stroke-width: 9px; stroke-linecap: round;">
<g>
<line x1="50" y1="3.167" x2="50" y2="23.5" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0s" />
</line>
<line x1="80.102" y1="14.124" x2="67.033" y2="29.7" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.1333s" />
</line>
<line x1="96.121" y1="41.867" x2="76.096" y2="45.398" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.2666s" />
</line>
<line x1="90.559" y1="73.415" x2="72.949" y2="63.249" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.4s" />
</line>
<line x1="66.018" y1="94.007" x2="59.064" y2="74.901" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.5333s" />
</line>
<line x1="33.983" y1="94.007" x2="40.937" y2="74.901" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.6666s" />
</line>
<line x1="9.442" y1="73.417" x2="27.052" y2="63.25" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.8s" />
</line>
<line x1="3.879" y1="41.868" x2="23.904" y2="45.399" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.9333s" />
</line>
<line x1="19.897" y1="14.124" x2="32.966" y2="29.7" opacity="0.2">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.0666s" />
</line>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment