沿貝塞爾曲線移動的問題
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>SVG -- 軌跡移動</title>
? ? <style>
? ? ? ? html, body, svg {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <svg viewBox='-400 -400 800 800'>
? ? ? ? <!-- 切換曲線時(shí)，需要改變 x, y 值 -->
? ? ? ? <rect x='-225' y='-25' width= '50' height='50' fill='rgba(0, 255, 255, .5)'>
? ? ? ? ? ? <animateMotion
? ? ? ? ? ? ? ? dur='3s'
? ? ? ? ? ? ? ? rotate='auto'
? ? ? ? ? ? ? ? fill='freeze'
? ? ? ? ? ? ? ? repeatCount='1'
? ? ? ? ? ? >
? ? ? ? ? ? ? ? <mpath xlink:href='#sPath'></mpath>
? ? ? ? ? ? </animateMotion>
? ? ? ? </rect>
? ? ? ? <!-- 視頻演示畫的曲線 -->
? ? ? ? <!-- <path id='sPath' d='M 0 0 L 100 100 A 200 200 0 1 0 0 -100' stroke='gray' fill='none'></path> -->
? ? ? ? <!-- quadratic curve 沿著貝塞爾曲線移動有問題？ -->
? ? ? ? <path id='sPath' d='M -200 0 Q -100 -200 0 0 T 200 0' stroke='gray' fill='none'></path>
? ? </svg>
</body>
</html>
2018-01-18
rect 的 x坐標(biāo)錯(cuò)了,代碼里為x=-225,改為x=-25