diff options
Diffstat (limited to 'files/pt-br/web/svg/element/mpath/index.html')
| -rw-r--r-- | files/pt-br/web/svg/element/mpath/index.html | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/files/pt-br/web/svg/element/mpath/index.html b/files/pt-br/web/svg/element/mpath/index.html new file mode 100644 index 0000000000..c79fc56e21 --- /dev/null +++ b/files/pt-br/web/svg/element/mpath/index.html @@ -0,0 +1,78 @@ +--- +title: mpath +slug: Web/SVG/Element/mpath +tags: + - Animação + - Caminho + - Contorno + - Elemento + - Movimento + - Referencia + - SVG +translation_of: Web/SVG/Element/mpath +--- +<div>{{SVGRef}}</div> + +<p>O sub elemento <code>mpath</code> do elemento {{ SVGElement("animateMotion") }} fornece a habilidade de referenciar um elemento externo {{ SVGElement("path") }} como uma definição de um caminho de movimento.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: 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" /> + + <!-- Desenha o contorno da trajetória de movimento em azul, ao longo, com três pequenos círculos: inicio, meio e fim. --> + <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" /> + + <!-- Aqui temos um triângulo que andará sobre o caminho do movimento. + Define-se com uma orientação vertical com base no triângulo horizontalmente centralizado logo acima da origem. --> + <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" + fill="yellow" stroke="red" stroke-width="7.06" > + <!-- Define o caminho de movimento da animação --> + <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > + <mpath xlink:href="#path1"/> + </animateMotion> + </path> +</svg> +</pre> + +<p>Resultado:</p> + +<p>{{EmbedLiveSample("Example",250,165)}}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGMPathElement" title="en/DOM/SVGMPathElement">SVGMPathElement</a></code>.</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li>{{ SVGElement("animateMotion") }}</li> +</ul> |