Antes, nos centramos en resumir varias formas, textos e imágenes. A continuación, resumiremos el procesamiento de color, es decir, los efectos de llenado y borde, mientras discutimos el lienzo. Encontrará que el contenido aquí es básicamente el mismo que el lienzo. Estas propiedades se pueden escribir en elementos como atributos o almacenados en CSS (esto es diferente del lienzo).
Color de relleno - Atributo de relleno Esta propiedad utiliza el color establecido para llenar el interior de la figura. Es muy simple de usar. Simplemente asigne el valor de color a esta propiedad directamente. Ver ejemplo:<rect x = "10" y = "10" Stroke = "Blue" Fill = "Red"
Fill-Opacity = "0.5" Stroke-Opacity = "0.8"/>
En el ejemplo anterior, se dibuja un rectángulo rojo y azul. Algunos puntos a tener en cuenta:
1. Si no se proporciona el atributo de relleno , el relleno negro se usará de forma predeterminada. Si desea cancelar el relleno, debe configurarlo en ninguno.
2. Puede establecer la transparencia del relleno, es decir, opacidad de relleno , y el rango de valores es de 0 a 1.
3. Un poco más complicado es el atributo de regla de relleno . Esta propiedad define un algoritmo que determina si el punto pertenece al rango de relleno; Además de heredar, hay dos valores:
No cero : el algoritmo utilizado para este valor es emitir líneas desde el punto que debe juzgarse en cualquier dirección, y luego calcular la dirección del punto de intersección entre la figura y el segmento de línea; El resultado del cálculo comienza de 0, y cada segmento de línea en una intersección es de izquierda a derecha, agregue 1; Cada segmento de línea en una intersección es de derecha a izquierda, reste 1; Después de calcular todos los puntos de intersección de esta manera, si el resultado de este cálculo no es igual a 0, el punto está en la figura y debe llenarse; Si el valor es igual a 0, no es necesario llenarse fuera de la figura. Vea el siguiente ejemplo: Evendd : El algoritmo utilizado para este valor es emitir líneas desde el punto que debe juzgarse en cualquier dirección, y luego calcular el número de puntos en los que la figura y el segmento de línea se cruzan. Si el número es impar, el punto se cambia a la figura y debe llenarse; Si el número es uniforme, el punto está fuera de la figura y no necesita ser llenado. Vea el ejemplo en la figura a continuación: Atributo de Border Color - Stroke El ejemplo anterior ha utilizado el atributo de trazo. Este atributo utiliza el valor establecido para dibujar el borde de la figura, que también es muy directo para usar. Simplemente asigne el valor de color. Aviso:1. Si no se proporciona el atributo de carrera , el borde de gráfico no se dibuja de forma predeterminada.
2. Puede establecer la transparencia del borde, que es la opacidad de accidente cerebrovascular , y el rango de valor es de 0 a 1.
De hecho, la situación de los bordes es ligeramente más complicada que el interior del gráfico, porque además del color, los bordes también tienen formas que deben definirse.
Punto final de la línea - propiedad de trazo -linecap
Esta propiedad define el estilo del punto final del segmento de línea. Esta propiedad puede usar tres valores de tope, cuadrado y redondo . Ver ejemplo:<svg>
<línea x1 = "40" x2 = "120" y1 = "20" y2 = "20" Stroke = "Black" Stroke-width = "20" Stroke-Linecap = "Butt"/>
<línea x1 = "40" x2 = "120" y1 = "60" y2 = "60" Stroke = "Black" Stroke-width = "20" Stroke-Linecap = "Square"/>
<línea x1 = "40" x2 = "120" y1 = "100" y2 = "100" Stroke = "Black" Stroke-width = "20" Stroke-Linecap = "Round"/>
</svg>
Este código dibuja 3 líneas usando diferentes estilos de puntos finales de línea.
Desde la imagen a la izquierda podemos ver fácilmente la diferencia en los estilos en 3.
Conexión de línea - Atributo de Stroke -LineJoin Esta propiedad define el estilo en la conexión de segmentos de línea. Esta propiedad puede usar los tres valores de Mitre, Round y Bisel . Ver ejemplo:<svg>
<Polyline Points = "40 60 80 20 120 60" Stroke = "Black" Stroke-width = "20"
Stroke-Linecap = "Butt" Fill = "Transparent" Stroke-lineJoin = "Mitre"/>
<Polyline Points = "40 140 80 100 120 140" Stroke = "Black" Stroke-width = "20"
Stroke-Linecap = "Round" Fill = "Transparent" Stroke-lineJoin = "Round"/>
<Polyline Points = "40 220 80 180 120 220" Stroke = "Black" Stroke-width = "20"
Stroke-Linecap = "Square" Fill = "Transparent" Stroke-lineJoin = "bevel"/>
</svg>
Desde la imagen a la izquierda podemos ver fácilmente la diferencia de estilo en 3.
El atributo virtual y real - Stroke -DashArray
Esta propiedad puede establecer las líneas virtuales y reales del segmento de línea. Ver ejemplo:<svg>
<ruta d = "m 10 75 Q 50 10 100 75 T 190 75" Stroke = "Black"
Stroke-Linecap = "Round" Stroke-DashArray = "5,10,5" relleno = "Ninguno"/>
<ruta d = "m 10 75 L 190 75" Stroke = "Red"
Stroke-Linecap = "Round" Stroke-width = "1" Stroke-Dasharray = "5,5" relleno = "Ninguno"/>
</svg>
Esta propiedad establece algunas columnas de números, pero estos números deben estar separados por coma.
Por supuesto, los espacios pueden incluirse en el atributo, pero los espacios no se usan como delimitadores. Cada número
La longitud del segmento de línea continua se define, y se ciclista en el orden del dibujo y no el dibujo.
Por lo tanto, la línea dibujada en el ejemplo a la izquierda es una línea continua con 5 unidades, dejando espacios con 5 unidades.
Dibuja 5 unidades de líneas continuas ... y continúa así.
Además de estas propiedades de uso común, se pueden establecer las siguientes propiedades:
Stroke-Miterlimit : esto es lo mismo que en el lienzo, que maneja el efecto de inglete en la conexión entre cuándo y si se dibuja la línea. Stroke-Dashoffset : esta propiedad establece la posición donde la línea punteada comienza a dibujar. Use CSS para mostrar datos HTML5 fortalece la idea de Div+CSS, por lo que la parte que muestra los datos también se puede entregar a CSS para su procesamiento. En comparación con los elementos HTML ordinarios, es solo color de fondo y borde reemplazado por relleno y accidente cerebrovascular. La mayoría de los otros son similares. Tomemos un breve ejemplo:#Myrect: hover {
accidente cerebrovascular: negro;
relleno: azul;
}
¿No es muy familiar? Es así de simple.
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/