Skip to content

Instantly share code, notes, and snippets.

@ynonp
Created December 17, 2011 17:39
Show Gist options
  • Save ynonp/1490829 to your computer and use it in GitHub Desktop.
Save ynonp/1490829 to your computer and use it in GitHub Desktop.
Text in path example
/**
* Text in path example
*/
html {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height:100%;
}
svg {
margin: 0 auto;
}
<!-- content to be placed inside <body>…</body> -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<path id="path1" d="M0,0 A40,40 0 0,0 100,0 A40,40 0 0,0 0,0" fill="none" stroke="red"/>
</defs>
<g transform='translate(80,80)'>
<text font-size=1.2em>
<textPath xlink:href="#path1">The five boxing wizards jump quickly</textPath>
</text>
</g>
</svg>
{"page":"css","view":"split"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment