Introdução SVG 2D do HTML5 5 - Método de representação e definição de cores

Autor：Eve Cole Data da Última Atualização：2025-04-11 04:00:03

SVG e tela são iguais, ambos usam métodos padrão de representação de cores HTML/CSS, e essas cores podem ser usadas para atributos de preenchimento e acidente vascular cerebral.

Existem basicamente as seguintes maneiras de definir cores :

1. Nome da cor: Use o nome de cor vermelho, azul, preto ...

2. Valor RGBA/RGB: Isso também é fácil de entender, por exemplo, #FF0000, RGBA (255.100,100,0.5).

3. Valor hexadecimal: uma cor definida em hexadecimal, como #ffffff.

4. Valor do gradiente: também é o mesmo que na tela, suportando duas cores de gradiente: gradiente linear e gradiente de anel. Como mostrado na figura abaixo:

5. Enclingro de padrões: use um padrão personalizado como cor de preenchimento.

Os primeiros são muito simples, vamos nos concentrar nas duas cores de preenchimento nos próximos dois.

Gradiente linear

O gradiente linear pode ser usado para definir gradientes lineares e cada componente de cor gradiente é definido usando o elemento de parada. Veja o seguinte exemplo:

<Svg>

<FS>

</linearGradient>

</linearGradient>

#ret1 {preenchimento: url (#gradient1); }

.Stop1 {Stop-Color: Red; }

.Stop2 {Stop-Color: Black; Stop-opacidade: 0; }

.Stop3 {Stop-Color: Blue; }

]]>

</style>

</defs>

</svg>

Neste exemplo, precisamos observar :

1. Os elementos da cor do gradiente devem ser colocados no elemento DEFS;

2. Você precisa definir o valor de ID para o elemento gradiente; caso contrário, outros elementos não poderão usar esse gradiente.

3. Os membros da cor do gradiente são definidos usando parada e suas propriedades também podem ser definidas usando CSS; Ele suporta atributos como Class e ID, que são suportados pelo HTML padrão. Outros atributos comuns são os seguintes :

Atributo offset : isso define o intervalo de ação da cor do membro, e o valor desse atributo é de 0% a 100% (ou 0 a 1); Geralmente, a primeira cor é definida como 0%e a última é definida como 100%.

Atributo Stop-Color : Isso é muito simples, definindo a cor da cor do membro.

Propriedade de stop-opacity : define a transparência das cores dos membros.

Atributos X1, Y1, X2, Y2 : Esses dois pontos definem a direção do gradiente. Se você não escrever por padrão, é um gradiente horizontal. No exemplo acima, também é criado um gradiente vertical.

4. Use as cores do gradiente, como mostrado no exemplo, basta atribuir o valor para preencher ou acariciar na forma de URL (#ID).

5. Reutilização de membros do gradiente: Você também pode usar o XLink: HREF para se referir a membros do gradiente definido, para que o exemplo acima também possa ser reescrito da seguinte forma:

</linearGradient>

Gradiente de anel

Use o elemento radialgradiente para definir o gradiente de anel ou use Stop para definir a cor do membro. Veja o exemplo:

<Svg>

<FS>

</radialgradiente>

</radialgradiente>

</defs>

</svg>

A partir do exemplo acima, exceto pelo nome do elemento e alguns membros especiais, tudo o mais é o mesmo que o gradiente linear, incluindo a definição de parada, deve ser colocado em defs, ele deve ser definido como ID, use URL (#ID) para atribuir valores etc. Esses membros especiais são os seguintes:

Atributo Offset : É o mesmo que o valor linear do gradiente, mas o significado é diferente. No gradiente do anel, 0% representa o centro do círculo, que é fácil de entender.

atributos cx, cy, r : Na verdade, é fácil de entender. O anel é gradual. Obviamente, você precisa definir o centro e o raio do anel. Você pode entender o tamanho e a posição do círculo no exemplo acima.

FX, atributo fy : define a posição no centro da cor (foco), ou seja, as coordenadas no local mais denso da cor do gradiente. No exemplo acima, o avermelhado mais vermelho é o centro do círculo, que é o efeito padrão; Se você deseja alterá -lo, pode definir os valores de coordenadas FX, FY.

No entanto, você precisa prestar atenção aos valores de CX, CY, R, FX, FY acima. Você descobrirá que todos são decimais, então quais são as unidades?

Isso exige que você entenda primeiro outro atributo relacionado: GradientUnits , que define as unidades de coordenadas usadas para definir cores de gradiente. Esta propriedade possui 2 valores disponíveis: UsersPaceonuse e ObjectBoundingBox.

ObjectBoundingBox é o valor padrão. As coordenadas que utilizam são relativas à caixa de anexo do objeto (o caso em que não é uma caixa de anexo quadrado é mais complicado, ignoram -a) e a faixa de valor é de 0 a 1. Por exemplo, o valor de coordenadas de CX e Cy no exemplo acima (0,25, 0,25). Isso significa que o centro do círculo é 1/4 do canto superior esquerdo da caixa do gabinete, e o raio de 0,25 significa que o raio é 1/4 do comprimento da caixa de gabinete quadrado do objeto, como você pode ver na figura.

UsersPaceOnuse significa que as coordenadas absolutas são usadas. Ao usar essa configuração, você deve garantir que a cor do gradiente e os objetos de preenchimento sejam mantidos na mesma posição.

Veja o exemplo a seguir, observe que o valor padrão da propriedade GradientUnits é o ObjectBoundingBox:

<Svg>

<FS>

<radialgradiente id = "gradiente5"

cx = "0,5" cy = "0,5" r = "0,5" fx = "0,25" fy = "0,25">

</radialgradiente>

</defs>

<ret X = "10" y = "10" rx = "15" ry = "15"

FILL = "URL (#gradiente5)" Stroke = "Black" Stroke-Width = "2"/>

<círculo cx = "60" cy = "60" r = "50" preench = "transparent" stroke = "branco" stroke-width = "2"/>

<círculo cx = "35" cy = "35" r = "2" preench = "white" stroke = "white"/>

<círculo cx = "60" cy = "60" r = "2" preench = "branco" stroke = "branco"/>

</svg>

Você conhecerá o significado de foco olhando as renderizações.

Além disso, existem elementos de cores gradientes e algumas propriedades de transformação, como o gradientetransform , que não é o foco aqui, e a transformação será resumida posteriormente.

Outro atributo possível usado é a propriedade Spreadmethod , que define o comportamento que a cor do gradiente deve tomar quando atingir seu ponto final. Esta propriedade possui 3 valores opcionais: pad (padrão), reflita, repita. Escusado será dizer que PAD é uma transição natural. Depois que a cor do gradiente terminar, use a cor do último membro para renderizar diretamente a parte restante do objeto. Refet fará com que a cor do gradiente continue, mas a cor do gradiente continuará a renderizar ao contrário, começando da última cor à primeira cor; Quando o ponto final da cor do gradiente for atingido novamente, reverta a ordem, para que o objeto seja preenchido dessa maneira. A repetição também permitirá que a cor do gradiente continue a renderizar, mas não será revertida e ainda renderá da primeira cor para a última cor repetidamente. As renderizações são as seguintes:

Veja um pedaço de código que renderiza repetidamente:

<Svg>

<FS>

<radialgradiente id = "gradiente"

cx = "0,5" cy = "0,5" r = "0,25" fx = ". 25" fy = ". 25"

spreadmethod = "repete">

</radialgradiente>

</defs>

<ret X = "50" y = "50" rx = "15" ry = "15"

FILL = "URL (#Gradiente)"/>

</svg>

Preenchimento de textura

O enchimento de textura também é uma maneira popular de preencher. No SVG, você pode usar o padrão para criar uma textura e, em seguida, usar esse padrão para preencher outros objetos. Vamos dar uma olhada no exemplo diretamente:

<Svg>

<FS>

</linearGradient>

</linearGradient>

</defs>

<FS>

<círculo cx = "25" cy = "25" r = "20" preench = "url (#gradient6)" preencher-opacity = "0,5"/>

</padrão>

</defs>

</svg>

O exemplo parece simples, crie um padrão a partir de uma cor gradiente e depois use o padrão

Preencha o retângulo. Nota aqui:

1. O efeito é diferente ao preencher esse padrão em diferentes navegadores.

Por exemplo, os exemplos funcionam o mesmo em Firefix e Chrome. Mas se você fizer a cor do gradiente

Se o padrão for definido na mesma combinação DEFS, o Firefox ainda poderá renderizar normalmente.

No entanto, o Chrome não pode reconhecer a cor do gradiente, ele apenas o preencheria com o preto padrão.

2. O padrão também precisa definir ID.

3. O padrão também deve ser definido em defs.

4. O uso do padrão também é atribuir diretamente o URL (#ID) para preencher ou acariciar.

Os acima são todos muito simples. Vamos nos concentrar na representação de coordenadas no exemplo. As coordenadas são mais complicadas em padrão.

O padrão contém duas propriedades relacionadas: Patternunits e PatternContentunits Atributos; Ambas as propriedades ainda têm apenas dois valores: ObjectBoundingBox e UsersPaceOnuse. O significado desses dois valores foi discutido acima. O que é fácil confundir aqui é que os valores padrão dessas duas propriedades são diferentes, mas quando você entende os motivos para fazer isso, descobrirá que isso faz sentido.

1. ATRIBUIÇÃO DE PADRANCIDADES

Essa propriedade é a mesma que a propriedade GradientUnits do Gradiente, e o ObjectBoundingBox é usado por padrão. Os atributos afetados por esse atributo são x, y, largura e altura. Esses quatro atributos definem o ponto de partida e a largura do padrão, respectivamente. Ambos usam valores relativos e, no exemplo, desejam preencher as direções horizontal e vertical 4 vezes, portanto, a largura e a altura são definidas como 0,25.

2. Propriedade do PatternContentunits

O valor padrão dessa propriedade é exatamente o oposto, usando o UsuáriospaceOnuse. Esta propriedade descreve o sistema de coordenadas das formas desenhadas no padrão (como Rect, círculo acima). Ou seja, por padrão, a forma que você desenha no padrão usa um sistema de coordenadas diferentes e o tamanho/posição do próprio padrão. Considerando o caso no exemplo acima, queremos preencher um retângulo de 200*200 e repetir cada direção 4 vezes. Isso significa que cada padrão é de 50*50, portanto, os dois retângulos e um círculo dentro do padrão são desenhados neste retângulo 50*50. Dessa forma, podemos entender as coordenadas do retângulo e círculo no padrão acima. Além disso, para centralizar o padrão neste exemplo, ele precisa ser compensado por 10px antes de renderizar. Esse valor é restrito pela propriedade Patternunits; portanto, por padrão, os valores X e Y são: 10/200 = 0,05.

Então, por que o padrão define os valores padrão dos dois atributos como este?

Isso é determinado pelo uso do usuário (discutido no exemplo acima):

O primeiro estilo de padrão : acho que essa é a maior parte da situação, por isso é processada como o valor padrão: o padrão é esticado à medida que o gráfico externo é dimensionado e, por mais que seja o tamanho do quadrado externo, o padrão sempre será preenchido 4 vezes nas duas direções. No entanto, os gráficos contidos no padrão não serão esticados, pois os quadrados cheios de fora são escalados. Embora seja absurdo, apenas entenda.

O segundo estilo de padrão : a forma no padrão também é esticada à medida que a forma da borda externa é escalada. Também podemos definir o valor da propriedade PatternContentunits como ObjectBoundingBox para alcançar esse efeito. Por exemplo, modifique a parte do padrão da seguinte maneira:

<padrões id = "padrão" PatternContentUnits = "ObjectBoundingBox">

<círculo cx = ". 125" cy = ". 125" r = ". 1" preench = "url (#gradiente1)" preencher-opacity = "0,5"/>

</padrão>

Após a modificação, ao alterar o tamanho do retângulo preenchido, a forma no padrão também será esticada. E após a modificação, é alterada para as coordenadas do objeto periférico, de modo que as coordenadas X e Y do padrão não são mais necessárias. O padrão sempre será ajustado para se adequar à forma preenchida.

O terceiro estilo de padrão : a forma e o tamanho do padrão são fixos. Não importa como os objetos periféricos sejam dimensionados, você pode alterar o sistema de coordenadas para o UsuáriosPaceOnuse para alcançar esse efeito. O código é o seguinte:

<círculo cx = "25" cy = "25" r = "20" preench = "url (#gradient1)" preencher-opacity = "0,5"/>

</padrão>

Os padrões típicos nesses 3 são mostrados na figura abaixo:

Referência prática:

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 Desenvolvimento: https://developer.mozilla.org/en/svg

Referência popular: http://www.chinasvg.com/