svg 可缩放矢量图形 ---拆

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400">
  <defs>
    <radialGradient id="rading" cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5">
      <stop offset="0" stop-color="rgba(255,150,50,1)">
      </stop>
      <stop offset="0.7" stop-color="rgba(255,150,50,1)">
      </stop>
      <stop offset="1" stop-color="rgba(200,200,200,0)">
      </stop>
    </radialGradient>
  </defs>
  <circle cx="300" cy="200" r="100" fill="url(#rading)">
    <animate attributeName="r" attributeType="XML" values="70;100;70" begin="0s"
    dur="1.5s" repeatCount="indefinite">
    </animate>
  </circle>
  <circle cx="300" cy="200" r="70" fill="rgb(255,150,50)">
  </circle>
  <circle cx="300" cy="200" r="50" fill="white">
  </circle>
  <g>
    <text font-family="microsoft yahei" x="275" y="218" fill="#f00" font-size="50">
      拆
    </text>
    <animateTransform attributeName="transform" begin="0s" dur="1.5s" type="rotate"
    values="-20,300,200;20,300,200;-20,300,200" repeatCount="indefinite">
    </animateTransform>
  </g>
</svg>

猜你喜欢

转载自blog.csdn.net/wwq147852/article/details/78721675