<svg>
<rect x = "10" y = "10" Stroke = "Black" Fill = "Transparent" Stroke-width = "5"/>
<rect x = "60" y = "10" rx = "10" ry = "10" Stroke = "Black" Fill = "Transparent" Stroke-width = "5"/>
<círculo cx = "25" cy = "75" r = "20" Stroke = "rojo" relleno = "transparente" stroke-width = "5"/>
<ellipse cx = "75" cy = "75" rx = "20" ry = "5" stroke = "rojo" relleno = "transparente" stroke-width = "5"/>
<línea x1 = "10" x2 = "50" y1 = "110" y2 = "150" trazo = "naranja" relleno = "transparente" stroke-width = "5"/>
<Polyline Points = "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
Stroke = "Orange" Fill = "Transparent" Stroke-width = "5"/>
<Polygon Points = "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
Stroke = "Green" Fill = "Transparent" Stroke-width = "5"/>
<Path d = "M20,230 Q40,205 50,230 T90,230" Fill = "None" Stroke = "Blue" Stroke-width = "5"/>
</svg>
Los resultados que se muestran en este HTML son los siguientes:
Este ejemplo dibuja muchas formas: rectángulos normales, rectángulos redondeados, círculos, elipses, líneas rectas, polígonos y caminos. Estos son todos los elementos gráficos básicos. Aunque hay muchas formas de dibujar un gráfico, como RECT se puede implementar utilizando RECT o Rath, aún debemos tratar de mantener el contenido de SVG corto y conciso y fácil de leer .
A continuación se muestran las instrucciones para usar cada forma (solo existen las propiedades básicas que controlan la forma y la posición de la figura, y las propiedades, como el llenado, se resumen más adelante).
Rectángulo - Elemento RECT Este elemento tiene 6 propiedades que controlan posiciones y formas, a saber:X: El valor x de las coordenadas (sistema de coordenadas del usuario) de la esquina superior izquierda del rectángulo.
Y: El valor y de las coordenadas (sistema de coordenadas del usuario) de la esquina superior izquierda del rectángulo.
Ancho: ancho del rectángulo.
Altura: Altura del rectángulo.
RX: Cuando se logra el efecto de esquina redondeado, el radio de la esquina redondeada a lo largo del eje X.
RY: Al lograr el efecto de esquina redondeado, el radio de la esquina redondeada a lo largo del eje Y.
Por ejemplo, en el ejemplo anterior, se logra el efecto de esquina redondeado, y también puede lograr el efecto de la esquina de elipse estableciendo RX y RY en diferentes valores.
Círculo - Elemento Circle Las propiedades de este elemento son simples, principalmente para definir el centro y el radio:R: El radio del círculo.
CX: valor X de la coordenada del centro.
CY: el valor y de la coordenada central del círculo.
Ellipse - elemento de ellipse Este es un elemento circular más general. Puede controlar las longitudes del eje semi-mayor y el eje semi-mayor respectivamente para lograr diferentes elipses. Es fácil pensar que cuando los dos semi eje son iguales, es un círculo perfecto.RX: Axis medio mayor (radio x).
RY: Eje semi-corto (Y-Radius).
CX: valor X de la coordenada del centro.
CY: el valor y de la coordenada central del círculo.
Línea - Elemento de línea Una línea recta necesita definir el punto de partida y el punto final:X1: Punto de partida X coordenada.
Y1: El punto de partida Y coordenada.
X2: Punto final X coordenada.
Y2: La coordenada del punto final y.
Polilínea - elemento polilínea Las polilíneas deben definir principalmente los puntos finales de cada segmento de línea, por lo que solo se requiere el conjunto de un punto como parámetros:Puntos: una serie de puntos separados por espacios, comas, líneas nuevas, etc. Cada punto debe tener 2 números: valor x y valor y. Entonces, los siguientes 3 puntos (0,0), (1,1) y (2,2) pueden escribirse como: 0 0, 1 1, 2 2.
Polígono - Elemento Polygon Este elemento es hacer un paso más que el elemento polilínea, conectar el último punto y el primer punto para formar una figura cerrada. Los parámetros son los mismos.Puntos: una serie de puntos separados por espacios, comas, líneas nuevas, etc. Cada punto debe tener 2 números: valor x y valor y. Entonces, los siguientes 3 puntos (0,0), (1,1) y (2,2) pueden escribirse como: 0 0, 1 1, 2 2.
Ruta - Elemento de ruta Este es el elemento más general y poderoso; Usando este elemento, puede implementar cualquier otra figura, no solo las formas básicas anteriores, sino también formas complejas como la curva Bezier; Además, el uso de la ruta puede lograr segmentos de transición suaves. Aunque la polilínea también se puede usar para lograr este efecto, hay muchos puntos que deben proporcionarse, y el efecto no es bueno si se magnifica. Este elemento controla la posición y la forma con solo un parámetro:D: Una serie de instrucciones de dibujo y parámetros de dibujo (puntos).
Las instrucciones de dibujo se dividen en dos tipos: instrucciones de coordenadas absolutas e instrucciones de coordenadas relativas. Las letras utilizadas en estas dos instrucciones son las mismas, es decir, la caja superior y minúscula es diferente. Las instrucciones absolutas usan letras mayúsculas, y las coordenadas también son coordenadas absolutas; Las instrucciones relativas utilizan letras minúsculas correspondientes, y las coordenadas de puntos representan compensaciones.
Instrucción de dibujo de coordenadas absolutas Los parámetros de este conjunto de instrucciones representan coordenadas absolutas. Suponiendo que el cepillo actual se encuentra en (x0, y0), la siguiente instrucción de coordenadas absolutas representa el significado de la siguiente manera:| instrucción | parámetro | ilustrar |
| METRO | xy | Mueva el pincel al punto (x, y) |
| L | xy | El cepillo dibuja el segmento de línea desde el punto actual hasta el punto (x, y) |
| H | incógnita | El pincel dibuja segmento de línea horizontal desde el punto de corriente hasta el punto (x, y0) |
| V | Y | El pincel dibuja segmento de línea vertical desde el punto de corriente hasta el punto (x0, y) |
| A | RY RY X-EXIS-ROTACIÓN GRANDE-ARC-FLAG-FLAG FLAG XY | El cepillo dibuja un arco desde el punto de corriente hasta el punto (x, y) |
| do | x1 y1, x2 y2, xy | El cepillo dibuja una curva de Bezier cúbica desde el punto de corriente hasta el punto (x, y) |
| S | x2 y2, xy | Versión especial de la curva cúbica de Bezier (se omite el primer punto de control) |
| Q | x1 y1, xy | Dibuja una curva de Bezier cuadrática al punto (x, y) |
| T | xy | Versión especial de la curva cuadrática de Bezier (puntos de control omitidos) |
| Z | Sin parámetros | Dibuja una figura cerrada, y si el atributo D no especifica el comando z, luego dibuje el segmento de línea en lugar de la figura de encerrado. |
Mueva el comando de pincel m, dibuje el comando de línea: l, h, v y cierre el comando z son relativamente simples; Lo siguiente es un enfoque en las pocas instrucciones para dibujar la curva. Instrucción de dibujo de arco: A RX RY X-AXIS-ROTACIÓN GRANDE-Arc-Flag-Flag Flag xy
Es más complicado conectar 2 puntos con un arco, y hay muchas situaciones, por lo que este comando tiene 7 parámetros, que controlan cada atributo de la curva. A continuación se explica el significado del valor numérico:
rx, ry es la longitud del eje semi-mayor y el eje semi-corto del arco
La rotación del eje X es el ángulo entre el eje x y la dirección horizontal donde se encuentra este arco, es decir, el ángulo de rotación en sentido antihorario del eje x, y el número negativo representa el ángulo de rotación en sentido horario.
La forma de arco grande es 1 para representar un arco de ángulo grande y 0 para representar un arco de ángulo pequeño.
La forma de barrido es 1, lo que representa el arco desde el punto de inicio hasta el punto final en sentido horario alrededor del centro, y 0 representa la dirección en sentido antihorario.
x, y son las coordenadas terminales de arco.
No hablaré sobre los dos primeros parámetros y los dos últimos parámetros, es muy simple; Hablemos de los tres parámetros en el medio:
La rotación del eje x representa el ángulo de rotación y experimenta las diferencias en los arcos en el siguiente ejemplo:
<svg>
<ruta d = "m10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50-45 0 1 215.1 109.9
L 315 10 "Stroke =" Black "Fill =" Green "Stroke-width =" 2 "Fill-Opacity =" 0.5 "/>
</svg>
El HTML anterior dibuja la siguiente figura:
De la figura, podemos ver que los diferentes parámetros de rotación de elipse conducen a diferentes direcciones del arco dibujado. Por supuesto, este parámetro no tiene ningún efecto en el círculo perfecto.
Gran-arco-Flag y Sweep-Flag Control el tamaño y la dirección del arco, y experimentan las diferencias en el ARC en el siguiente ejemplo:
<svg>
<ruta d = "m80 80
A 45 45, 0, 0, 0, 125 125
L 125 80 Z "Fill =" Green "/>
<ruta d = "m230 80
A 45 45, 0, 1, 0, 275 125
L 275 80 Z "Fill =" Red "/>
<ruta d = "m80 230
A 45 45, 0, 0, 1, 125 275
L 125 230 Z "Fill =" Purple "/>
<ruta d = "m230 230
A 45 45, 0, 1, 1, 275 275
L 275 230 Z "Fill =" Blue "/>
</svg>
Este HTML dibuja las siguientes imágenes:
De lo anterior, podemos ver que estos parámetros son en realidad los únicos parámetros necesarios para determinar una sección de ARC. También se ve aquí que los ARC en SVG son más complicados que los de Canvas.
Dibujo de instrucciones de curva de Bezier: C x1 y1, x2 y2, xyHay dos puntos de control en la curva de Bezier cúbica, a saber (x1, y1) y (x2, y2), y el último (x, y) representa el punto final de la curva. Experimente los siguientes ejemplos:
<svg>
<ruta d = "M10 10 C 20 20, 40 20, 50 10" Stroke = "Black" Fill = "Transparent"/>
<ruta d = "M70 10 C 70 20, 120 20, 120 10" Stroke = "Black" Fill = "Transparent"/>
<ruta d = "M130 10 C 120 20, 180 20, 170 10" Stroke = "Black" Fill = "Transparent"/>
<ruta d = "M10 60 C 20 80, 40 80, 50 60" Stroke = "Black" Fill = "Transparent"/>
<ruta d = "M70 60 C 70 80, 110 80, 110 60" Stroke = "Black" Fill = "Transparent"/>
<ruta D = "M130 60 C 120 80, 180 80, 170 60" Stroke = "Black" Fill = "Transparent"/>
<ruta d = "M10 110 C 20 140, 40 140, 50 110" Stroke = "Black" Fill = "Transparent"/>
<ruta d = "M70 110 C 70 140, 110 140, 110 110" Stroke = "Black" Fill = "Transparent"/>
<Path D = "M130 110 C 120 140, 180 140, 170 110" Stroke = "Black" Fill = "Transparent"/>
</svg>
Este fragmento HTML dibuja la siguiente figura:
De lo anterior podemos ver que el punto de control controla el radian de la curva.
Versión especial de Cubic Bezier Curve: SX2 Y2, XYMuchas veces, para dibujar una curva suave, es necesario dibujar la curva continuamente varias veces. En este momento, para suavizar la transición, el punto de control de la segunda curva es a menudo el punto de mapeo del primer punto de control de la curva en el otro lado de la curva. Esta versión simplificada se puede usar en este momento. Cabe señalar aquí que si no hay otras instrucciones S o instrucciones C frente a la instrucción S, entonces los dos puntos de control se considerarán iguales y degeneran en la curva de Bezier cuadrática; Si la instrucción S se usa después de otra instrucción S o instrucción C, el primer punto de control de la instrucción S posterior se establecerá de forma predeterminada en un punto de mapeo del segundo punto de control de la curva anterior. Vamos a experimentarlo:
<svg>
<ruta d = "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" Stroke = "Black" Fill = "Transparent"/>
</svg>
Este fragmento HTML se dibuja de la siguiente manera:
La instrucción S anterior tiene solo un segundo punto de control, y el primer punto de control utiliza un punto de mapeo del segundo punto de control de la instrucción de curva anterior.
Dibujo de instrucciones de curva de Bezier Bezier: QX1 Y1, XY, T XY (versión especial de la curva cuadrática de Bezier) La curva de Bezier cuadrática tiene solo un punto de control (x1, y1), que generalmente se muestra en la figura a continuación:Si está dibujando una curva continuamente, también puede usar la versión simplificada de T. De manera similar, cuando T es solo antes de los comandos Q o T, el punto de control del comando T posterior se establecerá en el punto de mapeo del punto de control de la curva anterior de forma predeterminada. Vamos a experimentarlo:
<svg>
<ruta d = "m10 80 q 52.5 10, 95 80 t 180 80" trazo = "negro" relleno = "transparente"/>
</svg>
Este fragmento HTML se dibuja de la siguiente manera:
Del mismo modo, si el comando t no está precedido por el comando Q o t, se considera que no hay un punto de control y la línea dibujada es una línea recta.
Instrucción de dibujo de coordenadas relativas Las letras de la instrucción de dibujo de coordenadas absolutas son las mismas, excepto que todas son minúsculas. Los parámetros involucrados en las coordenadas en los parámetros de este conjunto de instrucciones representan coordenadas relativas, lo que significa que los parámetros representan el desplazamiento desde el punto de corriente al punto de destino, un número positivo representa el desplazamiento positivo al eje, y un número negativo representa el desplazamiento inverso. Sin embargo, para las instrucciones z, no hay diferencia en el caso.Cabe señalar aquí que las instrucciones de coordenadas absolutas y las instrucciones de coordenadas relativas se pueden usar de manera mixta . A veces, el uso mixto puede conducir a métodos de dibujo más flexibles.
Notas sobre el dibujo de la ruta SVG: Al dibujar una figura con agujeros, debe prestar atención a: el dibujo de los bordes exteriores debe ser en sentido antihorario, y el orden de los bordes de los agujeros dentro debe ser en sentido horario. Solo el efecto de relleno gráfico dibujado de esta manera será correcto. Referencia práctica:Índice de script: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Centro de desarrollo: https://developer.mozilla.org/en/svg
Referencia popular: http://www.chinasvg.com/
Documento oficial: http://www.w3.org/tr/svg11/