语言►SVG

SVG中的mpath元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/06/SVG%E4%B8%AD%E7%9A%84mpath%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

  1. 作用
  2. attribute

正文

作用

作为<animateMotion>的子元素，用于复用<path>

示例：

1
2
3
4
5
6
7
8
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <path id="foo" d="M 0 0 L 290 0 290 140 0 140 Z" style="fill:none;stroke:#000"/>
    <rect width="10" height="10">
        <animateMotion dur="10">
            <mpath href="#foo"/>
        </animateMotion>
    </rect>
</svg>

attribute

href

路径的 URL

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/06/SVG%E4%B8%AD%E7%9A%84mpath%E5%85%83%E7%B4%A0/

本文对你有帮助？请支持我

支付宝
微信