Skip to content

Instantly share code, notes, and snippets.

@skozin

skozin/dabblet.css

Created December 13, 2012 14:02
Show Gist options
  • Save skozin/4276564 to your computer and use it in GitHub Desktop.
Save skozin/4276564 to your computer and use it in GitHub Desktop.
Download ZIP
SVG cascading test
Raw
dabblet.css
/**
* SVG cascading test
*/
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<svg width="500" height="601">
<defs>
<style type="text/css"><![CDATA[
#group {
fill: blue;
stroke: #444444;
shape-rendering: crispEdges;
}
.c {
fill: #4c3;
}
#i {
fill: purple;
}
]]></style>
</defs>
<g id="group">
<rect width="100" height="50" y="0" />
<rect width="100" height="50" y="50" fill="orange" />
<rect width="100" height="50" y="100" fill="orange" class="c" />
<rect width="100" height="50" y="150" fill="orange" class="c" id="i" />
<rect width="100" height="50" y="200" fill="orange" class="c" style="fill: red" />
</g>
<g transform="translate(0,17)" fill="white" font-size="15px">
<text x="5" y="0">1</text>
<text x="5" y="50">2[f]</text>
<text x="5" y="100">3[f].c</text>
<text x="5" y="150">4[f].c#i</text>
<text x="5" y="200">5[f].c#i[style]</text>
</g>
<text transform="translate(150,15)" x="0" font-size="15px">
<tspan fill="blue" x="0" y="0" >inherited</tspan>
<tspan fill="orange" x="0" y="20">attribute</tspan>
<tspan fill="#4c3" x="0" y="40">class</tspan>
<tspan fill="purple" x="0" y="60">id</tspan>
<tspan fill="red" x="0" y="80">style attribute</tspan>
</text>
</svg>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment