Beispiel:SVG-use-ellipse-1.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">
  <style>
g {
  fill: none;	
  stroke: #337599;
  stroke-width: 1;
}
circle {
  fill: #c82f04;
}
</style>
  <title>SVG - use</title>
</head>
<body>
<h1>SVG - Ellipsen mit use </h1>
 
<svg viewBox="0 0 250 250" >
<g id="g1">
  <ellipse id="ellipse1" cx="100" cy="100" rx="75" ry="40"/>
  <use href="#ellipse1" transform="rotate(30 100 100)"/>
  <use href="#ellipse1" transform="rotate(60 100 100)"/>
</g>

<use href="#g1" transform="rotate(60 100 100)"/>
<use href="#g1" transform="rotate(90 100 100)"/>

<circle cx="100" cy="100" r="2" />
<text x="100" y="110" font-size="10" text-anchor="middle">100,100</text>

</svg>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-use-ellipse-1.html&oldid=88006“