Crear elemento
1) Crea el elemento svg
En svg.js, cada elemento es un objeto y se puede crear construyéndolo:
import {
Rect } from "@svgdotjs/svg.js"
var rect = new Rect().size(100, 100).addTo(draw)
// or to reuse an existing node
var rect = new Rect(node).size(100, 100)
o usando el constructor en el contenedor:
var rect = draw.rect(100, 100)
2) Crear elemento svg con atributo
svg.js permite cambiar los atributos mediante el método attr() o llamando a métodos dedicados como move(). Sin embargo, suele ser más fácil pasar propiedades directamente en el momento de la construcción:
var rect = new Rect({
width: 100, height: 100}).addTo(draw)
// or
var rect = draw.rect({
width: 100, height: 100})
Esta es una abreviatura de llamar a attr() después de la construcción.
2.domingo
SVG.Dom es el prototipo base para todos los elementos Dom creados por SVG.js. Proporciona una funcionalidad Dom simple como attr() y se puede usar en elementos HTML.
La clase SVG.Dom también es útil para todos los elementos no descritos por SVG.js.
1）elemento()
Se puede crear una instancia de la clase SVG.Dom con el método element() en cualquier elemento:
var element = draw.element('title')
El valor de cadena pasado como primer argumento es el nombre del nodo que debe generarse.
Opcionalmente, los atributos se pueden agregar directamente pasándolos como segundo argumento:
var element = deraw.element('title', {
id: 'myId'})
2）elemento.palabra()
Las instancias SVG.Dom proporcionan métodos adicionales para agregar texto sin formato:
var element = draw.element('title').words('This is a title.')
3.Recto
1）rect(ancho,alto)
rect tiene dos parámetros, ancho y alto:
var rect = draw.rect(100, 100)
2）rect.radius(número/(númerox, númeroy))
rect puede establecer esquinas redondeadas
rect.radius(10)
rect.radius(10, 20)
4.Círculo
1）círculo(diámetro)
El único parámetro que necesita el círculo es el diámetro:
var circle = draw.circle(100)
2）círculo.radio(número)
rect puede establecer el radio
circle.radius(75)
5.Elipse
1）elipse(diámetro)
la elipse tiene dos parámetros, ancho y alto:
var ellipse = draw.ellipse(100, 200)
2）elipse.radio(número)
Las elipses también se pueden redefinir por su radio:
ellipse.radius(75)
6.Línea
1）línea(Ax, Ay, Bx, Por)
Dibuja una línea desde el punto A al punto B.
var line = draw.line(100, 100, 100, 150).stroke({
width: 10, color: 'red' })
Los elementos de línea se pueden crear de cuatro maneras.
2）línea.matriz()
Referencia a una instancia de SVG.PointArray. Este método es solamente para uso interno:
line.array()
3）línea.trama()
Utilice el método plot() para actualizar las filas:
line.plot(50, 30, 100, 150)
Alternativamente, también acepta cadenas de puntos:
line.plot('0,0 100,150')
o conjunto de puntos:
line.plot([[0, 0], [100, 150]])
o una instancia de SVG.PointArray:
var array = new SVG.PointArray([[0, 0], [100, 150]])
line.plot(array)
El método plot() también se puede animar:
line.animate(3000).plot([[200, 200], [100, 150]])
7.Polilínea
1）polilínea()
Un elemento de polilínea define un conjunto de segmentos de línea recta conectados. Normalmente, los elementos de polilínea definen la forma del desarrollo.
var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({
width: 1 })
La cadena de polilínea consta de una lista de puntos separados por comas o espacios.
Por ejemplo: x,yx,yx,y o xyxyxy o x,y,x,y,x,y
Como alternativa, un conjunto de puntos también funcionaría:
var polyline = draw.polyline([[0,0], [100,50], [50,100]])
O incluso una serie plana de puntos preferidos:
var polyline = draw.polyline([0,0, 100,50, 50,100])
2）polilínea.matriz()
Referencia a una instancia de SVG.PointArray. Este método es solamente para uso interno:
polyline.array()
3）polilínea.clear()
Al analizar los datos de puntos dados, el resultado se almacenará en caché. Este método borra el caché.
polyline.clear()
4）polilínea.plot()
Una polilínea se puede actualizar usando el método plot():
polyline.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])
El método plot() también se puede animar:
polyline.animate(3000).plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])
8.polígono
1）polígono()
A diferencia de un elemento de polilínea, un elemento de polígono define una forma cerrada que consta de un conjunto de segmentos de línea recta conectados:
var polygon = draw.polygon('0,0 100,50 50,100').fill('#000').stroke({
width: 1 })
Una cadena o matriz de polígonos es exactamente igual que una cadena de polilínea. No es necesario cerrar la forma, ya que el primer y el último punto se conectarán automáticamente.
2）matriz.polígono()
Referencia a una instancia de SVG.PointArray. Este método es solamente para uso interno:
polygon.array()
3）polígono.clear()
Al analizar los datos de puntos dados, el resultado se almacenará en caché. Este método borra el caché.
polygon.clear()
4）polígono.plot()
El polígono se puede actualizar usando el método plot():
polygon.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])
El método plot() también se puede animar:
polygon.animate(3000).plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])
9.Ruta()
1）ruta()
Las cadenas de ruta son similares a las cadenas de polígonos, pero son mucho más complejas para soportar curvas:
draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
Para obtener más información sobre las cadenas de datos de ruta, consulte la documentación de SVG sobre datos de ruta .
2）ruta.matriz()
Referencia a una instancia de SVG.PointArray. Este método es solamente para uso interno:
path.array()
3）ruta.borrar()
Al analizar los datos de puntos dados, el resultado se almacenará en caché. Este método borra el caché.
path.clear()
4）ruta.longitud()
Obtenga la longitud total de los elementos de la ruta:
var length = path.length()
5）ruta.puntoEn()
Obtener puntos en un camino de una longitud determinada:
var point = path.pointAt(105)
6）ruta.trama()
Las rutas se pueden actualizar usando el método plot():
path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
El método plot() también se puede animar:
path.animate(2000).plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80').loop(true, true)
Solo hay soporte básico para rutas fusionadas en SVG.js, lo que significa que solo se pueden animar rutas con el mismo comando (M, C, S, etc.).
7）ruta.texto()
Se puede crear un elemento de texto con el método text(), donde la ruta del texto está vinculada a la ruta actual:
var textpath = path.text('SVG.js rocks!')