SVG 地图旋转动画制作

2019-09-13 郑州网站建设  

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

  <title>SVG 地图旋转动画制作/title>

         <meta name="keywords" content=" SVG 地图旋转动画制作" />

         <meta name="description" content=" SVG 地图旋转动画制作" />

 

 

      <link rel="stylesheet" href=http://www.divcss5.com/css3-style/"css/style.css">

 

 

</head>

 

<body>

  <figure>

  <svg version="1.1" xmlns="" xmlns:xlink=""

   x="0" y="0" viewBox="0 0 136 166" xml:space="preserve">

  <ellipse id="shad" cx="68" cy="150" rx="40" ry="10"/>

  <g clip-path="url(#outer)">

    <use id="sea" xlink:href="#circ"/>

    <g id="boat1" class="vehicles"><use xlink:href="#boat"/></g>

    <g id="land">

        <use xlink:href="#map" transform="translate(300,-309)" />

        <use xlink:href="#map" transform="translate(600,-309)" />

    </g>

    <rect id="hi" mask="url(#light)" width="300" height="300"/>

    <g class="vehicles">

      <g id="plane1"><use xlink:href="#plane"/></g>

      <g id="plane2"><use xlink:href="#plane"/></g>

      <g id="plane3"><use xlink:href="#plane"/></g>

      <g id="bike1" ><use xlink:href="#bike" /></g>

    </g>

  </g>

  <defs>

    <clipPath id="outer">

        <circle id="circ" cx="68" cy="68" r="68"/>

    </clipPath>

    <mask id="light">

        <use xlink:href="#circ" x="-5" y="-12"/>

    </mask>

    <g id="bike">

      <circle id="head" cx="0.8" cy="4.7" r="0.8"/>

      <path id="ride" d="M4.6,2.2c0,0.4,0.1,0.7,0.2,1L4.3,3.5H3.6c0-0.2-0.2-0.3-0.4-0.3c-0.2,0-0.4,0.2-0.4,0.4v1.1L1.6,5.3 c-0.1,0-0.1,0.10.1,0.1c0,0,0,0,0,0C1.2,5.7,1.2,6.1,1.5,6.3l2.1,1.8c0.2,0.2,0.6,0.2,0.8,0c0,0,0.1-0.1,0.1-0.1l0.4,0.3 C4.7,8.7,4.6,9,4.6,9.4c0,1.2,1,2.2,2.2,2.2S9,10.6,9,9.4c0-1.1-0.9-2.1-2-2.2l0-1.1h0.5C7.8,6.1,8,5.9,8,5.6S7.8,5.1,7.5,5.1H6.7 l-2-1.3l0.4-0.2c0.4,0.5,1,0.8,1.7,0.8C8,4.4,9,3.4,9,2.2S8,0,6.8,0S4.6,1,4.6,2.2z M2.6,5.6l0.8-0.4C3.5,5.2,3.6,5,3.6,4.9V4h0.6 v2.1L3.9,6.8L2.6,5.6z M8.5,9.4c0,1-0.8,1.7-1.7,1.7s-1.7-0.8-1.7-1.7c0-0.3,0.1-0.5,0.2-0.8l1.4,1c0.1,0.1,0.2,0.1,0.2,0 C7,9.6,7,9.5,7,9.4l0,0l0-1.7C7.9,7.8,8.5,8.5,8.5,9.4z M6.6,7.7l0,1.3l-1-0.7C5.8,8,6.2,7.8,6.6,7.7z M6.6,7.2 C6,7.3,5.5,7.6,5.1,8L4.7,7.6v0l0.6-1.5h1.3L6.6,7.2z M5.8,5.1H4.9c-0.1,0-0.2,0-0.2,0.1V4.4L5.8,5.1z M8.5,2.2 c0,1-0.8,1.7-1.7,1.7c-0.5,0-1-0.2-1.3-0.6l1.4-0.9C7,2.4,7,2.3,7,2.2c0,0,0-0.1,0-0.1C6.9,2,6.8,1.9,6.7,2L5.2,3 C5.1,2.7,5.1,2.5,5.1,2.2c0-1,0.8-1.7,1.7-1.7S8.5,1.3,8.5,2.2z"/>

    </g>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2171.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • head
  • Doctype
  • !
  • m
  • SVG