console
@keyframes
<svg class="hua">
<!-- <rect width="100" height="300" fill="bakc" stroke="#fff" stroke-width="5" x="50" y="50" rx="5" yx="5"/>
<circle r="35" fill="red" cx="100" cy="100"/>
<circle r="35" fill="yellow" cx="100" cy="200" />
<circle r="35" fill="green" cx="100" cy="300" />
<rect width="20" height="400" x="90" y="350" fill="#fff"/>
<ellipse cx="400" cy="400" rx="200" ry="30" fill="red" stroke="blue" stroke-width="4"/>
<ellipse cx="400" cy="350" rx="180" ry="30" fill="deeppink"stroke="blue" stroke-width="4"/>
<ellipse cx="400" cy="300" rx="150" ry="30" fill="tan"stroke="blue" stroke-width="4"/>
<circle r="25" cx="450" cy="405" fill="yellow" stroke="#fff" stroke-width="2"/>
<circle r="25" cx="290" cy="347" fill="copper" stroke="#fff" stroke-width="2"/> --> -->
<!-- <polyline stroke="deeppink" points="450,250 400,400 250,400 400,500 320,650 450,550 580,650 500,500 650,400 500,400"/>
<rect width="80" height="50"fill="none" stroke="yellow" stroke-width="5"
stroke-dasharray="0 80 50 0 80 0 50" x="210" y="250"/>
<line x1="250" y1="250" x2="250" y2="600" stroke="yellow" stroke-width="4"/>
<polygon stroke="red" points="210,220 200,250 220,250"/>
<polygon stroke="red" points="250,220 240,250 260,250"/>
<polygon stroke="red" points="290,220 280,250 300,250"/>
<polygon stroke="red" points="230,600 250,630 270,600"/>
<circle r="23" cx="400" cy="440" fill="#fff"/>
<circle r="23" cx="490" cy="440" fill="#fff"/>
<ellipse cx="450" cy="500" rx="35" ry="15" fill="#fff"/>
<ellipse cx="450" cy="205" rx="100" ry="40" fill="pink" stroke="khaki" stroke-width="4"/>
<circle r=17 cx="400" cy="440"/>
<circle r=17 cx="490" cy="440"/>
<circle r="8" cx="410" cy="450" fill="#fff"/>
<circle r="8" cx="476" cy="440" fill="#fff"/>
<circle r="8" cx="386" cy="440" fill="#fff"/>
<circle r="8" cx="500" cy="450" fill="#fff"/>
<circle r="8" cx="411" cy="430" fill="#fff"/>
<circle r="8" cx="501" cy="430" fill="#fff"/>
<text class="zi" x="400" y="210" font-size="30" fill="#ee82ee" stroke-widh="blue" >angela</text> --> --> -->
<!-- <rect width="450" height="300"/> -->
<!-- <polyline stroke="deeppink" points="450,250 400,400 250,400 400,500 320,650 450,550 580,650 500,500 650,400 500,400 450,250"
fill="yellow" transform-origin="(center)" transform="translate(-70 -60)scale(0.3)" />
<polyline fill="yellow" stroke="deeppink" points="450,250 400,400 250,400 400,500 320,650 450,550 580,650 500,500 650,400 500,400 450,250"
transform-origin="(center)" transform="scale(0.08)translate(1500 40)"style="transform-box:fill-box"/>
<polyline fill="yellow" stroke="deeppink" points="450,250 400,400 250,400 400,500 320,650 450,550 580,650 500,500 650,400 500,400 450,250"
transform-origin="(center)" transform="scale(0.08) translate(1300 800)"style="transform-box:fill-box"/>
<polyline fill="yellow" stroke="deeppink" points="450,250 400,400 250,400 400,500 320,650 450,550 580,650 500,500 650,400 500,400 450,250"
transform-origin="(center)" transform="scale(0.08)translate(1000 1500)"style="transform-box:fill-box"/>
<polyline fill="yellow" stroke="deeppink" points="450,250 400,400 250,400 400,500 320,650 450,550 580,650 500,500 650,400 500,400 450,250"
transform-origin="(center)"transform="scale(0.08)translate(400 1800)"style="transform-box:fill-box"/> -->
<!-- <polyline stroke="deeppink" points="450,250 400,400 250,400 400,500 320,650 450,550 580,650 500,500 650,400 500,400 450,250"
fill="yellow" transform-origin="center" transform="translate(-300 -400)rotate(30)scale(0.08)"/>
<polyline stroke="deeppink" points="450,250 400,400 250,400 400,500 320,650 450,550 580,650 500,500 650,400 500,400 450,250"
fill="yellow" transform-origin="center" transform="translate(-250 -400)rotate()scale(0.08)" -->
<rect width="100" height="100" fill="#ff6700">
<set attributeName="fill" begin="mouseover" to="deeppink"/>
<set attributeName="fill" begin="mouseout" to="red"/>
</rect>
<rect width="100" height="100" fill="blue" x="100"></rect>
<defs>
<linearGradient id="bian" x1="20%" y1="100" x2="0%" y2="0%">
<stop offset="20%" style="stop-color:#ff6699"/>
<stop offset="40%" style="stop-color:#66ff99"/>
<stop offset="60%" style="stop-color:#ccffff"/>
<stop offset="80%" style="stop-color:#0099ff"/>
</linearGradient>
</defs>
<circle r=100 cx="200" cy="200"fill="(#bian)"/>
<text stroke-dasharray="20,4" class="zi1" font-size="80" fill="none" stroke-width="4" x="10" y="100"stroke="red">Song He Fei</text>
<text stroke-dasharray="40,50"class="zi2" font-size="80" fill="none" stroke-width="4" x="10" y="100"stroke="blue">Song He Fei</text>
<text stroke-dasharray="10,12"class="zi3" font-size="80" fill="none" stroke-width="4" x="10" y="100"stroke="green">Song He Fei</text>
<text stroke-dasharray="8,25"class="zi4" font-size="80" fill="none" stroke-width="4" x="10" y="100"stroke="yellow">Song He Fei</text>
</svg>
.hua{
width: 800px;
height: 800px;
background-color: pink
};
@keyframes zhuan{
from{
transform: rotate(360);
}
to{
transform: rotate(0);
}
};
.zi{
animation: zhuan 10s infinite linear
}
.he1{
}