<html lang="en"><head> <meta charset="UTF-8"> <title>欢迎来到蝴蝶教程</title></head><body> <h1>SVG 旋转椭圆</h1> <svg width="100%" height="300px"> <g id="R1" transform="translate(250 250)"> <ellipse rx="100" ry="0" opacity=".3"> <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite" /> <animate attributeName="cx" dur="8s" values="-20; 220; -20" repeatCount="indefinite" /> <animate attributeName="ry" dur="3s" values="10; 60; 10" repeatCount="indefinite" /> </ellipse> </g> <use xlink:href="#R1" transform="rotate(72 390 150)" /> <use xlink:href="#R1" transform="rotate(144 390 150)" /> <use xlink:href="#R1" transform="rotate(216 390 150)" /> <use xlink:href="#R1" transform="rotate(288 390 150)" /> 抱歉，您的浏览器不支持嵌入式SVG。 </svg> <br/> <div><b>注意</b>：此示例在Internet Explorer和Safari中不起作用。</div></body></html>