49 lines
1.6 KiB
Plaintext
49 lines
1.6 KiB
Plaintext
caption: Texto curvo con SVG
|
|
created: 20140324223413403
|
|
es-title: Cómo haer textos curvos con SVG
|
|
modified: 20160418045621456
|
|
tags: Learning
|
|
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" style="background:white;">
|
|
<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="#ddd"/>
|
|
<text font-family="'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif" font-size="42.5">
|
|
<textPath xlink:href="#MyPath">
|
|
$text$
|
|
</textPath>
|
|
</text>
|
|
</svg>
|
|
$$$
|
|
\end
|
|
Este ejemplo muestra cómo usar SVG para mostrar transclusiones de texto a lo largo de un recorrido. Escribe algo en el cuadro de texto para probarlo.
|
|
|
|
<$edit-text tiddler="$:/CurvedText" tag="input" placeholder="Escribe algo aquí" default=""/>
|
|
|
|
<$macrocall $name="textOnPath" text={{$:/CurvedText}}/>
|
|
|
|
Este es el código:
|
|
|
|
```
|
|
\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" style="background:white;">
|
|
<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="#ddd"/>
|
|
<text font-family="'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif" font-size="42.5">
|
|
<textPath xlink:href="#MyPath">
|
|
$text$
|
|
</textPath>
|
|
</text>
|
|
</svg>
|
|
$$$
|
|
\end
|
|
```
|