Beispiel:SVG-text-7.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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;
  --blue: #337799;
  --yellow: #dfac20;
}
  
text {
  font-family:sans-serif;	
  font-size: 310px;
  font-weight: bold; 
  text-anchor: middle;
  fill: url(#imagePattern);
}

text:focus, text:hover {
  fill: url(#textPattern);
  filter: url(#dropShadow);
 
}

</style>
<title>Wo ist der Text?</title>
</head>
 
<body>
<svg viewBox="0 0 800 500">
<defs>
	<filter id="dropShadow" x="-10%" y="-30%" width="200%" height="200%">
		<feFlood id="dropShadowColor" fill="black" result="floodFill"/>
		<feComposite in2="SourceAlpha" in="floodFill" operator="in" result="coloredAlpha"/>
		<feGaussianBlur in="coloredAlpha" stdDeviation="12" result="blur"/>
		<feComponentTransfer>
			<feFuncA id="dropShadowOpacity" type="linear" slope="1" intercept="0"/>
		</feComponentTransfer>
		<feOffset dx="8" dy="8" result="offsetBlur"/>
			<feMerge>
				<feMergeNode in="offsetBlur"/>
				<feMergeNode in="SourceGraphic"/>
		</feMerge>
	 </filter>

	<pattern id="imagePattern" patternUnits="userSpaceOnUse" x="0" y="0" width="80" height="80">
		<rect width="40" height="40" fill="white"/>
		<circle cx="20" cy="20" r="15" fill="black"/>
		<rect x="40" y="40" width="40" height="40" fill="white"/>
		<circle cx="60" cy="60" r="15" fill="black"/>
		<rect x="40" width="40" height="40" fill="black"/>
		<circle cx="60" cy="20" r="15" fill="white"/>
		<rect x="0" y="40" width="40" height="40" fill="black"/>
		<circle cx="20" cy="60" r="15" fill="white"/>
	</pattern>
	
	<pattern id="textPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="80" height="80">
		<rect width="40" height="40" fill="var(--blue)"/>
		<circle cx="20" cy="20" r="15" fill="var(--yellow)"/>
		<rect x="40" y="40" width="40" height="40" fill="var(--blue)"/>
		<circle cx="60" cy="60" r="15" fill="var(--yellow)"/>
		<rect x="40" width="40" height="40" fill="var(--yellow)"/>
		<circle cx="60" cy="20" r="15" fill="var(--blue)"/>
		<rect x="0" y="40" width="40" height="40" fill="var(--yellow)"/>
		<circle cx="20" cy="60" r="15" fill="var(--blue)"/>
	</pattern>
</defs>

<rect width="800" height="500" fill="url(#imagePattern)" />

<text tabIndex="1" x="300" y="240">svg</text>

</svg> 
</body>
</html>

Abgerufen am 4.10.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-text-7.html"