Beispiel:SVG-Shape-Morphing-01.html
<!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>
path {
fill: #dfac20; stroke: #337599; stroke-width: 3;
}
ellipse {
fill: #fdfcf3; stroke: #337599; stroke-width: 2; rx: 17px; /* Pixelwerte für Firefox nötig! */ ry: 9px;
}
</style> <title>Beispiel: Shape-Morphing 1</title>
</head>
<body> <svg viewBox="0 0 600 360"> <path id="form" > <animate attributeName="d" dur="5s" values="M 100,10 0,100 70,50 130,150 200,100 z; M 100,10 0,100 70,150 130, 50 200,100 z; M 100,10 0,100 70,50 130,150 200,100 z" repeatCount="indefinite"/> </path> <line id="L" x1="70" x2="70" y2="180" stroke="#c32e04" stroke-width="6"> <animate attributeName="y1" dur="5s" values="65;165;65" repeatCount="indefinite"/> </line> <line id="L" x1="130" x2="130" y2="180" stroke="#c32e04" stroke-width="6"> <animate attributeName="y1" dur="5s" values="165;65;165" repeatCount="indefinite"/> </line>
<g> <animateTransform attributeName="transform" type="translate" dur="5s" values="0,50;0,150;0,50 " repeatCount="indefinite"/> <ellipse cx="70" cy="0" /> <text x="59" y="4" font-size="10" fill="black" font-family="arial">x=70</text> </g> <g> <animateTransform attributeName="transform" type="translate" dur="5s" values="0,150;0,50;0,150 " repeatCount="indefinite"/> <ellipse cx="130" cy="0" /> <text x="117" y="4" font-size="10" fill="black" font-family="arial">x=130</text> </g>
<g transform="translate(225,0)"> <path d="M 100,10 0,100 70,50 130,150 200,100 z" /> <text x="17" y="160" font-size="10" fill="black" font-family="arial">d="M 100,10 0,100 70,50 130,150 200,100 z"</text> </g> <g transform="translate(225,200)"> <path d="M 100,10 0,100 70,150 130, 50 200,100 z" /> <text x="17" y="-10" font-size="10" fill="black" font-family="arial">d="M 100,10 0,100 70,150 130, 50 200,100 z"</text> </g>
</svg>
</body> </html>
