Beispiel:SVG-transform-translate.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:SELFHTML-Beispiel-Grundlayout.css">
	<title>translate - CSS vs SVG</title>
<style>
#original {
	fill: #f2dea6;
	stroke: #dfac20;
	stroke-width: 1;
}

#css-rect {
	transform: translate(100px, 50px);
	fill: #fc9d82;
	stroke: #c82f04;
	stroke-width: 1;	
}

#svg-rect {
	fill: #bed590;
	stroke: #586f2a;
	stroke-width: 1;	
}

.h2 {
	font-size: 18px;
	font-weight: bold;
	font-family: sans-serif;	
}

.code {
	font-size: 12px;
	font-family: monospace;
}

svg {
	background: white;
	border: thin dotted #337599;
	width: 540px;
	height: 250px;
}



</style>
</head>
<body>
<h1>CSS vs SVG - translate-Eigenschaft und transform-Attribut</h1>

	<svg>
		<defs>
			<symbol id="rechteck">
				<desc>ein Muster-Rechteck</desc>
				<rect x="20" y="20" width="90" height="60" /> 
			</symbol>
		</defs>
		<use href="#rechteck" id="original" />
		<use href="#rechteck" id="css-rect" />
		<use href="#rechteck" id="svg-rect" transform="translate(100,150)" />
		
		<text class="h2" x="30" y="70">Original</text>
		<text class="h2" x="130" y="120">CSS</text>		
		<text class="code" x="220" y="90">transform: translate(100px, 50px);</text>
		<text class="h2" x="130" y="220">SVG</text>				
		<text class="code" x="220" y="190">transform="translate(100,150)"</text>
	</svg>
<p> Ersetzen Sie im Frickl oder Seiteninspektor die <code>translate()</code>-Funktion durch eine <code>translateX()</code>-Funktion mit nur einem Parameter. Was können Sie beobachten?
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-transform-translate.html&oldid=87952“