Beispiel:SVG-textpath-morph.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
svg {
--blue: #306f91;
--green: #8db243;
--red: #c32e04;
--yellow: #dfac20;
height: 100vh;
max-width:100%
}
#route {
fill: none;
stroke: var(--blue);
stroke-width: 1;
}
text {
font-family:verdana;
font-size: 18px;
font-weight:bold;
fill: var(--blue);
}
textPath {
fill: var(--yellow);
stroke: var(--blue);
stroke-width: 1;
}
rect {
fill: none;
stroke: var(--blue);
stroke-width: 1;
}
</style>
<title>Shape-Morphing eines Textpfads</title>
</head>
<body>
<h1>Shape-Morphing eines Textpfads</h1>
<p>Klicken Sie auf die Buttons, um die Effekte zu animieren!</p>
<svg viewBox="0 0 800 440" >
<path id="route" d="M50,200 q100,-100 200,0 t200,0 t200,0 t200,0">
<animate attributeName="d"
values="M50,200 q100,-100 200,0 t200,0 t200,0 t200,0;
M50,200 q100,-50 200,0 t200,0 t200,0 t200,0;
M50,200 q100,-100 200,0 t200,0 t200,0 t200,0"
begin="button1.click"
dur="2s"
repeatCount="indefinite"
/>
</path>
<text>
<textPath id="offset" href="#route" startOffset="20">
Berg
<tspan style="fill: var(--red)"> und</tspan>
Talfahrt!
<animate
attributeName="startOffset"
values="20; -20; 400; 80; 800; 390; 20"
dur="9s"
begin="button3.click"
repeatCount="indefinite"
/>
</textPath>
<animate
attributeName="font-size"
values="18px;60px;18px"
dur="4s"
begin="button2.click"
repeatCount="indefinite"
/>
</text>
<rect x="10" y="1" width="200" height="25" rx="5" ry="5" />
<text id="button1" x="20" y="20" >1. Path-morphing</text>
<rect x="10" y="31" width="135" height="25" rx="5" ry="5" />
<text id="button2" x="20" y="50" >2. font-size</text>
<rect x="10" y="61" width="135" height="25" rx="5" ry="5" />
<text id="button3" x="20" y="80" >3. Lauftext</text>
</svg>
</body>
</html>
