Created
December 17, 2011 17:39
-
-
Save ynonp/1490829 to your computer and use it in GitHub Desktop.
Text in path example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Text in path example | |
*/ | |
html { | |
background: #f06; | |
background: linear-gradient(45deg, #f06, yellow); | |
min-height:100%; | |
} | |
svg { | |
margin: 0 auto; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"page":"css","view":"split"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment