Beispiel:SVG-use-ellipse.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 {
max-height: 90vh;
width: 100%;
}
html, body, svg {
margin: 0;
padding: 0;
}
</style>
<title>Ellipsen mit Use</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 250" >
<rect id="border" x="0" y="0" height="100%" width="100%" fill="white" stroke="transparent" stroke-width="1"/>
<g id="firstone" stroke="gold">
<animateTransform attributeName="transform" id="AT" additive="sum" type="translate" dur="7s" values="50 0;0 0;50 0" repeatCount="indefinite"/>
<g id="g3" fill="none" stroke-width="2">
<animateTransform attributeName="transform" type="rotate" dur="4s" from="180 100 100" to="0 100 100" repeatCount="indefinite"/>
<g id="g2">
<ellipse id="g1" cx="100" cy="100" rx="75" ry="40">
<animate attributeName="ry" dur="3s" values="10; 60; 10" repeatCount="indefinite"/>
</ellipse>
<use href="#g1" transform="rotate(30 100,100)"/>
<use href="#g1" transform="rotate(60 100,100)"/>
</g>
<use href="#g2" transform="rotate(90 100 100)"/>
</g>
</g>
<use href="#g3" transform="translate(50 0)" stroke="steelBlue">
<use href="#AT"/>
<animateTransform attributeName="transform" additive="sum" type="translate" dur="7s" values="0 0;50 0;0 0" repeatCount="indefinite"/>
</use>
<use href="#g3" transform="translate(50 50)" stroke="green">
<animateTransform attributeName="transform" additive="sum" type="translate" dur="7s" values="0 -50;50 0;0 -50" repeatCount="indefinite"/>
</use>
<use href="#g3" transform="translate(0 50)" stroke="#c82f04">
<animateTransform attributeName="transform" additive="sum" type="translate" dur="7s" values="50 -50;0 0;50 -50" repeatCount="indefinite"/>
</use>
</svg>
<p>David Dailey; SRU</p>
</body>
</html>
