Cómo implementar el estándar dinámico SVG

Puedes ver muchos íconos de carga sorprendentes en loading.io. Todos están escritos en svg, con solo unas pocas líneas de código. Son más refinados y más pequeños que las imágenes img, y más flexibles y eficientes. implementación dom pura. Además, puede hacer que el ícono responda a eventos de clic.

¿Cómo dibujar estos círculos y cuadrados? ¿Cómo colorearlo? ¿Cómo mover? Primero veamos los conceptos básicos de svg y luego dibujemos el primer ícono de arriba.

En primer lugar, el elemento gráfico básico svg tiene algunos elementos de forma predefinidos: rectángulo

1<! - viewBox define el tamaño del lienzo, ancho/alto define el tamaño real ->

2<SVG xmlns = " http://www . w3 . org/2000/SVG " version = " 1.1 " ancho = " 300 " alto = " 300 " ver cuadro = " 0 0 300 300 " & gt;

三

4 & lt! - Las rectas (x1, y1) y (x2, y2) son dos puntos de coordenadas ->

5 <line x 1 = " 0 " y 1 = " 0 " x2 = " 250 " y2 = " 30 "/>

Seis

7 & lt! -El polígono forma una figura cerrada a través de las coordenadas de múltiples puntos->;

8<Polygon points="5, 5 100, 100 50, 200" />

Nueve

10<! - El rectángulo (x,y) es el punto inicial de la esquina superior izquierda ->

11 <rect x = " 100 " y = " 100 " ancho = " 120 " alto = " 100 " />

12

13<! -R radio del centro del círculo (cx, cy)-& gt;

14 & lt; círculo CX = " 100 " cy = " 50 " r = " 40 " trazo = " negro "/& gt;

15

16<! - Coordenadas de texto (x, y) de la esquina inferior izquierda ->

17 <text x = "0" y = "20" style = " font-size:16px; font-weight: negrita ">Pruebe SVG & lt/text & gt; 18 19 & lt;/SVG & gt; 2. Estilo y efecto El estilo del elemento svg se puede escribir como el atributo de la etiqueta o como estilo. Estas son algunas de las principales propiedades de estilo:

Trazo: Color del trazo

Ancho del trazo: Ancho del trazo.

Opacidad del trazo: Transparencia del trazo.

Relleno: Color de relleno, es decir, fondo.

Opacidad de relleno: La transparencia del color de relleno.

Conversión: conversión de gráficos, similar a la conversión css3.

Svg también admite muchos efectos de filtro, como degradados, sombras, desenfoques, fusión de imágenes y más. No necesitas saber mucho. Por ejemplo, simplemente dibuja algunos círculos de colores y usa círculos con relleno.

Nota: De forma predeterminada, la transformación se basa en la esquina superior izquierda del svg, no en el centro del círculo u otro centro. La esquina superior izquierda es el origen del sistema de coordenadas svg. Para obtener información sobre transformaciones y sistemas de coordenadas, puede consultar aquí.

En tercer lugar, el elemento auxiliar svg tiene varios elementos auxiliares:

Los elementos & ltg & gt generalmente se usan para agrupar elementos gráficos relacionados para operaciones unificadas, como rotación y escala. estilos relacionados.

& ltUso de & gtPara lograr la reutilización de gráficos SVG existentes, puede reutilizar elementos gráficos SVG individuales o

& ltdefs & gtLos elementos definidos dentro no se muestran directamente, puede usar

& ltsymbol & gt para crear tu propia ventana

Para el problema del punto base de transformación mencionado anteriormente, puedes anidar

1 & lt; SVG width = " 80px " height = " 80px " xmlns = " http://www . w3 . org/2000/SVG " view box = " 0 0 100 100 " preservar relación de aspecto = " xmidy mid " >>p>

2 & ltg transform="translate(20 50)" >>/p>

3 & ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # e 15b 64 " transform = " escala(0.99275 0.99275 )"/>

4 & lt/g & gt;

5 & ltg transform="translate(40 50)"

6 & ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f47e 60 " transform = " escala(0.773605 0.773605)"/& gt;

7 & lt/g & gt;

8 & ltg transform="translate(60 50)"

9 & ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f8b 26 a " transformar = " escala(0.42525 0.42525)"/& gt；

10 & lt;/g & gt;

11 & lt;g transformar=" traducir(80 50 )" >>

12 < círculo CX = " 0 " cy = " 0 " r = " 7 " fill = " # abbd 81 " transform = " escala(0.113418 0.113418)" />

13 & lt;/g & gt;

14 & lt;/SVG & gt; Cuarto, la realización de la animación. El efecto de animación de svg se basa en el elemento de etiqueta de animación:

