课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

沿贝塞尔曲线移动的问题

来源：7-3 SVG-轨迹移动

牧人羊

2017-06-19 01:22

<!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'>

        <!-- 切换曲线时，需要改变 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>


写回答 关注

1回答

  • 慕粉3478004
    2018-01-18 19:33:20

    rect 的 x坐标错了,代码里为x=-225,改为x=-25

    0 0

走进SVG

SVG是HTML5 中矢量图的标记语言，学习后掌握更多的干货

52638 学习 · 213 问题

查看课程

相似问题

贝塞尔曲线

回答 1

怎样沿椭圆移动

回答 2

用svg写自由曲线

回答 1

移动端

回答 1

为什么我画的曲线在谷歌上看不到

回答 1

打开慕课网App查看更多内容