<div style ="position:relative">
  <div style ="opacity:0">
    <img src ="http://vignette3.wikia.nocookie.net/southparkfanon/images/d/dd/IkeBroflovski.png/revision/latest?cb=20111104064752">
  </div>
  <div style ="position:absolute; top:0; opacity:1;">
    <svg id="svg" width="385" height="480" viewBox="0 0 385 480">
<!-- -->     
     <rect class ="body" x="102" y="335" width="180" height="100" ry ="35" style ="fill:#2AA6F2"/>
      <ellipse class ="foot" cx="-15" cy="445" rx="35" ry="50" transform = "rotate(-20)"style ="fill:#2AA6F2;stroke:#000000;stroke-width:1;"/>
      <ellipse class ="foot-in" cx="-15" cy="445" rx="25" ry="40" transform = "rotate(-20)" style ="fill:#ffffff"/>
      
      <ellipse class ="foot" cx="375" cy="315" rx="35" ry="50" transform = "rotate(20)"style ="fill:#2AA6F2;stroke:#000000;stroke-width:1;"/>
      <ellipse class ="foot-in" cx="375" cy="315" rx="25" ry="40" transform = "rotate(20)" style ="fill:#ffffff"/>
      
      <rect class ="arm" x="47" y="319" width="125" height="50" rx="10" style ="fill:#2AA6F2"/>
      <circle class ="hand" cx="40" cy="334" r="25" style ="fill:#FFDCB6;"/>
      
      <rect class ="arm" x="222" y="319" width="125" height="50" rx="10" style ="fill:#2AA6F2"/>
      <circle class ="hand" cx="342" cy="334" r="25" style ="fill:#FFDCB6;"/>
      
      <rect class ="zipper" x="189" y="375" width="5" height="50" style ="fill:＃000000"/>
      <circle class ="zipper-item" cx="184" cy="385" r="3" style ="fill:＃000000"/>
      <circle class ="zipper-item" cx="184" cy="400" r="3" style ="fill:＃000000"/>
      <circle class ="zipper-item" cx="184" cy="415" r="3" style ="fill:＃000000"/>
      
      <ellipse class ="mouth" cx="184" cy="265" rx="130" ry="40" /> 
    <path class ="face_up" d ="M 47 200 C 39 134 116 23 189 24 S 320 45 344 224 C 274 258 98 237 47 200" style="fill:#FFDCB6;stroke:black;stroke-width:0;" />
    <path class ="face_down" d ="M 46 242 C 118 269 272 272 349 244 C 313 424 31 410 46 242" style="fill:#FFDCB6;"/>
    <path class ="hair" d="M 124 67 S 128 60 132 54 S 123 53 114 46 S 120 41 175 28 L 183 10 S 204 20 218 31 L 268 19 S 263 26 254 33 S 267 51 279 65 S 269 66 229 57 L 234 90 L 195 57 C 120 225 124 67" />
    <circle class ="eyes" cx="160" cy="182" r="10" />
    <circle class ="eyes" cx="232" cy="190" r="10" />
    <ellipse class ="nose" cx="197" cy="220" rx="5" ry="8" /> 
    </svg>
   </div>
</div>
<!-- 取得滑鼠座標資訊-->
  <div id="info">
  <p id="offset">offset</p>
  <p id="client">client</p>
  <p id="showSvg">svg</p>
</div>



  

#info{
  position:fixed;
  top:0px;
  left:500px;
}

svg{
  max-width:100%;
  position:relative;
  top:50px;
}

@keyframes ike{
  0%{
    transform: translateY(0px) rotate(0)
  }
  100%{
    transform:translateY(-15px) rotate(-5deg) 
  }
}

.face_down,.mouth{
  //transform: translateY(-18px)
}

.face_up,
.hair,
.eyes,
.nose{
  animation:ike 0.2s infinite alternate;
}

//	取得當前的 viewBox 資訊
function showViewBox() {
  const currentViewBox = document.getElementById('currentViewBox')
  let viewBox = svg.getAttribute('viewBox')
  currentViewBox.textContent = `現在的 viewBox 為：(${viewBox})`
}

//	讓使用者可以設定 viewBox
function setViewBox() {
  //	取得使用者輸入的 viewBox 值
  const xMin = document.querySelector('[name="viewBox-x-min"]')
  const yMin = document.querySelector('[name="viewBox-y-min"]')
  const width = document.querySelector('[name="viewBox-width"]')
  const height = document.querySelector('[name="viewBox-height"]')
  let viewBox = `${xMin.value} ${yMin.value} ${width.value} ${height.value}`

  //	設定 SVG viewBox 屬性值
  svg.setAttribute('viewBox', viewBox)

  //	顯示最新的 viewBox 資訊
  showViewBox()
}
/* 
 *	開始：取得游標座標資訊
 */
function reportCurrentPoint(e) {
  //	選取 HTML 各元素
  const info = document.getElementById('info')
  const offset = document.getElementById('offset')
  const client = document.getElementById('client')
  const showSvg = document.getElementById('showSvg')

  //	取得 viewport 座標系統中的 offset 和 client 座標值，並顯示於視窗上
  offset.textContent = `offset (${e.offsetX}, ${e.offsetY})`
  client.textContent = `client (${e.clientX}, ${e.clientY})`

  //	建立 SVG 座標點（0, 0）
  const clientPoint = svg.createSVGPoint()
    //	取得 CTM
  const CTM = svg.getScreenCTM()
    //  將 SVG 座標點的 x, y 設成 client(x, y)
  clientPoint.x = e.clientX
  clientPoint.y = e.clientY
    //	將 client 的座標點轉成 SVG 座標點
  SVGPoint = clientPoint.matrixTransform(CTM.inverse())
    //  將資訊顯示於視窗上
  showSvg.textContent = `svg (${SVGPoint.x.toFixed(0)}, ${SVGPoint.y.toFixed(0)})`
} //	結束：取得游標座標資訊

const svg = document.getElementById('svg')
const setViewBoxBtn = document.getElementById('setViewBoxBtn')
svg.addEventListener('mousemove', reportCurrentPoint)
setViewBoxBtn.addEventListener('click', setViewBox)
showViewBox()