svg dibuja líneas diagonales - Cómo dibujar dos líneas diagonales de un div usando svg, ¿también es posible usar css?

Uso de SVG en HTML5

El 12 de diciembre, Conferencia de innovación de fuentes OSC de Beijing, el evento de fin de año de la tecnología de código abierto_

SVG, ScalableVectorGraphics, es un marcado HTML5 que se utiliza para dibujar gráficos vectoriales. Sólo necesita definir atributos XML para obtener elementos de imagen consistentes.

Antes de usar SVG, primero agregue esta etiqueta al HTMLbody. Al igual que otras etiquetas HTML, puedes agregar un atributo de ID a una etiqueta SVG. También puede agregar estilos CSS como "estilo de borde: sólido; ancho de borde: 2px;". Las etiquetas SVG comparten propiedades con otras etiquetas HTML. Puede agregar alto y ancho usando height="100px "width="200px".

Ahora vamos a agregar elementos SVG al código HTML. SVG proporciona muchas formas de dibujo, como líneas, círculos, polígonos, etc.

Líneas SVG:

Las líneas SVG se definen mediante una etiqueta en la que se pueden definir propiedades adicionales.

La etiqueta incluye atributos como las coordenadas del punto inicial (x1, y1) y las coordenadas del punto final (x2, y2). Especifique los valores x1,y1,x2,y2 para establecer las coordenadas inicial y final. Después de especificar las coordenadas, puede agregar algunos estilos y usar "stroke:Green;" en las propiedades de estilo para especificar el color de la línea. También puedes usar ancho de trazo:2 para establecer el ancho de la línea.

Código 1: Dibujar líneas usando SVG

!gt;

HTML5_VG_ine_xample

_-->

_

Referencias específicas: Cómo usar svg para dibujar dos líneas diagonales de un div, si usar css es ¿También puede?

Simplemente use CSS para dibujar dos líneas, dos líneas antes y después, luego gírela más o menos 45 grados (el grado específico puede ajustarlo lentamente usted mismo) y finalmente ajuste el posicionamiento absoluto. posición como mucho. Eso es todo.

Tutorial sobre el uso del complemento HTML5 ligero de jQuery para dibujar una animación de ruta de contorno gráfico SVG

Definitivamente te emocionarás cuando veas la fantástica animación de ruta de contorno gráfico en la página web. ¿Quieres crear una tú mismo? De hecho, no es difícil lograr este efecto. Puede utilizar el complemento HTML5 liviano jquery-drawsvg. jquery-drawsvg es un complemento liviano que usa jQuery para dibujar animaciones de rutas de contornos gráficos SVG. Este complemento utiliza el motor de animación integrado de jQuery para animar elementos de ruta en elementos SVG. La capa inferior se implementa utilizando las propiedades de trazo-dasharray y trazo-dashoffset.

Características del complemento de animación de ruta SVG:

Ligero, menos de 2 kb después de la compresión

Fácil de usar

Admite animación de transición de almacenamiento en caché efectos

Demostración:

Dirección de descarga del complemento:

Cómo utilizar:

Uso del complemento de animación de ruta de esquema gráfico SVG requiere la introducción de jQuery y archivos.

Inicializar complemento

Después de cargar el elemento DOM de la página, puede inicializar el complemento de animación gráfica SVG mediante el siguiente método para crear una animación de esquema para gráficos SVG.

Primero guarde la instancia del objeto inicializado como una variable:

varmySVG=$('#my_svg_element').drawsvg();

Luego puede ejecutar la animación. efecto:

('animate');

Parámetros de configuración

La siguiente es la animación de ruta de SVG. Los siguientes son los parámetros de configuración disponibles para crear esta animación de ruta SVG:

Tipo de parámetro Valor predeterminado Descripción duraciónInteger1000 Duración para completar cada animación de ruta staggerInteger200 Retraso antes de que comience cada animación de ruta easingStringswing usando jQuery

Facilitar el efecto de animación de transición del complemento reverseBooleanfalse si se debe revertir el dibujo callbackFunction()

{}Función de devolución de llamada después de que se completa la animación de la ruta