<mpath> es el subelemento del elemento <animateMotion> que proporciona la capacidad de hacer referencia a un elemento <path> externo como la definición de una ruta de movimiento.
Sintaxis:
<animateMotion attributes="" > <mpath xlink:href=""/> </animateMotion>
Atributos:
- xlink:href Define la referencia al elemento de ruta que define la ruta de movimiento.
- Atributos principales: Esto incluye id, lang, tabindex, xml:base, xml:lang, xml:space como atributos principales.
- Atributos de XLink: Esto incluye xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate como atributos de XLink.
- Atributo externalResourcesRequired: indica si los recursos que no forman parte del documento actual son necesarios para la visualización adecuada del contenedor dado o no. Tiene dos valores como verdadero o falso.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <svg width="30%" height="30%" 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="495" height="295" fill="none" stroke="green" stroke-width="3"/> <!-- Drawing the outer edge of the motion path in green, along with three circles at the start, middle and end --> <path id="geeksforgeeks" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="green" stroke-width="8.02"/> <circle cx="100" cy="250" r="18.64" fill="green"/> <circle cx="250" cy="100" r="18.64" fill="green"/> <circle cx="400" cy="250" r="18.64" fill="green"/> <!-- Make a triangle which will be moved about the motion path. --> <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="green" stroke-width="8.02"> <!-- Defining the motion path animation --> <animateMotion dur="3s" repeatCount="indefinite" rotate="auto" > <mpath xlink:href="#geeksforgeeks"/> </animateMotion> </path> </svg> </body> </html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Cromo
- Internet Explorer (no compatible)
- Firefox
- Safari
- Opera (compatible parcialmente)
- Borde
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA