<DOCTYPE html>
<html>
<head>
</head>
<!--
<rect x='10' y='10' width='20px' height='10px'
fill='transparent' stroke='black' stroke-width='0.3'
stroke-opacity='0.4' stroke-dasharray='1 2 1'
stroke-dashoffset='1'
transform='translate(-10,0)'
/>
<polygon points='0,0 10,0 20,5 5,5 0,0'/>
<circle cx='20' cy='30' r='5'
/>
<ellipse cx='40' cy='30' rx='10' ry='5'
style="transform-box:fill-box;transform-origin:center"
transform='scale(1.4)rotate(45)'
/>
<line x1='40' y1='0' x2='40' y2='10' stroke='red'stroke-width='0.3'/>
<polyline points='45,0 50,0 50,15 40,15 45,0' fill='transparent'
stroke='red'stroke-width='0.3'/>
<text x='10' y='50' style="font-size:7">hello</text> -->
<style>
#r1{
animation: move 1s ease 1s infinite alternate
}
@keyframes move{
0%{transform:scale(1)}
30%{x:50;fill:green;}
100%{transform:scale(1.5);x:50;fill:red;}
}
</style>
<body>
<svg
width='500px' height='500px'
viewBox='0 0 100 100'
style="background:white">
<rect id='r1' x='10' y='10' width='20' height='10' />
<text id='r1' x='10' y='50' style="font-size:10">剁椒鱼头</text>
</svg>
</body>
</html>