Beispiel:SVG-text-3.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 {
border: thin solid;
--bgcolor: #e6f2f7;
--blue: #337599;
--yellow: #dfac20;
--green: #8db243;
--accent: #c82f04;
}
text {
font-family:sans-serif;
font-size: 24px;
}
svg a {
cursor: pointer;
text-decoration: underline;
fill: var(--blue);
}
a:focus, a:hover {
fill: var(--bgcolor);
stroke: var(--blue);
stroke-width: 1;
}
a:focus > rect, a:hover > rect {
fill: var(--bgcolor);
stroke: var(--blue);
stroke-width: 1;
}
[role=heading] {
font-size: 50px;
text-anchor: middle;
fill: var(--yellow);
stroke: var(--blue);
stroke-width: 2;
}
[role=heading] > tspan {
fill: var(--red);
}
</style>
<title>Text in SVG: Links</title>
</head>
<body>
<svg viewBox="0 0 800 400">
<text role="heading" x="400" y="60">
<tspan>SVG-Text: </tspan>
Links kennzeichnen
</text>
<a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Text/F%C3%BCllungen_und_Randlinien#Gestaltung_von_Textlinks">
<text x="20" y="130">
ein Textlink
</text>
</a>
<a transform="translate(300,100)" href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Text/F%C3%BCllungen_und_Randlinien#Gestaltung_von_Textlinks">
<rect width="430" height="30" fill="none" />
<text x="5" y="25">
ein Textlink mit vergrößerter Klickfläche
</text>
</a>
</svg>
</body>
</html>
