您的位置:首页 > 其它

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

2017-12-05 16:19 465 查看
<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: