Comentário: Uma das habilidades poderosas do SVG é que ele pode controlar o texto para um nível impossível para as páginas HTML padrão sem pedir ajuda com imagens ou outros plug-ins. Embora a renderização de texto do SVG seja tão poderosa, ainda há uma desvantagem: o SVG não pode executar o embrulho de linha automática. Em seguida, apresente a renderização do texto no SVG. Amigos interessados podem aprender sobre isso, o que pode ser útil.
Renderizar texto em svg
Um dos poderosos recursos do SVG é que ele pode controlar o texto até um nível impossível para as páginas HTML padrão sem recorrer a imagens ou outros plugins. Qualquer ação que possa ser executada em uma forma ou caminho (como desenho ou filtragem) pode ser executada no texto. Embora a renderização de texto do SVG seja tão poderosa, ainda há uma desvantagem: o SVG não pode executar o embrulho de linha automática. Se o texto for mais longo que o espaço permitido, basta cortá -lo. Na maioria dos casos, a criação de várias linhas de texto requer vários elementos de texto.
Além disso, você pode usar o elemento Tspan para dividir o elemento de texto em seções, permitindo que cada seção tenha seu próprio estilo.
Além disso, nos elementos de texto, o processamento de espaços é semelhante ao HTML: quebras de linha e retornos de carruagem se tornam espaços, enquanto vários espaços são compactados em um único espaço.
Texto exibido diretamente na imagem - elemento de texto
Para exibir o texto diretamente, você pode usar elementos de texto, da seguinte forma:
<Svg>
<recret preench = "vermelho" />
<círculo cx = "150" cy = "100" r = "80" preench = "verde" />
<texto x = "150" y = "125" font-size = "60" text-âncor = "middle" preench = "white"> svg </xt>
</svg>
Como mostrado no exemplo acima, o elemento de texto pode definir as seguintes propriedades:
x, y são as coordenadas da posição do texto. Texto-âncora é a direção da exibição de texto, que é realmente a posição (x, y) na posição do texto. Esta propriedade possui três valores: Start, Middle and End. Iniciar significa que a coordenada da posição do texto (x, y) está localizada no início do texto, e o texto começa a partir deste ponto à direita. O meio médio (x, y) está localizado no meio do texto, e o texto é exibido nas direções esquerda e direita, que realmente é centralizada. final significa que os pontos (x, y) estão no final do texto e o texto é exibido um a um à esquerda.Além dessas propriedades, as seguintes propriedades podem ser especificadas no CSS ou diretamente nas propriedades:
Preencha, traço: encher e as cores, o uso específico está resumido posteriormente. Atributos relacionados da fonte: família de fontes, estilo de fonte, peso-fontes, variante de fontes, estmear-fontes, tamanho de fonte, ajuste de tamanho de fontes, kerning, espaçamento de cartas, espaçamento com palavras e desconfação de texto.Intervalo de texto - elemento da colher
Este elemento é um complemento poderoso para o elemento de texto; É usado para renderizar texto dentro de um intervalo; Ele só pode aparecer no elemento de texto ou nos elementos filhos do elemento Tspan. Um uso típico é enfatizar a exibição de parte do texto. Por exemplo:
<texto>
<tspan font-weight = "BOLD" FILL = "RED"> Isso é ousado e vermelho </tspan>
</sext>
O elemento Tspan possui as seguintes propriedades que podem ser definidas: x, y é usado para definir o valor de coordenada absoluta do texto contido, que substituirá a posição de texto padrão. Essas propriedades podem conter uma série de números aplicados a cada caractere único correspondente. Os caracteres que não possuem configurações correspondentes seguirão o caractere anterior. Por exemplo:
<texto x = "10" y = "10"> Olá, mundo!
<tspan x = "100 200 300" font-weight = "Bold" preench = "Red"> Isso é ousado e vermelho </tspan>
</sext>
DX, DY é usado para definir o deslocamento do texto contido em relação à posição de texto padrão. Essas propriedades também podem conter uma série de números, cada um aplicado ao caractere correspondente. Os caracteres que não possuem configurações correspondentes seguirão o caractere anterior. Você pode alterar X do exemplo acima para DX para ver o efeito. Girar é usado para definir o ângulo de rotação da fonte. Esta página de propriedade pode conter uma série de números aplicados a cada caractere. Os caracteres que não possuem configurações correspondentes usarão o último número de números.
<texto x = "10" y = "10"> Olá, mundo!
<tspan girate = "10 20 45" font-weight = "BOLD" FILL = "RED"> Isso é ousado e vermelho </tspan>
</sext>
TextLength: Esta é a propriedade mais intrigante. Dizem que, depois de defini -lo, quando a renderização descobrir que o comprimento do texto é inconsistente com esse valor, esse comprimento será a base. Mas eu não experimentei.
Cotação de texto - elemento Tref
Esse elemento permite a referência ao texto definido e copie -o com eficiência para o local atual, geralmente com o elemento de destino especificado por XLink: HREF. Como foi copiado, ao usar CSS para modificar o texto atual, o texto original não será modificado. Veja o exemplo:
<sext> Este é um exemplo de texto. </sext>
<texto>
<Tref Xlink: href = "#exemplo" />
</sext>
Caminho de texto - elemento de path de texto
Isso é mais interessante, o efeito também é legal e pode produzir muitos efeitos artísticos; Este elemento segue o caminho especificado a partir de seu atributo xlink: href e alinha o texto nesse caminho, veja o exemplo:
<caminho d = "m 20,20 c 40,40 80,40 100,20" />
<texto>
<textpath xlink: href = "#my_path"> Este texto segue uma curva. </textpath>
</sext>
Imagem de renderização em SVG - elemento de imagem
O elemento de imagem no SVG pode suportar diretamente a exibição de imagens rasters, o que é muito fácil de usar. Veja o seguinte exemplo:
<Svg>
<imagem xlink: href = "penguins.jpg" x = "0" y = "0"/>
</svg>
Alguns pontos a serem observados aqui:
1. Se as coordenadas x ou y não estiverem definidas, o padrão será 0.
2. Se a largura ou a altura não estiver definida, o padrão será 0.
3. Se a largura ou a altura for explicitamente definida como 0, a renderização desta imagem será proibida.
4. O formato de imagem suporta PNG, JPEG, JPG, SVG, etc., portanto, o SVG suporta SVG aninhado.
5.Image é um elemento regular do SVG, assim como outros elementos, por isso suporta todos os efeitos, como corte, mascaramento, filtragem, rotação, etc.
Referência prática:
Índice de script: (v = vs.85) .aspx
Centro de Desenvolvimento: https://developer.mozilla.org/en/svg
Referências populares:
Documentação Oficial: