Skip to content

Instantly share code, notes, and snippets.

@jesboat
Created February 6, 2012 07:23
Show Gist options
  • Save jesboat/1750415 to your computer and use it in GitHub Desktop.
Save jesboat/1750415 to your computer and use it in GitHub Desktop.
<svg width="30cm" height="9cm" viewBox="0 0 1000 300" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- show outline of canvas -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="red" stroke-width="2"/>
<path d="M 0 150 L 1000 150" stroke="red" stroke-width="1"/>
<path d="M 500 0 L 500 300" stroke="red" stroke-width="1"/>
<!-- draw some text -->
<text x="500" y="150" font-size="90" fill="none"
stroke="#00f" stroke-width="1"
style="text-anchor: middle">
Hello, world!
</text>
<g transform="rotate(30 500 150)">
<text x="500" y="150" font-size="90" fill="none"
stroke="#00b" stroke-width="1"
style="text-anchor: middle; alignment-baseline: middle">
Hello, world!
</text>
<path d="M 0 150 L 1000 150" stroke="red" stroke-width="1"/>
</g>
<g transform="rotate(60 500 150)">
<text x="500" y="150" font-size="90" fill="none"
stroke="#008" stroke-width="1"
style="text-anchor: middle; alignment-baseline: middle">
Hello, world!
</text>
<path d="M 0 150 L 1000 150" stroke="red" stroke-width="1"/>
</g>
<g transform="rotate(90 500 150)">
<text x="500" y="150" font-size="90" fill="none"
stroke="#004" stroke-width="1"
style="text-anchor: middle; alignment-baseline: middle">
Hello, world!
</text>
<path d="M 0 150 L 1000 150" stroke="red" stroke-width="1"/>
</g>
</svg>
Display the source blob
Display the rendered blob
Raw
<svg width="30cm" height="9cm" viewBox="0 0 1000 300" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- show outline of canvas -->
<rect x="1" y="1" width="998" height="298"
fill="none" stroke="red" stroke-width="2"/>
<path d="M 0 150 L 1000 150" stroke="red" stroke-width="1"/>
<path d="M 500 0 L 500 300" stroke="red" stroke-width="1"/>
<!-- draw some text -->
<text x="500" y="150" font-size="90" fill="none"
stroke="#00f" stroke-width="1"
style="text-anchor: middle">
Hello, world!
</text>
<g transform="rotate(30 500 150)">
<text x="500" y="150" font-size="90" fill="none"
stroke="#00b" stroke-width="1"
style="text-anchor: middle; alignment-baseline: middle">
Hello, world!
</text>
<path d="M 0 150 L 1000 150" stroke="red" stroke-width="1"/>
</g>
<g transform="rotate(60 500 150)">
<text x="500" y="150" font-size="90" fill="none"
stroke="#008" stroke-width="1"
style="text-anchor: middle; alignment-baseline: middle">
Hello, world!
</text>
<path d="M 0 150 L 1000 150" stroke="red" stroke-width="1"/>
</g>
<g transform="rotate(90 500 150)">
<text x="500" y="150" font-size="90" fill="none"
stroke="#004" stroke-width="1"
style="text-anchor: middle; alignment-baseline: middle">
Hello, world!
</text>
<path d="M 0 150 L 1000 150" stroke="red" stroke-width="1"/>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment