<mpath>
åºçº¿
广æ³å¯ç¨
*
èª 2018å¹´10æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
* æ¤ç¹æ§çæäºé¨åçæ¯æç¨åº¦å¯è½ææä¸åã
<mpath> SVG åå
ç´ ç¨äº <animateMotion> å
ç´ ï¼å®æä¾äºå¼ç¨å¤é¨ <path> å
ç´ ä½ä¸ºè¿å¨è·¯å¾å®ä¹çè½åã
使ç¨ä¸ä¸æ
| ç±»å« | å¨ç»å ç´ |
|---|---|
| å 许çå 容 | ä»»ææ°éãä»»æ顺åºçä¸åå
ç´ ï¼ æè¿°æ§å ç´ |
å±æ§
DOM æ¥å£
该å
ç´ å®ç°äº SVGMPathElement æ¥å£ã
示ä¾
SVG
html
<svg
width="100%"
height="100%"
viewBox="0 0 500 300"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect
x="1"
y="1"
width="498"
height="298"
fill="none"
stroke="blue"
stroke-width="2" />
<!-- ç¨èè²ç»å¶è¿å¨è·¯å¾çè½®å»ï¼å¹¶å¨èµ·å§ç¹ãä¸ç¹åç»æç¹å¤ç»å¶ä¸ä¸ªå°ååã -->
<path
id="path1"
d="M100,250 C 100,50 400,50 400,250"
fill="none"
stroke="blue"
stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="blue" />
<circle cx="250" cy="100" r="17.64" fill="blue" />
<circle cx="400" cy="250" r="17.64" fill="blue" />
<!-- è¿éæä¸ä¸ªä¸è§å½¢ï¼å®å°æ²¿çè¿å¨è·¯å¾ç§»å¨ãå®å®ä¹ä¸ºç´ç«æ¹åï¼ä¸è§å½¢çåºè¾¹æ°´å¹³å±
ä¸ï¼ä½äºåç¹ä¸æ¹ã -->
<path
d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
fill="yellow"
stroke="red"
stroke-width="7.06">
<!-- å®ä¹è¿å¨è·¯å¾å¨ç» -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
<mpath href="#path1" />
</animateMotion>
</path>
</svg>
ç»æ
è§è
| è§è |
|---|
| SVG Animations Level 2 # MPathElement |