logoExtra: logo_animado_path_svg

Descripción: Este comodín sirve para animar el logo con tres (3) movimientos lineales.


A continuación mostramos los apuntes asociados a este extra:

SVG animado: algunos ejemplos sencillos
Hemos hecho un par de animaciones rotando nuestro logo y las manecillas de un reloj analógico.
// descripción para la sindicación:
/*
    [rss]Este comodín sirve para animar el logo con tres (3) movimientos lineales.[/rss]
*/
$tipo = (isset($_GET["t"])) ? $_GET["t"]:"v";
if (!in_array($tipo, array("v", "h", "d")))    $tipo = "v";

if ($tipo == "v") $poner =<<< vertical
        <use x="0" y="-40" transform="rotate(180 20 -20)" xlink:href="#logo_svg" />
        <animateMotion path="M 0 0 V 40 Z" dur="2s" repeatCount="indefinite" />
vertical;

elseif ($tipo == "h") $poner =<<< horizontal
        <use x="-40" y="0" xlink:href="#logo_svg" />
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="40" dur="2s" repeatCount="indefinite"/>
horizontal;

else $poner =<<< diagonal
        <use x="0" y="-40" xlink:href="#logo_svg" />
        <use x="-40" y="0" xlink:href="#logo_svg" />
        <use x="-40" y="-40" xlink:href="#logo_svg" />
        <animateMotion path="M 0 0 L 40 40 M 0 0 Z" dur="2s" repeatCount="indefinite"/>
diagonal;

header("Content-type: image/svg+xml");
echo <<< svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40" height="40" preserveAspectRatio="yes">
    <defs>
        <image id="logo_svg" width="40" height="40" xlink:href="data:image/png;base64,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" />
    </defs>
    <g>
        <use x="0" y="0" xlink:href="#logo_svg" />
$poner
    </g>
</svg>
svg;

unset($css);
unset($body);

Este código ha sido leído en 163 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.logo_animado_path_svg) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024 | Otros enlaces: buscador