mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-14 17:39:56 +00:00
Code Issues Releases Wiki Activity

Add curved text demo

Browse Source
This commit is contained in:
Jermolene 2014-03-24 22:49:10 +00:00
parent 535837e017
commit 87c8478c80
2 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
editions/tw5.com/tiddlers/howtos/CurvedText.tid Normal file
View File

@ -0,0 +1,3 @@
title: $:/CurvedText
Everything in federation

26
editions/tw5.com/tiddlers/howtos/Making curved text with SVG.tid Normal file
View File

@ -0,0 +1,26 @@
created: 20140324223413403
modified: 20140324223524945
tags: howto examples
title: Making curved text with SVG
type: text/vnd.tiddlywiki
\define textOnPath(text)
$$$.svg
<svg width="100%" height="100%" viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100"/>
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red"/>
<text font-family="'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif" font-size="42.5">
<textPath xlink:href="#MyPath">
$text$
</textPath>
</text>
</svg>
$$$
\end
This demo shows how to use SVG to render transcluded text along a path. Enter some text in the textbox below to try it out; view the source to see how it is done.
<$edit-text tiddler="$:/CurvedText" tag="input" placeholder="Type text here" default=""/>
<$macrocall $name="textOnPath" text={{$:/CurvedText}}/>