& ltanimate & gt realiza el efecto de transición de un solo atributo,

& ltanimateTransform & gt realiza el efecto de animación de transformación ,

<Animación de emoción>Lograr el efecto de animación de ruta.

Svg se puede escribir de forma flexible. Los estilos se pueden escribir como atributos de etiqueta o en estilos. Las etiquetas de animación se pueden especificar mediante xlink o escribirse dentro de elementos de animación.

La demostración de escritura xlink de animateTransform es la siguiente:

& ltSVG xmlns = " http://www . w3 . org/2000/SVG " & gt; " animar objeto " x = " 20 " y = " 20 " ancho = " 50 " alto = " 50 " relleno = " azul " & gt;& lt/rect & gt;

& ltanimación deformación< /p >

xlink:href = " # animar objeto " <! -Especificar elementos animados->

attributeName = " transform " <! -El nombre de la propiedad a animar ->

type = "scale" <! -Especificar atributos de conversión->

begin = " 0s " <! - hora de inicio, es decir, retraso ->

dur = " 3s " <! -tiempo de animación->

from = " 1 " <! -valor inicial->

to = " 2 " <! -valor final->

repeatCount = "indefinido" <! -Repetir, repetir infinitamente->

/& gt;

& lt/SVG >La animación en el ejemplo anterior es la transición de A a b, para formar un For Para lograr un bucle fluido, se deben definir al menos tres puntos clave. AnimateTransform admite configuraciones de propiedades cada vez más flexibles:

Valores: valores de múltiples puntos clave, en lugar de desde y hacia, por ejemplo, valores = "0;1;0"

KeyTimes: valor correspondiente, punto temporal de cada punto.

CalcMode: Modo de velocidad de animación. Discreto|Lineal|Paso|Spline

Keysplines: establece puntos de control de movimiento Bézier, válido cuando calcMode es spline.

Para obtener una introducción más detallada a la animación svg, consulte aquí.

Ejemplo de código de verbo (abreviatura de verbo)

Círculo dibuja un círculo, lo llena de color, lo envuelve con una etiqueta G y lo posiciona. transform establece la deformación inicial y animateTransform establece la animación.

Ahora mira el código, creo que ya no te confundirás más:

& ltSVG class = " LDS-message " width = " 80px " height = " 80px " xmlns = " http://www w3 org /2000/SVG " view box = " 0 0 100 100 " preservar relación de aspecto = " xMidYMid "

& ltg transform="translate(20 50)"

& ltanimate transform atributoName = " transformar " tipo = " escala " comenzar = "-0.375s " modo calc = " spline " keySplines = " 0.3 0 0.7 1；0.3 0 0.7 1 " valores = " 0；1;0 " keyTimes = " 00.5 ;1 " dur = " 1s " repetir recuento = " infinito " >& lt/animate transform & gt;

& lt/circle & gt;

& lt/g & gt ;

& ltg transform="translate(40 50)"

& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f47e 60 " transform = " escala( 0.773605 0.773605)" & gt;

& ltanimate transform atributoName = " transform " tipo = " escala " comenzar = "-0.25s " calc mode = " spline " keySplines = " 0.3 0 0.7 1; 0.3 0 0.7 1 " valores = " 0；1;0 " keyTimes = " 00.5;1 " dur = " 1s " recuento de repeticiones = " infinito " >& lt/animate transform & gt;

& lt/circle & gt;

& lt/g & gt;

& ltg transform="translate(60 50)"

& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # f8b 26 a " transform = " escala(0.42525 0.42525)" & gt;

& ltanimate transform atributoName = " transformar " tipo = " escala " comenzar = "-0.125s " modo calc = " spline " keySplines = " 0.3 0 0.7 1；0.3 0 0.7 1 " valores = " 0；1;0 " keyTimes = " 00.5; 1 " dur = " 1s " repetir recuento = " infinito " >& lt/animate transform & gt;

& lt/circle & gt;

& lt/g & gt;

& ltg transform ="translate(80 50)"

& ltcircle CX = " 0 " cy = " 0 " r = " 7 " fill = " # abbd 81 " transform = " escala(0.113418 0.113418)" >

& ltanimate transformar atributoName = " transformar " tipo = " escala " comenzar = " 0s " calc mode = " spline " keySplines = " 0.3 0 0.7 1; 0.3 0 0.7 1 " valores = " 0; 1 ;0 " keyTimes = " 00.5;1 " dur = " 1s " recuento de repetición = " infinito " >& lt/animate transform & gt;

& lt/circle & gt;

& lt/g & gt;

& lt/SVG & gt; Sugerencias relacionadas:

Cómo operar el dibujo SVG con js