Skip to content

Instantly share code, notes, and snippets.

@knowuh
Created June 19, 2013 22:25
Show Gist options
  • Save knowuh/5818681 to your computer and use it in GitHub Desktop.
Save knowuh/5818681 to your computer and use it in GitHub Desktop.
<base> attribute messes with url(#...) Style SVG attributes.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<base href="http://lab4.dev.concord.org/" />
</head>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="373"
height="186.5"
>
<g class="particle-container-vis" transform="translate(0,0)">
<rect class="plot" width="373" height="186.5" x="0" y="0" fill="#eeeeee" />
<g class="grid-container">
<g class="x" transform="translate(0,0)" />
<g class="x" transform="translate(93.25,0)" />
<g class="x" transform="translate(186.5,0)" />
<g class="x" transform="translate(279.75,0)" />
<g class="x" transform="translate(373,0)" />
<g class="y" transform="translate(0,186.5)" background-fill="#FFEEB6" />
<g class="y" transform="translate(0,139.875)" background-fill="#FFEEB6" />
<g class="y" transform="translate(0,93.25)" background-fill="#FFEEB6" />
<g class="y" transform="translate(0,46.625)" background-fill="#FFEEB6" />
<g class="y" transform="translate(0,0)" background-fill="#FFEEB6" />
</g>
<svg class="viewport" viewBox="0 0 373 186.5" x="0" y="0" width="373" height="186.5">
<defs>
<filter id="glow" x="-1" y="-1" width="400%" height="400%">
<feMorphology result="bigger" in="SourceGraphic" operator="dilate" radius="6" />
<feGaussianBlur result="blurOut" in="bigger" stdDeviation="6" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
<radialGradient id="elem1-grad" cx="50%" cy="47%" r="53%" fx="35%" fy="30%">
<stop stop-color="#ffff00" offset="0%" />
<stop stop-color="#ffff00" offset="40%" />
<stop stop-color="#b2b200" offset="80%" />
<stop stop-color="#ffff00" offset="100%" />
</radialGradient>
</defs>
<g class="main-container">
<circle class="atom draggable" r="6.5" cx="100" cy="100" fill-opacity="1" fill="url(#elem1-grad)" filter="url(#glow)" />
</g>
</svg>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment