SVG 2D Introducción de HTML5 5 - Método de representación de color y definición

Autor：Eve Cole Fecha de actualización：2025-04-11 04:00:03

SVG y Canvas son los mismos, ambos usan métodos estándar de representación de color HTML/CSS, y estos colores pueden usarse para los atributos de relleno y trazo.

Básicamente, hay las siguientes formas de definir los colores :

1. Nombre del color: use el nombre de color rojo, azul, negro ...

2. Valor RGBA/RGB: esto también es fácil de entender, por ejemplo #FF0000, RGBA (255,100,100,0.5).

3. Valor hexadecimal: un color definido en hexadecimal, como #ffffff.

4. Valor de gradiente: esto también es lo mismo que en el lienzo, admitiendo dos colores de gradiente: gradiente lineal y gradiente de anillo. Como se muestra en la figura a continuación:

5. Llenado de patrones: use un patrón personalizado como color de relleno.

Los primeros son muy simples, centrémonos en los dos colores de relleno en los siguientes dos.

Gradiente lineal

El gradiente lineal se puede usar para definir gradientes lineales, y cada componente de color de gradiente se define usando el elemento de parada. Vea el siguiente ejemplo:

<svg>

</linealgradient>

</linealgradient>

#rect1 {relleno: url (#gradiente1); }

.stop1 {stop-color: rojo; }

.stop2 {stop-color: negro; Opacidad de parada: 0; }

.stop3 {stop-color: azul; }

]]>

</style>

</defs>

</svg>

En este ejemplo, debemos tener en cuenta :

1. Los elementos de color de gradiente deben colocarse en el elemento DEFS;

2. Debe establecer el valor de ID para el elemento de gradiente, de lo contrario, otros elementos no podrán usar este gradiente.

3. Los miembros del color de gradiente se definen usando Stop, y sus propiedades también se pueden definir usando CSS; Admite atributos como clase e ID, que son compatibles con HTML estándar. Otros atributos comunes son los siguientes :

Atributo de compensación : esto define el rango de acción del color del miembro, y el valor de este atributo es del 0% al 100% (o 0 a 1); Por lo general, el primer color se establece en 0%, y el último se establece en 100%.

Atributo de detención de color : esto es muy simple, definiendo el color del color del miembro.

Propiedad de parada : define la transparencia de los colores de los miembros.

X1, Y1, X2, Y2 ATRIBUTOS: Estos dos puntos definen la dirección del gradiente. Si no lo escribe por defecto, es un gradiente horizontal. En el ejemplo anterior, también se crea un gradiente vertical.

4. Use colores de gradiente, como se muestra en el ejemplo, solo asigne el valor para llenar o acariciar en forma de URL (#ID).

5. Reutilización de miembros de gradiente: también puede usar XLINK: HREF para referirse a miembros de gradiente definidos, por lo que el ejemplo anterior también se puede reescribir de la siguiente manera:

</linealgradient>

Gradiente de anillo

Use el elemento Radialgradient para definir el gradiente del anillo, o use parada para definir el color del miembro. Ver ejemplo:

<svg>

</RadialGradient>

</RadialGradient>

</defs>

</svg>

Del ejemplo anterior, excepto el nombre del elemento y algunos miembros especiales, todo lo demás es lo mismo que el gradiente lineal, incluida la definición de parada, debe colocarse en defs, debe establecerse en ID, usar URL (#ID) para asignar valores, etc. Estos miembros especiales son los siguientes:

Atributo de compensación : este es lo mismo que el valor de gradiente lineal, pero el significado es diferente. En el gradiente del anillo, el 0% representa el centro del círculo, lo cual es fácil de entender.

CX, CY, R ATRIBUTOS: De hecho, es fácil de entender. El anillo es gradual. Por supuesto, debe definir el centro y el radio del anillo. Puede comprender el tamaño y la posición del círculo en el ejemplo anterior.

Atributo FX, FY : define la posición en el centro del color (enfoque), es decir, las coordenadas en el lugar más denso del color de gradiente. En el ejemplo anterior, el Reddish más renovado es el centro del círculo, que es el efecto predeterminado; Si desea cambiarlo, puede establecer los valores de coordenadas FX, FY.

Sin embargo, debe prestar atención a los valores de CX, CY, R, FX, FY arriba. Encontrarás que todos son decimales, entonces, ¿cuáles son las unidades?

Esto requiere que primero comprenda otro atributo relacionado: gradientunidades , que define las unidades de coordenadas utilizadas para definir los colores de gradiente. Esta propiedad tiene 2 valores disponibles: UserSpaceOnuse y ObjectBoundingBox.

ObjectBoundingBox es el valor predeterminado. Las coordenadas que utiliza son relativas a la caja de encerrado del objeto (el caso en el que no es un cuadro de encierra cuadrado es más complicado, omitirlo), y el rango de valor es de 0 a 1. Por ejemplo, el valor de coordenadas de CX y CY en el ejemplo anterior (0.25, 0.25). Significa que el centro del círculo es 1/4 de la esquina superior izquierda de la caja del gabinete, y el radio de 0.25 significa que el radio es 1/4 de la longitud de la caja de recinto cuadrado del objeto, como puede ver en la figura.

UserSpaceOnuse significa que se utilizan coordenadas absolutas. Al usar esta configuración, debe asegurarse de que el color de gradiente y los objetos de relleno se mantengan en la misma posición.

Mire el siguiente ejemplo, tenga en cuenta que el valor predeterminado de la propiedad GradientUnits es ObjectBoundingBox:

<svg>

<radialgradient id = "gradiente5"

cx = "0.5" cy = "0.5" r = "0.5" fx = "0.25" fy = "0.25">

</RadialGradient>

</defs>

<rect x = "10" y = "10" rx = "15" ry = "15"

relleno = "url (#gradiente5)" Stroke = "Black" Stroke-width = "2"/>

<círculo cx = "60" cy = "60" r = "50" relleno = "transparente" trazo = "blanco"-width = "2"/>

<círculo cx = "35" cy = "35" r = "2" relleno = "blanco" trazo = "blanco"/>

<círculo cx = "60" cy = "60" r = "2" relleno = "blanco" trazo = "blanco"/>

</svg>

Conocerá el significado del enfoque al observar las representaciones.

Además, hay elementos de color de gradiente y algunas propiedades de transformación, como GradientTransform , que no es el foco aquí, y la transformación se resumirá más adelante.

Otro posible atributo que se usa es la propiedad DiftyMethod , que define el comportamiento que el color de gradiente debe tomar cuando alcanza su punto final. Esta propiedad tiene 3 valores opcionales: PAD (predeterminado), reflejar, repetir. No hace falta decir que el pad es una transición natural. Una vez que termine el color de gradiente, use el último color miembro para representar directamente la parte restante del objeto. Refect hará que el color de gradiente continúe, pero el color de gradiente continuará renderizando en reversa, comenzando desde el último color hasta el primer color; Cuando se alcanza el punto final del color de gradiente, invierta el orden, de modo que el objeto se llene de esta manera. Repetir también permitirá que el color de gradiente continúe renderizando, pero no se revertirá, y aún se volverá desde el primer color hasta el último color una y otra vez. Las representaciones son las siguientes:

Mira un código que renderiza repetidamente:

<svg>

<radialgradient id = "gradiente"

cx = "0.5" cy = "0.5" r = "0.25" fx = ". 25" fy = ". 25"

spreadmethod = "repetir">

</RadialGradient>

</defs>

<rect x = "50" y = "50" rx = "15" ry = "15"

relleno = "url (#gradient)"/>

</svg>

Relleno de textura

El relleno de textura también es una forma popular de relleno. En SVG, puede usar el patrón para crear una textura y luego usar este patrón para llenar otros objetos. Echemos un vistazo al ejemplo directamente:

<svg>

</linealgradient>

</linealgradient>

</defs>

<patrón id = "patrón" x = ". 05" y = ". 05">

<círculo cx = "25" cy = "25" r = "20" relleno = "url (#gradiente6)" relleno-opacidad = "0.5"/>

</patrón>

</defs>

</svg>

El ejemplo se ve simple, crea un patrón a partir de un color de gradiente y luego usa el patrón

Llena el rectángulo. Nota aquí:

1. El efecto es diferente al llenar este patrón en diferentes navegadores.

Por ejemplo, los ejemplos funcionan igual en Firefix y Chrome. Pero si haces el color de gradiente

Si el patrón se define en la misma combinación DEFS, Firefox aún puede renderizar normalmente.

Sin embargo, Chrome no puede reconocer el color de gradiente, solo lo llenará con el negro predeterminado.

2. El patrón también necesita definir ID.

3. El patrón también debe definirse en defs.

4. El uso del patrón también es asignar directamente la URL (#ID) para llenar o acariciar.

Los anteriores son todos muy simples. Centrémonos en la representación de coordenadas en el ejemplo. Las coordenadas son más complicadas en el patrón.

El patrón contiene dos propiedades relacionadas: PatternUnits y PatternContentUnits atributos; Ambas propiedades todavía tienen solo dos valores: ObjectBoundingBox y UsersPaceOnuse. El significado de estos dos valores se ha discutido anteriormente. Lo que es fácil de confundir aquí es que los valores predeterminados de estas dos propiedades son diferentes, pero cuando comprenda las razones para hacerlo, encontrará que hacer esto tiene sentido.

1. Atributo de PatternUnits

Esta propiedad es la misma que la propiedad de Gradiente de Gradiente, y el ObjectBoundingBox se usa de forma predeterminada. Los atributos afectados por este atributo son X, Y, ancho y altura. Estos cuatro atributos definen el punto de partida y el ancho del patrón respectivamente. Ambos usan valores relativos, y en el ejemplo, quieren completar direcciones horizontales y verticales 4 veces, por lo que tanto el ancho como la altura se establecen en 0.25.

2. Propiedad PatternContentUnits

El valor predeterminado de esta propiedad es exactamente lo contrario, utilizando UserSpaceOnuse. Esta propiedad describe el sistema de coordenadas de las formas dibujadas en el patrón (como Rect, círculo arriba). Es decir, de manera predeterminada, la forma que dibuja en el patrón utiliza un sistema de coordenadas diferente y el tamaño/posición del patrón en sí. Teniendo en cuenta el caso en el ejemplo anterior, queremos llenar un rectángulo de 200*200 y repetir cada dirección 4 veces. Esto significa que cada patrón es 50*50, por lo que los dos rectángulos y un círculo dentro del patrón se dibujan en este rectángulo de 50*50. De esta manera, podemos entender las coordenadas del rectángulo y el círculo en el patrón anterior. Además, para centrar el patrón en este ejemplo, debe compensarse con 10px antes de representar. Este valor está restringido por la propiedad PatternUnits, por lo que, por defecto, los valores X e Y son: 10/200 = 0.05.

Entonces, ¿por qué el patrón establece los valores predeterminados de los dos atributos como este?

Esto está determinado por el uso del usuario (discutido en el ejemplo anterior):

El primer estilo de patrón : creo que esta es la mayor parte de la situación, por lo que se procesa como el valor predeterminado: el patrón se estira a medida que el gráfico externo se escala, y no importa cuán grande sea el cuadrado exterior, el patrón siempre se llenará 4 veces en ambas direcciones. Sin embargo, los gráficos contenidos en el patrón no se estirarán a medida que se escalen los cuadrados que se llenan afuera. Aunque es descabellado, solo compruébalo.

El segundo estilo de patrón : la forma en el patrón también se estira a medida que se escala la forma del borde exterior. También podemos establecer el valor de la propiedad PatternContentUnits en ObjectBoundingBox para lograr este efecto. Por ejemplo, modifique la parte del patrón de la siguiente manera:

<círculo cx = ". 125" cy = ". 125" r = ". 1" relleno = "url (#gradiente)" relleno-opacidad = "0.5"/>

</patrón>

Después de la modificación, al cambiar el tamaño del rectángulo relleno, la forma en el patrón también se estirará. Y después de la modificación, se cambia a las coordenadas del objeto periférico, por lo que ya no son necesarias las coordenadas X e Y del patrón. El patrón siempre se ajustará para adaptarse a la forma llena.

El tercer estilo de patrón : la forma y el tamaño del patrón son fijos. No importa cómo se escalen los objetos periféricos, puede cambiar el sistema de coordenadas a UserSpaceOnuse para lograr este efecto. El código es el siguiente:

<círculo cx = "25" cy = "25" r = "20" relleno = "url (#gradiente)" relleno-opacidad = "0.5"/>

</patrón>

Los patrones típicos en estos 3 se muestran en la figura a continuación:

Referencia práctica:

Documento oficial: http://www.w3.org/tr/svg11/

Í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/