Aprenda animação SVG com HTML, CSS e Javascript

1. Introdução ao Svg: Ei, você quer aprender gráficos e animações AWG do começo ao fim Então você está no lugar certo. Olá. Meu nome é Jouger Profissionalmente, sou instrutor on-line e desenvolvedor web da FootsTec Trabalhei como funcionário e freelancer nessa área. Estou muito entusiasmado em aprender animação SVG porque podemos programá-la controlá-la quando quisermos E, como você sabe, a transição e a animação desempenham um papel fundamental para tornar nosso site muito introdutório Sem perder seu tempo, vamos ver o que vamos aprender com esse curso Em primeiro lugar, vou apresentar a você o que é o AVG. E então vamos aprender como podemos encruzar imagem SVG em um seguir, falaremos sobre a parte mais importante desta série de tutoriais, que é a porta de visualização e a caixa de visualização SVG Depois disso, vamos pular para a seção do elemento, elemento de linha, elemento de reação, elemento circular, elemento de elipse, elemento de polígono, elemento de polilinha, elemento de caminho, elemento de texto, elemento de imagem, propriedades de traçado e campo, e como podemos agrupar elementos, profundidade, elemento propriedades de traçado e campo, símbolo, etc Em seguida, aprenderemos o caminho do texto e o elemento gradiente Por fim, aprenderemos como podemos incluir JavaScript em imagens SVG Também estou tentando abordar alguns recursos de animação SVG. Depois de concluir todas essas propriedades, entraremos na seção do projeto. Vamos ver que tipo de projeto abordaremos neste tutorial. Em nosso primeiro projeto, criaremos uma animação de corte em movimento usando o AVG Em seguida, vamos pular esse projeto. Neste projeto, vamos criar uma animação SVG Stroke com CSS Essa animação de traçado de linhas VC fica bem com o texto transparente. Em seguida, criaremos outra animação Line Stroke com uma forma. Como você pode ver, ele desenha uma forma com a linha. seguir, criaremos um efeito de animação de linha elástica SVC, como você pode ver que ele muda de cor com Em nosso próximo projeto, aprenderemos como podemos encerrar nosso título com o traço. Aqui você pode ver um texto na tela. Se eu colocar meu cursor sobre ele, ele envolverá nosso título com uma linha de traçado Você pode implementá-lo em seu site. Vamos falar sobre nosso próximo projeto. Aqui, vamos criar uma animação de texto Wab adequada com rotação de 360 graus Aqui você pode ver nosso conteúdo de texto. Parece uma onda de água e nosso conteúdo também é adequado. Podemos remover nosso conteúdo antigo e colocar um novo conteúdo de texto aqui. No nosso caso, vou digitar Hello World. Em nosso próximo projeto, vamos criar uma animação rápida no carregador de SVG, e você pode ver o exemplo em sua tela, como é assim A seguir, vamos criar três animações em D over usando VG Como você pode ver na tela, quando eu coloco meu Kazar nesta imagem, você pode ver uma forma de três D saindo da imagem de fundo Em nosso próximo projeto, criaremos uma animação de rastreamento de caminhos. Você pode ver o mapa da guerra na tela e deseja enviar uma pilha de carga de Nova York para Calcutá Por esse caminho, o navio chegará ao destino. E se eu desligar meu navegador, você pode ver a animação. Suponha que o ponto vermelho seja nosso feixe de contêineres e esteja se movendo sobre a linha E em nossa próxima seção, aprenderemos como podemos criar todas as animações do carregador de fases do SBG, uma por uma Em seguida, vamos criar um pergaminho fazendo animação. Como você pode ver, se eu rolar ao redor meu Kurar, ele desenha uma forma E isso está no final. Com isso, vamos criar uma animação de máscara de vídeo SVG E em nosso projeto final, vamos criar o melhor. O que há de especial nesse projeto? Se eu recarregar esta página, como você pode ver, todos os estados da Índia se reúnem seu próprio lugar e completam o mapa Além disso, se eu comprar meu carro nos estados, como você pode ver, ele enche nossos estados de tricolor Então, este é o vídeo de introdução do nosso curso. Se você acha que é muito benéfico para você, inscreva-se neste curso agora Obrigado por assistir a este vídeo. 2. Incluir SVG em HTML: É bom ver vocês. Neste tutorial, aprenderemos como podemos incluir arquivo SVG em um documento SML Com isso, aprenderemos como podemos alterar as propriedades do HVC usando CSS? Vamos ver como isso funcionou. Aqui você pode ver uma imagem VG, que eu abro no software Illustrator Vou usar essa imagem em uma página SML com CSS. Agora vou abrir o editor de código do estúdio e ver como ele funciona. Você pode ver lado a lado, eu abro meu Visual Studio Cditor e também abro meu navegador e já crio um arquivo HTML chamado index Também coloco essa imagem no meu diretório de trabalho atual. Aqui você pode ver um D cuja classe é contêiner dentro da minha tag de estilo, eu estilizo esse contêiner. Eu disse que a cor de fundo, borda, a largura aumentada e a margem cortaram um pixel Você pode ver que esse contêiner está em branco e agora eu quero inserir a imagem Vg nesse contêiner Para isso, vou usar a tag Image, basta digitar IMG. E o nome do nosso arquivo é mag dot wig. Vou digitar image dot wig. Agora vou configurar esse arquivo e recarregar este navegador. Aqui você pode ver o poço. Podemos usá-los como qualquer outra imagem, PNG, JPG, GP, etc Agora vou mostrar como podemos usar essa imagem usando CSS. Vou comentar essa linha e vou voltar para minha seção de estilo. Dentro da propriedade background, vou usar uma tag, que é URL. Dentro dos parênteses, precisamos fornecer o caminho do arquivo, que é imagem, av, pronto Se eu definir esse arquivo e recarregar o navegador, você poderá ver a imagem, mas ela virá em segundo plano. Deixe-me provar isso. Se eu digitar algo Loum TextFile e definir esse código, e se eu recarregar este navegador, você pode ver que ele Vou remover essa linha, não preciso dessa linha. Vou configurar esse arquivo mais uma vez e recarregá-lo. Assim, você pode dizer imagens SVG em segundo plano. Podemos pesquisar nosso arquivo usando propriedade de tamanho do plano de fundo. Eu vou te mostrar isso. Tamanho do plano de fundo 150 pixels. Se eu definir esse arquivo e recarregar este navegador, você poderá ver muitas imagens nesse CD. Você pode ver muitas imagens nesse CD porque não usamos o valor modifet para esse plano de fundo, então vou digitar Se eu definir esse arquivo e recarregar o navegador, agora você poderá ver uma imagem simples Eu sei que você já tem um conhecimento básico sobre CSS, mas presumo que você seja um iniciante completo Agora está claro para você, podemos usar imagens SVG com CSS e podemos definir qualquer uma mais alta do que a nossa Agora vou mostrar o terceiro método, como podemos usar a imagem SVG usando a tag SVG Então, vou digitar SVG. Para isso, vou abrir essa imagem no meu editor de texto. Lá você pode ver a estrutura da imagem. Você pode ver que é feito com PT. Vou copiar toda a etiqueta de escavação. Copie e depois vou voltar ao meu arquivo STL de pontos de índice e colá-lo dentro do contêiner Vou remover essa linha e vou colá-la aqui. É isso mesmo. Agora vou remover a propriedade do diagrama CSS. Eu não preciso disso agora e vou configurar esse arquivo. Se eu recarregar este arquivo, aqui você pode ver a mesma imagem Qual é o principal benefício se eu usar uma tag SDG como essa? Neste curso, vamos aprender isso. O principal benefício é que podemos editar ATL e CSS. Se eu quiser mudar a cor do cabelo, podemos simplesmente passar o mouse no painel de cores e arrastar qualquer cor Se eu salvar este arquivo e recarregar este navegador, você verá que ele muda a cor do cabelo Além disso, podemos usar a classe nesse caminho. Basta digitar classe. Nosso nome de classe é zero é t um. Vou remover esse estilo. Vou mudar o nome da classe apenas para um. Dentro dessa tag de bloco, vou criar o seletor. Dentro do Css, e agora podemos usar a propriedade CSS e seu valor. Vou usar o preenchimento. Eu quero preencher com rosa quente. Se eu definir esse arquivo e recarregá-lo no meu navegador, você pode ver agora que a cor do cabelo é rosa Essa propriedade de preenchimento é usada somente para SVG. Com isso, podemos definir a cor de fundo. Deixe-me te mostrar uma coisa. Agora vou criar um efeito Her. Vou usar ponto, contêiner, dois pontos, passar o mouse, ST one. Então, dentro do carro, resista ao preenchimento preto. Eu só quero que se eu passar o mouse sobre essa imagem, ela mudará a cor de fundo preta Vou configurar esse arquivo e também vou recarregá-lo no meu navegador, então eu o recarrego Como você pode ver, quando eu sobreponho o contêiner, ele muda de cor de fundo. Da mesma forma, podemos fazer qualquer coisa com isso. Podemos animar essa imagem. Podemos vincular essa foto, qualquer coisa. Esses caminhos são basicamente objetos. Assim, podemos mudar a cor de qualquer objeto. Deixe-me te mostrar isso. Então, vou aumentar o tamanho do navegador e ativar a opção Desenvolvedor. Agora podemos usar agora, podemos escolher o elemento específico, basta passar o mouse sobre o elemento, algo assim E aqui você pode ver a cor do campo desse objeto e podemos alterá-la. Basta arrastar a cor que quiser. Se você quiser a cor azul, basta arrastar para o azul, pronto. Ele se transformou em uma cor azul. Usando a classe, podemos editá-la em nossa seção de estilo. Você pode editar qualquer coisa. Se você quiser excluir qualquer objeto, sim, você pode. Espero que agora esteja claro para você como podemos inserir o arquivo SVG em nosso arquivo STL. Podemos usar a tag Image e você também pode usar CSS, mas a melhor maneira é a tag SVG Espero que você goste desse vídeo. Obrigado por assistir a este vídeo. 3. Tutorial SVG ViewPort e ViewBox: Olá, amigos. Bem-vindo de volta. Antes de começarmos a aprender sobre SVG, devemos ter conhecimento de viewport e view fox Então, vamos entrar na tela do computador. Aqui você pode ver, eu abro meu arquivo TML anterior. Aqui você pode ver um D e sua classe é container. Você pode ver que especificamos a altura e a largura do DV , a cor e a borda do plano de fundo Dentro do contêiner, eu uso uma imagem SVG. Agora vou explicar para você o que é viewport. A janela de visualização é a área em que vemos a imagem. Como você pode ver, esta é nossa janela de visualização e agora vou redimensionar minha Vou selecionar a tag SVG. Dentro da seção de estilo, SVG. Então, dentro dos divs do carro, primeiro, vou dar uma borda à minha janela de visualização, borda a pixel Sólido e a cor é preta. Se eu definir esse arquivo, agora você não poderá ver a borda porque o tamanho do nosso contêiner e o tamanho da imagem SVC são iguais, e agora vou alterar o tamanho da imagem, altura de 200 pixels com 200 pixels Se eu definir esse arquivo e recarregar meu navegador, agora você poderá ver a borda Agora, essa área é nossa janela de visualização. A altura da nossa janela de visualização é 200 e, com essa, 200 também. A área em que você exibe a imagem, nós a chamamos de janela de visualização E lembre-se de que a janela de visualização não está relacionada à imagem. Não podemos sobrecarregar nossa imagem para fora da janela de exibição. Podemos dimensionar nossa imagem dentro da janela de exibição. Vamos falar sobre viewbox. O que é view boox forma como exibimos a imagem dentro da janela de visualização, nós a chamamos de Viewbox Podemos ampliar a caixa de visualização dentro da área do visor. Além disso, podemos diminuí-lo. Vamos simplificar as coisas. Vou abrir meu software Illustrator. Aqui você pode ver toda a área branca. Este é o nosso visor, você pode ver uma forma dentro do visor e podemos colocar a forma em qualquer lugar do nosso Podemos mover a forma para qualquer lugar dentro do visor. Podemos desenhar imagens SVG dentro do visor. Mas se eu falar sobre caixas de visualização relacionadas a zoom e amplitude Agora eu quero mostrar essa imagem maior dentro do visor. Se quisermos, não podemos mostrar a imagem inteira dentro do visor, algo assim Podemos fazer isso usando nossa caixa de visualização. Você pode ver que não alteramos a área do visor, mas podemos alterar a posição da imagem dentro da área do visor. Podemos escalar em escala horizontal e, se não quisermos mostrar a imagem inteira, podemos. Podemos fazer isso usando o viewbox. Vamos ver como podemos fazer isso na prática? Agora você pode ver que nosso visor é de 200 por 200. Dentro da área da janela de visualização, podemos ver uma imagem que é reivindicada na caixa de visualização. Aqui você pode ver uma propriedade em nosso SVG, que é a caixa de visualização É feito com quatro valores X xs, YX, largura e altura Eu começo com X xs, depois vem YX, depois largura e altura E aqui você pode ver que tomamos medidas e alturas semelhantes às do nosso contêiner. Se eu aumentar a largura e a altura da caixa de visão, podemos diminuir o zoom e ampliar nossa imagem. Deixe-me te mostrar. Eu vou mudar 900 e vou mudar também a altura 900. Se eu configurar esse arquivo e recarregar o navegador, você poderá vê-lo diminuir um pouco Se aumentarmos o peso em nossa caixa de visão, ela diminuirá o zoom de nossa imagem O tamanho base da imagem é 500 por 500. Se aumentarmos o valor, ele diminuirá o zoom. Se diminuirmos o valor, ele aumentará o zoom. Deixe-me mostrar e digitamos 200 por 200. Se eu definir esse arquivo e carregar este navegador, você pode vê-lo cortar nossa imagem, ou seja, ampliará nossa imagem. É trabalhar como em perspectiva. Quanto mais perto você chegar, o objeto ficará maior. Da mesma forma, o objeto ficará menor à medida que você avança. Vamos voltar à imagem para a posição normal. 500 por 500. Se eu configurar esse arquivo e recarregar o navegador, como você pode ver que ele está de volta à casa dele Vamos falar sobre XXs e YxS. Se eu digitar XXs 100 e definir a imagem, essa caixa de visualização começará a partir de 100 pontos, algo daqui Se eu recarregar este navegador, você poderá vê-lo. Podemos mover imagens usando XX e YxS. Da mesma forma, se eu usar 200 para YxS e recarregar este navegador, agora você pode ver a imagem começando Dentro da mesma área da janela de visualização, podemos alterar a perspectiva da imagem e sua posição usando a probidade da caixa de visualização De acordo com a caixa de visualização, a imagem começa em 100 Xxs e 200 YXs Além disso, de cada vez, podemos ampliar nossa imagem. Então, vou aumentar o valor da largura elevada 700 por 700 Se eu configurar esse arquivo e recarregar meu navegador, você poderá vê-lo diminuir um pouco Mas eu gostaria de voltar à posição normal. Além disso, podemos usar o valor negativo para Xxs e YxS. Se eu definir esse arquivo, agora você pode vê-lo começar na direção oposta. Vamos colocar essa imagem em sua posição padrão, zero, zero. Se eu configurar este arquivo e carregar este navegador, aqui você pode ver que ele está de volta à sua própria posição. Espero que agora esteja claro para você o que é viewport e view boox Lembre-se de que a janela de visualização é área externa e a caixa de visualização está dentro de uma. Deixe-me mostrar outro exemplo que deixa sua caixa de visualização Aqui você pode ver uma nova imagem SVG no meu navegador e você pode ver quatro formas diferentes nesta imagem É uma imagem única, mas dentro da imagem, temos quatro objetos diferentes, círculo, polígono, reação, retângulo, etc., chamamos isso Se combinarmos uma imagem diferente com ela, se criarmos uma única imagem, ela será chamada de Image Sprite Agora eu quero mostrar cada objeto, um por um dentro dessa caixa de visualização dentro dessa janela de visualização Mas a questão é como isso é possível? É uma única imagem. Para isso, precisamos ampliar essa imagem e posicioná-la. É isso mesmo. A altura da nossa janela de visualização é de 500 pixels. Se você notar, todas as formas têm a mesma altura, 125 pixels. Vou digitar 125 para largura e 125 para altura. Se eu definir esse arquivo e recarregar este navegador, aqui você pode ver que os objetos não estão na área da janela de visualização Portanto, precisamos mover a posição deles usando XX RL. Vou digitar 188 pixels de XXs. Se eu definir esse arquivo e recarregar este navegador, você poderá ver nossa primeira forma geométrica Agora vou mudar YxS e você pode ver cada forma geométrica uma por uma Vou digitar 125 pixels para YxS. Se eu definir esse arquivo e recarregar este navegador, agora você poderá ver nosso próximo círculo de forma geométrica Se eu adicionar 125 com esse valor , vou digitar 250. E defina esse arquivo. Agora você pode ver outra forma retangular. Da mesma forma, se eu digitar 375 e definir esse código, agora você poderá ver a forma triangular Todos os parâmetros dependem do tamanho da sua janela de visualização. Espero que agora você possa entender como usamos o ViewVox para alcançar Obrigado por assistir a este vídeo. Te vejo em breve. 4. Tutorial de elemento de linha SVG: Mais uma vez, estou de volta com um novo T to e, neste vídeo, aprenderemos sobre o elemento de linha. Usamos o elemento de linha para desenhar um. Mas antes de traçarmos qualquer linha, devemos ter conhecimento sobre o ponto X x e o ponto do eixo Y. Suponha que essa seja nossa janela de visualização e criemos uma linha diagonal nessa janela de visualização Para desenhar uma linha, você deve ter um ponto de partida. ponto de partida, precisamos de X xs e Y xs e os reconhecemos X um e Y um ponto. Para iniciar uma linha, precisamos fornecer o X xs e o ponto Y xs. Da mesma forma, precisamos fornecer o ponto para a linha e reconhecê-la X dois e Y dois. No geral, precisamos de quatro atributos para desenhar uma linha. X um, Y um, X dois, Y dois. Sem esse zero, não podemos criar a linha. Vamos ver como podemos criá-lo na prática. Aqui você pode ver lado a lado, eu abro meu Visual Studio Cretor e também abro meu navegador usando a extensão Live Server Eu já criei um documento de estimativa para este exemplo. Aqui você pode ver que eu crio um contêiner chamado Dev e defino uma cor de fundo e uma borda para esse contêiner. Também digo ocultar 500 pixels para alinhamento médio, defino Margem zero e automática Dentro do DV, você pode ver uma tag SVG. Dentro da caixa de visualização eu uso Xxs zero e YX é zero. Eu digo, então alturamos 100 e 100. Dentro do mergulho, eu crio uma grade. Para essa grade, eu uso a tag G. Mais tarde, explicarei como podemos criar granulação em VG e vou começar a partir Primeiro, vou usar uma etiqueta de linha. Como eu disse anteriormente, precisamos de quatro atributos para criar uma linha. Dentro da etiqueta de linha, vou digitar X um, igual a 20 pixels e Y igual a e YN é 40. Você pode supor que depois de cada dez pixels, eu desenho uma linha. Então isso é X zero, isso é dez e isso é X 20. Isso é Y zero, isso é Y dez, isso é Y 20, isso é Y 30 e esse é Y 40. Nossas linhas partem desse ponto, agora precisamos definir o ponto final. Nossos dois pontos X são 80 e nossos dois pontos Y também são 40. Isso criará uma linha reta. Se eu definir esse arquivo, você não poderá ver uma linha porque precisamos definir uma cor de traçado para essa linha. Vou usar a propriedade stroke. Vou digitar traçado e vou dar uma cor a esse traçado. Tarifa. Se eu definir esse arquivo, agora você pode ver a linha. Da mesma forma, se você quiser criar uma linha diagonal, basta aumentar o valor de Y dois. Eu quero digitar 60. Se eu definir esse arquivo, aqui você pode ver, agora ele cria uma linha diagonal. Dessa forma, você pode criar qualquer linha. Usando a propriedade stroke, podemos definir a cor. Em nosso próximo vídeo, aprenderemos mais sobre o AVC. E agora vou criar um retângulo usando a linha. Primeiro, vou desenhar uma linha reta, então vou mudar Y para o valor B. Eu crio nossa linha reta, depois vou replicar essa linha, e vou começar minha próxima linha a partir desse ponto Vou digitar X um, 80 e Y 140. Agora nossa segunda linha começa desse ponto, e eu quero terminar essa linha nesse ponto. Nossos dois pontos X são 80 e também nossos dois pontos y são 80. Vou mudar a cor do traço azul. Se eu definir esse arquivo, você pode ver a linha e vou duplicar essa linha Agora eu quero começar minha terceira linha a partir deste ponto, e eu quero terminar esta linha neste ponto. Para isso, basta mudar para isso, só vamos mudar Y 1,80 para X dois pontos, precisamos digitar 20 É X zero, é dez, é X 20. Eu digito X 2.20 e não precisamos mudar Y de dois pontos, e vou mudar a cor do traço para verde Se eu definir esse arquivo, você poderá ver a linha. Para nossa quarta linha, vou duplicar essa linha mais uma vez. Agora, nossas linhas começam neste ponto significa X 20 e, no entanto, essa linha vai terminar neste ponto. Quer dizer, não precisamos alterar o valor X, apenas vamos alterar o valor de Y dois 40. Se eu definir esse arquivo, você poderá ver a linha. Parabéns. Acabamos de criar uma forma retangular usando linhas Você pode ver usando o ponto inicial e o ponto final, criamos um retângulo Podemos desenhar qualquer forma geométrica com isso. Para isso, precisamos usar a tag de linha e também mencionar a cor do traçado para essa linha. Caso contrário, não podemos ver a linha. Se eu remover a grade e definir o arquivo, agora você pode ver sem grade como era. Eu crio essa grade porque você pode entender melhor nossos pontos. Se usarmos a grade, é muito fácil desenhar uma estrutura. Agora seu desafio é criar um triângulo sem usar a grade. Não é um desafio muito difícil. Espero que você goste desse desafio. Obrigado por assistir a este vídeo. 5. Tutorial do SVG Rect Element: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos sobre o elemento react. Reto significa retângulo. Vamos ver que tipo de atributo precisamos para criar um retângulo dentro do Bigita Aqui você pode ver um visor e dentro do visor eu crio um Se quisermos criar um retângulo como esse , precisamos de um ponto de partida Para isso, precisamos dos eixos X xs e Y. Com isso, precisamos de dois outros atributos. O primeiro é a largura e o segundo é a altura. Vamos ver praticamente como isso funciona. Aqui você pode ver, lado a lado, eu abro meu Visual Studio Cditor e abro meu navegador usando a extensão if server Como você pode ver, eu já crio um documento TML e também crio um contêiner de classes profundo, e digo realçado com cor de fundo Dentro do Deb, eu já uso a tag SVG, defino a caixa de visualização de cem por cem pixels e já crio uma estrutura de grade que você pode entender nossos pontos com muita facilidade Vamos começar a criar um retângulo. Para retângulo, precisamos usar a tag Rc, RECT. Para criar um retângulo, precisamos de quatro atributos, e eu quero começar meu retângulo a partir desse ponto Portanto, nosso ponto Xs é 20 e nosso ponto Y xs é 13. Em seguida, você precisa fornecer largura. Para Largura, temos um atributo chamado largura. Ei, esqueci de usar aspas duplas. Precisamos mover esse valor dentro da aspa dupla. Caso contrário, não vai funcionar. Nosso Wi, vou digitar 80 pixels e também preciso fornecer altura. E eu vou fornecer 40 pixels. Se eu definir esse arquivo, você pode ver no meu navegador, ele desenha um retângulo e eu vou diminuí-lo com o Blu benti Se eu definir esse arquivo, agora nosso retângulo parece perfeito por padrão, nosso retângulo colorido é preto e não há traçado nesse Para dar um traçado, precisamos usar a preza do traçado STROKE igual ao interior da camada dupla, vou usar a cor vermelha Se eu definir esse arquivo, agora você pode ver o traçado. Se você quiser alterar a cor do retângulo , temos uma propriedade chamada fill Em vez do parêntese, a cor do nosso campo é : vou definir amarelo Basicamente, usamos o campo pupatry para alterar a cor do fundo Você pode digitar o nome da cor, caso contrário, você pode usar amarelo hexa Vou mudar a cor do campo para rosa. Se eu disser esse arquivo, agora nossa cor de fundo retangular é rosa E se eu não quiser enviar e se você não quiser definir nenhuma cor de fundo para esse retângulo, basta digitar nenhuma Se eu definir esse arquivo, aqui você pode ver não há cor de fundo para esse retângulo Por enquanto, vou usar amarelo. Além disso, podemos definir redução da borda para esse retângulo Então, temos duas propriedades RX e RY. Vou digitar RDX. Rx igual a dez. Se eu definir esse arquivo, você pode vê-lo reduzir nossa borda em dez pixels. Você não precisa digitar nenhum parâmetro porque usamos view vox Se eu usar a propriedade RI que significa propriedade do raio Y, vou digitar R Y. Igual ao interior dos códigos Basicamente, funcionou verticalmente, e eu vou defini-lo como 50 Se eu salvar esse arquivo, agora você pode ver, ele mudará nossa forma de trabalho Rx em Xxs e RY YxS Você pode alterar a dimensão do raio com esse valor. Vamos resumir esse processo rapidamente. Como podemos criar esse retângulo. Primeiro, precisamos do ponto de partida. Aqui precisamos passar o valor X e o valor Y, e então precisamos fornecer dentro da altura, e precisamos dentro da altura de acordo com esta caixa U. Suponha que este seja o nosso ponto de partida e eu pego com 70, precisamos contá-lo a partir desse ponto, dez , 20, 30, 40, 50, 60, 70. É um trabalho assim. definimos nosso raio X e raio Y E para traçado, eu uso a propriedade do traçado, e para a cor do fundo, eu uso a propriedade do campo. Podemos criar vários retângulos em uma tag Vg. Deixe-me te mostrar isso. Quero duplicar essa linha e vou definir nossos x 0,30 e Y 0,40 Quero definir com 40 e quero definir a altura 20 e quero definir a cor de fundo verde. Se eu definir esse arquivo, agora você pode ver o retângulo dentro do retângulo Se eu remover o raio, agora você pode ver o retângulo correto Usando esse processo, podemos criar vários retângulos conforme quisermos Então, espero que agora esteja claro para você, como podemos criar um retângulo dentro da tag SVG Obrigado por assistir a este vídeo. 6. Tutorial do SVG Circle Element: Olá, amigos. É bom ver você de volta. Neste tutorial, aprenderemos sobre o elemento circular. Como você sabe, usamos esse elemento para criar um círculo. Então, vamos ver que tipo de atributo precisamos para criar um círculo. Aqui você pode ver um círculo em nossa piscina panorâmica. Se você quiser desenhar esse círculo , precisamos de X xs e YxS Definimos esse atributo Xxs com Cx, significa círculo Xxs e CY para Com isso, precisamos de outro atributo, que é o raio. Usando o atributo radius, podemos definir o tamanho do círculo Se você quiser criar um círculo grande ou pequeno , o raio desempenhará o papel real e definimos esse raio com R. Vamos entrar no codificador do Visual Studio e ver como funciona Aqui você pode ver lado a lado, eu abro meu navegador e abro meu editor de código, e eu já crio um documento de estimativa Dentro da tag body, eu já crio um contêiner de classe profundo e defino a altura e a largura desse contêiner. Dentro da tag profunda, eu uso o WigTag com caixa de visualização e já crio uma alça para entender os pontos de atributos Agora vou criar essa tag circular para criar um círculo primeiro, apenas para criar uma tag circular. E também precisamos de três atributos para criar esse círculo. Primeiro, precisamos de X xs e yxs. Nosso nome de atributo é CX, igual a, e eu quero fazer esse círculo a partir do centro Eu digito 50 e CY para yxSequal 50. Agora, nosso atributo mais importante é o raio. Usando o raio, podemos definir o tamanho do círculo e definir o atributo do raio usando R pequeno, R igual a 40. Se eu definir esse arquivo, aqui você pode ver um círculo preto. Preto é a cor padrão. E se você quiser alterar a cor desse círculo, precisará usar o atributo de campo. Vou preencher o tempo. Preencha igual a, eu quero usar a cor verde para este círculo. Se eu coloquei este arquivo, aqui você pode ver, ele se transformou em um círculo verde. Se quisermos usar o AVC, sim, podemos. Deixe-me te mostrar. Para isso, precisamos usar o atributo stroke. E eu quero usar a cor vermelha para traçado. Se eu definir esse arquivo, aqui você pode ver esse traço. Se não quisermos usar nenhuma cor, basta digitar nenhuma no preenchimento. Aqui você pode ver que agora nosso círculo está completamente transparente, por enquanto vou usar a cor verde e agora quero reduzir o tamanho do círculo, então vou reduzir o valor do raio 20 Se eu definir esse arquivo, agora você pode vê-lo reduzido 20 pixels e também quero mover esse círculo para esse canto Vou aumentar o valor X 80 e também preciso aumentar o valor Y. 80. Se eu definir esse arquivo, aqui você pode ver, movemos perfeitamente esse círculo neste canto. Além disso, podemos criar vários círculos nessa tag VG Vou duplicar essa etiqueta circular. Além disso, vou alterar o valor X e o valor Y 30, 40, e nosso raio é dez e a cor é azul Se eu definir esse arquivo, agora você pode ver esse círculo. Criamos uma imagem e há dois círculos nessa imagem. Você pode criar vários círculos, quanto quiser. Com isso, você pode criar retângulos, linhas, triângulos, etc. Agora está claro para você como podemos desenhar um círculo em um Veggitag No próximo tutorial, mostrarei como podemos criar o elemento Ellipse. Obrigado por assistir a este vídeo. 7. Tutorial de elemento de elipse SVG: Mais uma vez, é bom ver você de volta. Neste tutorial, aprenderemos sobre o elemento Ellipse. Vamos ver que tipo de atributo precisamos para criar um elemento de elipse em seu tanque VG Aqui você pode ver dentro da janela de exibição, eu desenho um elemento Ellipse Para iniciar o elemento Ellipe, precisamos de duas coisas Xxs e Y xs. Definimos a propriedade X com CX e definimos a propriedade Y com CY. Semelhante ao círculo. Ao contrário do elemento circular, precisamos de duas outras propriedades. RH significa raio X e RY significa raio Y. Vamos ver como funciona Aqui você pode ver, lado a lado, que abro meu rezo studio corator e meu navegador usando extensão de servidor Lip e já crio um documento HTML Tenha um recipiente profundo e eu disse cor de fundo realçada com margem e borda Dentro dessa tag profunda, eu tenho uma tag SVG e configuramos o Vevox vedo para essa tag e configuramos o Vevox vedo para Como você pode ver, eu já criei um sistema de grade para entender os pontos de atributos. Vamos começar como criar o elemento Ellipse. Primeiro, precisamos digitar a tag Ellipe. Dentro da tag ellip, vou pegar as propriedades Cx e Cy, Cx igual a 50 e CY igual a 50 porque eu quero começar essa elipse no meio desse Agora preciso fornecer raio Xxs e raio YX, Rx igual a 20 e raio yx igual a Se eu definir esse código, aqui você pode ver nosso elemento de lábios. Por padrão, é uma cor preta. Se você quiser alterar a cor desse elemento ipe , precisamos usar a propriedade fill; se eu quiser, quero preencher essa elipse com a Se eu dissesse esse arquivo, agora ele se transformou em vermelho. Se você quiser usar traçado, precisará usar a propriedade do traçado, traçado, igual ao preto. Se eu definir esse arquivo, aqui posso ver um traço preto. Se você quiser torná-lo transparente, basta digitar nenhum na seção do campo. Agora está completamente transparente. Agora vou criar outra ferramenta Ellipse dentro dessa tag as ig Vou duplicar essa ferramenta Ellipse e vou alterar a propriedade Rx e ROI, dez, 20, e vou fornecer a Se eu definir esse arquivo, aqui você pode ver outro elemento Ellipe dentro desse elemento Ellipe Se você quiser girar esse elemento Elpe, sim, você pode. Agora vou usar a classe neste elemento Ellipe, CLA doulas e o nome da nossa classe é o segundo porque esse é o nosso segundo Nessa seção de estilo, vou selecionar esse elemento. Segundo. Dentro das células, vou usar uma propriedade transformar, transformar, girar e quero girar esse elemento em 20 graus Se eu dissesse esse arquivo, ela pode ver que ele gira o elemento F 20 graus em seu lugar Se você quiser girar esse elemento a partir de seu lugar exato, precisará fornecer a propriedade de origem da transformação Deixe-me mostrar que Transform Aisin 50% de altura e 50% de largura Se eu definir esse arquivo, agora você pode ver que ele gira de acordo com o meio desse pool de visualizações, e vou aumentar o valor de rotação 40 Se eu definir esse arquivo, você pode ver que podemos controlar o grau de rotação. Espero que agora esteja claro para você o que é o elemento lip e como podemos desenhar o elemento lip em uma tag WIG e como podemos girá-lo usando CSS Obrigado por assistir a este vídeo. 8. Tutorial de elemento polilar SVG: Ei, mais uma vez, estou de volta com um novo tutorial. Neste tutorial, aprenderemos sobre o elemento polilinha Vamos ver qual atributo precisamos para criar uma forma de polieno Aqui você pode ver uma forma de poliano dentro da caixa de visualização. Você pode criar qualquer tipo de formato de polieno. Você pode criar centenas de sites para seu elemento de polieno. Aqui você pode ver que temos um total de cinco lados em nossa forma de políneo e precisamos de pontos para unir essas duas linhas Suponha que eu queira começar minha forma de políneo a partir desse ponto vermelho, precisamos fornecer o valor exato de Xs e o valor de YXS Da mesma forma, para o ponto verde, precisamos de outro valor Xxs e YXS Precisamos de um total de cinco pontos diferentes para criar essa forma. Mas se você quiser cruzar essa forma, mais uma vez, você precisa fornecer primeiro X xs e YxsPoint Mans nosso valor de ponto No total, precisamos de seis pontos para desenhar essa forma. Agora você pode pensar que podemos fazer o mesmo trabalho usando o elemento de linha, mas há um problema. Não consigo sentir a forma com a cor. Além disso, sempre que precisamos fornecer o ponto inicial e o ponto final , você pode criar essa forma usando uma tag, a tag polilinha Vamos mergulhar no navegador e ver como ele funciona. Aqui você pode ver que eu já criei um documento HTML e, dentro da tag body, crio um contêiner de classe Dentro do DV, crio uma tag SVG, defino nossa caixa de visualização em cem por cem pixels e crio um sistema de grade dentro dessa caixa de visualização para entender os valores Agora vou começar nossa polilinha de tags. Primeiro, precisamos digitar a tag polilinha. Precisamos de apenas um atributo para criar pontos de polilinha. Dentro dos pontos, primeiro, precisamos fornecer o ponto de partida, Xs e YxS Suponha que eu queira começar esse políneo a partir desse ponto. Nosso ponto Xs é 20 e nosso ponto YXs também é 20. Suponha que nosso próximo ponto esteja aqui, então precisamos fornecer um espaço e, de acordo com esse ponto, nosso valor x é 80 e nosso valor YX é 30 Para o nosso terceiro ponto, vou usar esse ponto que significa 60 y 60. Vou usar o espaço e vou digitar XX 60 YXX 60, então precisamos fornecer nosso quarto ponto E para o nosso quarto ponto, vou usar este. De acordo com esse ponto, nosso Xs é 20 e nosso Y xs é 50. Eu vou passar de 2050. Se eu definir esse arquivo, você poderá ver uma forma de polilinha. Como você pode ver, por padrão, é uma cor preta. E se você conhece o processo, como podemos alterar a cor da polilinha, precisamos usar a propriedade de preenchimento Preencha com verde. Se eu definir esse arquivo, agora ele se transformará em verde. Além disso, também podemos usar a propriedade de traçado, traçado, igual à taxa. Agora você pode ver esse traço. Você pode ver que não completamos nossa forma de polilinha. É por isso que não fornecemos o traço de um ponto a outro. Precisamos fechar esse ponto. Caso contrário, essa forma está completa e você sabe que nosso ponto final D é nosso ponto inicial, 20 d 20. Vou copiar esses pontos e vou dar um espaço e colar. Se eu definir esse arquivo, agora você pode ver o traçado. Agora está completa nossa forma. Usando o políneo, você pode desenhar qualquer forma. Se você não quiser dar nenhuma cor de fundo, basta digitar nenhuma na seção do campo. Se eu definir esse arquivo, agora você pode ver, ele é completamente transparente. Vamos resumir essa palestra. Para criar uma polilinha, você precisa de uma tag de linha dupla. E você precisa de um atributo para criar pontos de polilinha. Para desenhar uma linha, você precisa fornecer o valor Xs e YXS. E para o próximo ponto, e uma vez, você precisa fornecer o valor de Xs e YXS Dessa forma semelhante , continua acontecendo. E uma coisa que você precisa lembrar: seu ponto final deve ser seu ponto de partida Caso contrário, a forma ficaria incompleta. E se você quiser preencher essa forma com cor, você pode usar a propriedade de campo e, para borda, você pode usar a propriedade de traçado. Então, espero que agora esteja claro para você, como você pode desenhar uma forma de polilinha dentro do tanque VG Obrigado por assistir a este vídeo. 9. Tutorial do elemento SVG Polygon: Ei, é bom ver você de volta. Neste tutorial, aprenderemos sobre o elemento poligonal Vamos ver o que é elemento poligonal e que tipo de atributo precisamos para criar esse Aqui você pode ver a forma de um polígono e desenhar várias linhas quantas vezes quiser Essa é uma forma de polígono, mas também parecia uma forma de polígono Que eu abordei no meu tutorial anterior. Mas há uma diferença entre dois elementos, e eu vou falar sobre isso mais tarde. Como você sabe, chamamos esses dois pontos de junção de linha e, se você quiser iniciar esses pontos, precisará do valor Xs e dos valores YXS Se você quiser iniciar esse elemento poligonal a partir do ponto vermelho, precisará fornecer o ponto Xs vermelho, o ponto YxSpinfGreen vermelho, você precisará fornecer o ponto Xs verde, o ponto YX verde Mas a diferença entre polilinha e elemento poligonal é que você não precisa fornecer o ponto final, para fechar essa forma, elemento poligonal, completá-lo automaticamente é que você não precisa fornecer o ponto final, para fechar essa forma, elemento poligonal, completá-lo automaticamente. Suponha que eu exclua esse ponto amarelo, algo assim No elemento poligonal, ele não desenhará a última linha automaticamente Precisamos fornecer o ponto para terminar esta última linha. Mas no elemento poligonal, ele desenha automaticamente a linha Essa é a principal diferença entre eles. Vamos começar de forma prática como funciona. Aqui você pode ver, lado a lado, que abro meu codificador do Visual Studio e meu navegador usando a extensão light de servidor Eu já crio um documento HTML. Dentro do documento ESTiml, eu crio um contêiner Dep plus, especifico a cor de fundo para esse contêiner e defino alto denoi. Além disso, defino a borda Dentro do contêiner, eu crio uma tag AVG, você pode ver o tamanho da visualização Dentro do VGMage eu crio uma árvore para entender os atributos corretamente Vamos desenhar um elemento poligonal. Primeiro, precisamos de uma etiqueta poligonal? Dentro da etiqueta do polígono, nosso primeiro atributo são E eu quero começar minha forma poligonal a partir desse ponto. Vou digitar 50 e nosso YxS é 20, nosso próximo ponto está aqui Quer dizer 80, 30. Xxs é 80 e YxS é 30. Vou fornecer um espaço entre eles e vou digitar XX é 80 e YXS 30 Em seguida, vou desenhar um ponto aqui. Quero dizer, XX é 50, YXS é 70. Vou digitar espaço. Xs é 50 e YXS é 70 Então, se eu definir esse arquivo, aqui você pode ver uma forma de triângulo, e agora eu quero definir uma cor de fundo para essa forma. Então, vou usar o campo paperTyfel igual a verde. Se eu definir esse arquivo, você pode ver, agora ele está na cor verde. E para definir uma borda, precisamos usar o traçado Paperty. Acidente vascular cerebral igual à taxa. Se eu definir esse arquivo, aqui você pode ver um traço vermelho. Se você notar, você pode ver quem apenas fornece três pontos, 50 20, 80 30 e 50 70, mas nós não fornecemos o ponto final. Para esta última linha, eu não faço nada. Ele desenha automaticamente a última linha, mas em nosso tutorial anterior significa tutorial de poliano Precisamos mencionar a última linha. Caso contrário, ele não completará o objeto. Agora eu quero traçar outro ponto aqui. Isso significa que XSS é 30 e Y Xs é 50. Eu vou fornecer 30 50. Se eu definir esse arquivo, você poderá vê-lo desenhar nossa última linha automaticamente. Se você quiser criar um gráfico , a polilinha é ótima para você Se você quiser criar formas , recomendo usar o elemento poligonal E se você quiser torná-lo transparente, você conhece o processo, você precisa digitar nenhum na seção de campo. É isso mesmo. Agora você pode ver que é totalmente transparente. Espero que você entenda o elemento poligonal. Obrigado por assistir a este vídeo. 10. Tutorial do elemento de caminho SVG: Ei, mais uma vez, estou de volta com uma nova etiqueta, que é etiqueta de bunda. A tag Path é uma das tags mais avançadas do SRG. Você pode desenhar qualquer tipo de moldura usando esse elemento. Usando esse elemento, você pode desenhar linha, círculo, retângulo, forma de polígono Vamos ver um exemplo e tentar entender como podemos criar uma forma usando o elemento Bth Aqui você pode ver dentro da minha visão que criamos uma forma básica usando BT e você sabe que quando duas linhas se juntam, chamamos isso de pontos de posição Suponha que você queira iniciar essa forma a partir do ponto do pino. Você precisa fornecer a média das coordenadas Xxs e YxS. Precisamos seguir a etapa semelhante para ponto verde, ponto azul e ponto Do ponto vermelho ao ponto rosa, você pode ver uma forma de curva. Para isso, precisamos usar o comando arc. Você pode desenhar qualquer forma com muita facilidade. Existem muitas formas, arco, polígono, círculo, linha, etc. Para isso, precisamos usar comandos diferentes. Vamos ver os comandos. Aqui você pode ver os comandos relacionados um caminho VG e dividimos em quatro categorias Nosso primeiro comando é o comando de linha dentro do comando de linha, temos quatro vírgulas diferentes. L, H, V e Z. Neste tutorial, aprenderemos o comando de linha e daí virão a curva V ser e as curvas base quadráticas Vamos aprender sobre essa curva em nosso próximo tutorial e nosso último comando é o comando arc. Vou te ensinar todos os comandos, um por um. Vamos começar com o comando de linha. Aqui você pode ver que eu já criei um documento HTML e já criei um contêiner deep plus Furacão, veja, eu estilo tão fundo. Eu já defini uma cor de fundo e disse altura e largura, e também disse borda. Dentro dessa profundidade, eu já pego uma tag SVG e também coloco a caixa V nessa profundidade Temporariamente, eu crio uma grade dentro dessa tag SVG. Usando essa coragem, é muito fácil entender nossos atributos Vamos começar com a prática. Primeiro, vou usar a etiqueta Put. Para começar este parque, precisamos de uma propriedade importante chamada D, D igual a dentro dos policiais duplos Precisamos fornecer os pontos. D significa desenhar. Em vez do parêntese, primeiro, você precisa assumir o comando e M deve ser Usando, podemos definir o ponto de partida do nosso cursor. Agora vou pegar um ponto de onde quero começar esse caminho. Eu quero começar meu caminho a partir deste ponto. Cara, x é 20, YX é 30. Vou digitar 20, YX é 30. Se você quiser desenhar uma linha simples, você precisa usar o comando L. E eu quero desenhar uma linha desse ponto até esse ponto. Xs é 80 e Y xs é 30. Eu vou passar de 18 a 30. Também precisamos fornecer esse tropo. Caso contrário, não podemos ver a linha. A cor do nosso traço é vermelha. Se eu definir esse arquivo, aqui você pode ver uma linha vermelha. Primeiro, você precisa fornecer o ponto de partida usando o comando. Com isso, você precisa fornecer Xxs e YxS. Então você precisa fornecer um espaço. Se você quiser desenhar uma linha, precisará usar o comando e também fornecer Xxs e YxS Se você quiser criar uma linha reta usando apenas dois pontos, você pode remover esse comando. Se eu definir esse arquivo, aqui você pode ver, nossa linha também existe. Você pode ver que não há mudanças. Também é trabalho. Também funciona quando criamos uma linha reta. Mas, por enquanto, vou usar o comando. E agora eu quero desenhar outra linha vertical. Vou fornecer um espaço e vou digitar X 80 e YX é 70 Se eu definir esse legado, ele desenha uma linha. Bdfaul é fornecer a cor preta nessa forma Se você quiser mudar a cor, conhece o processo. Você precisa usar a propriedade do campo. E eu quero preencher essa forma com a cor verde. Se eu definir esse arquivo, você pode ver que ele se transformou em verde e agora eu crio outra linha até esse ponto. Vou fornecer um espaço e vou usar o comando de linha A, valor X é 40 e o valor Y Xs é 80. Se eu definir esse arquivo, você pode vê-lo desenhar uma linha deste ponto até este ponto. Você pode criar qualquer tipo de linha diagonal. Não é obrigatório criar sempre uma linha reta. Você pode pensar que é muito semelhante ao elemento polilinha. Da mesma forma, para completar essa forma, você precisa fornecer o último ponto. Simplesmente, se eu quiser finalizar essa forma, basta digitar 20 e 30. Se eu definir esse arquivo, agora você pode ver que ele completou a forma. Se você não quiser fornecer o ponto final, você pode usar Z. Se eu definir esse arquivo, você poderá ver o resultado semelhante. Não há mudanças. Se você quiser finalizar essa forma a partir desse ponto, basta remover os valores e definir o arquivo. Agora você pode ver que ele completou nossa forma a partir deste ponto. Z significa comando de caminho cruzado. Se você quiser fechar qualquer caminho, podemos usar o comando Z. Agora vou apresentar a vocês novos comandos H e V. H significa linha horizontal, V significa linha vertical. Aqui você pode ver a linha, precisamos fornecer duas coordenadas para criar a linha, Xxs e YxS Sabemos que só precisamos criar uma linha reta. Para isso, não precisamos fornecer esse último ponto. Podemos usar apenas o ponto horizontal. Vou remover o comando e substituí-lo pelo comando H. Se eu definir esse arquivo, aqui você pode ver que não há alterações. É criar uma linha de 20 pixels a 80 pixels. Se eu aumentar o valor, 90 pixels e definir o arquivo, agora você pode ver que ele mudou nossa forma. O comando H só funciona para o lado horizontal. Então, vou redefinir essa forma, e agora vou mostrar o comando V. Para isso, não precisamos fornecer Xxs, precisamos fornecer Yxs Deixe-me mostrar Foster tipo V, e agora eu quero desenhar uma linha de 30 a 90 pontos Então eu vou digitar V 90. Se eu definir esse arquivo, agora você pode ver, ele aumentará o tamanho da linha verticalmente e agora eu quero criar uma forma retangular Vou fornecer outro ponto H, ponto Mint Xs, H 20. Se eu definir esse arquivo, agora você pode ver, ele cria um retângulo perfeito e nosso comando ZT completa automaticamente essa forma, e nosso comando Zt sempre cria uma linha reta Z significa comando de caminho fechado. Deixe-me explicar tudo isso mais uma vez. Primeiro, você precisa usar a tag Path. Em vez da tag de caminho, você precisa usar uma propriedade especial, D. D significa desenhar. Dentro desse D, primeiro, você precisa usar o comando. Você precisa especificar o ponto inicial desse comando N. Se você não fornecer o comando, ele não desenhará nada para desenhar uma linha, você pode usar o comando. Após o comando, você precisa fornecer o acesso X e o ponto de acesso Y. Caso contrário, você pode usar o comando horizontal e o comando vertical. Por último, você precisa usar o comando Z, comando Mans close Path, eu vou fechar seu caminho Espero que agora esteja claro para você. Obrigado por assistir a este vídeo. 11. Tutorial do elemento de caminho SVG, parte 2: É bom ver vocês de volta, pessoal. Este é o nosso segundo elemento de vídeo relacionado ao VG Path Neste tutorial, aprenderemos sobre comandos de curva. Como eu disse anteriormente, temos que dizer quatro tipos de comandos no elemento path, comando Lane, que concluímos em nosso vídeo anterior. E neste tutorial, aprenderemos sobre curvas base cúbica e curvas base quadráticas Para criar uma curva Vic, temos dois comandos, C e S. E para a curva quadrática, temos também dois comandos, e T. Então, primeiro, vamos tentar entender podemos criar curvas cúbicas de Bezier Aqui você pode ver dentro da minha janela de visualização, você pode ver um caminho de curva e temos duas curvas nesse Uma curva é descendente e outra curva é ascendente Para criar um caminho, primeiro precisamos de dois pontos, ponto inicial e ponto final Suponha que vermelho seja nosso ponto de partida e lu seja nosso ponto final. Criamos essa curva usando curvas cúbicas de Bezier. Para isso, precisamos de dois pontos para criar essa curva. Em nosso primeiro ponto verde, precisamos fornecer o valor de acesso X e o valor Y xs. Além disso, em nosso segundo ponto verde, precisamos fornecer o valor de acesso X e valor Y cess e reconhecemos esse ponto com o comando C. S significa curvas Cub. Então, quando você cria um ponto, ele cria automaticamente uma curva. Ele não testará o ponto, mas seguirá o ponto, e você pode controlar a profundidade da curva usando o ponto YXS Basta lembrar que, entre o ponto inicial e o final, você precisa fornecer dois pontos de curva para criar curvas de um usuário QV, e temos que escrever um comando Primeiro, precisamos considerar as médias dos pontos móveis e você precisa definir o ponto de partida usando XXs e YxS Aqui você pode ver que XX é 15 e YxS é 50 e, como você pode ver na cor azul, esse é o nosso ponto final. 70 e 50 Entre o ponto inicial e o ponto, precisamos usar o comando C para usar QV ser, e eu crio nossas primeiras coordenadas verdes de 0,20 70 Significa que Xs é 20 e Y xs é 70. Em seguida, fornecemos outro ponto de freio. O excesso é 50 e o eixo Y é 30, e você precisa dar espaço entre essas duas coordenadas do meio-fio, e você pode criar os dois pontos para cima ou para baixo Depende totalmente de você. O mais importante é que você precisa criar dois pontos. Deixe-me mostrar outro exemplo de curvas cúbicas de Bezier. Aqui você pode ver que criamos as calçadas voltadas para o ponto de partida Para isso, primeiro temos o ponto inicial e o ponto final, e precisamos de mais dois pontos para criar essa curva Vamos ver a prática: como podemos criar curvas cúbicas de Bezier Aqui você pode ver lado a lado, eu abro meu Visual Studio Creator e meu navegador usando a extensão life server, e eu já criei o documento TML Dentro do documento ESTiml, eu crio uma imagem SVG e crio uma estrutura de grade para entender os atributos Primeiro, vou criar uma tag Path e quero usar o campo pBatyNun Vou digitar um arquivo igual a dentro da citação nun. Quero avaliar o traçado do meu caminho. Vou usar a propriedade stroke, igual à taxa e dentro do atributo D, e quero começar meu caminho usando a ferramenta de movimentação, elogio AM. Nosso valor XX é dez e nosso valor Y xs é 60. Esse é o ponto de partida do nosso caminho e também precisamos fornecer o ponto final Eu forneço espaço e vou digitar 60 60. Se eu definir esse arquivo, aqui você pode ver se desenha uma linha e deixe-me aumentar a linha em xxx. Eu quero terminar esta linha neste ponto. Então, vou aumentar o valor XXS 80. Se eu definir esse arquivo, agora você pode ver que ele aumenta o tamanho da linha. E agora eu quero fazer uma curva entre esses dois pontos. Portanto, entre o ponto inicial e o final, você precisa assumir um comando que seja C e C deve ser maiúsculo. Até C, precisamos fornecer o ponto. Vou usar 20 Xs e o ponto Ys é 70. Se eu definir esse arquivo, você pode ver que a linha sumiu. Como usamos a curva QV , precisamos fornecer dois pontos Então, depois do espaço, vou criar outro ponto, 50 e 30. Se eu definir esse arquivo, agora você pode ver a curva. Aqui, você pode ver que ele cria duas curvas neste ponto e neste ponto. Precisamos fornecer dois pontos para criar essa curva. Se eu aumentar o valor de YxS de 70 para 90 e definir esse arquivo, agora você pode ver que ele cria uma curva muito mais profunda Se diminuirmos a segunda curva, YX é valor, zero, zero e definirmos esse arquivo, como você pode ver, nossa segunda curva é mais profunda na parte superior Além disso, podemos usar valores negativos. Se eu usar o valor negativo -40 e definir esse arquivo, agora você pode ver que ele está se aprofundando na parte superior Agora está claro para você criar uma curva QV, precisamos de duas coordenadas Além disso, podemos criar uma curva unilateral. Deixe-me te mostrar isso. Se eu usar YxS dez para nosso primeiro ponto, da mesma forma, se eu usar YX dez para nosso segundo ponto e definir esse arquivo, agora você pode ver que ele tem uma curva unilateral Se você quiser criar duas curvas usando um caminho, precisará usar outro comando, que é um comando e nosso comando sempre funciona com nossa curva cúbica Comando C médio. Primeiro, deixe-me mostrar o exemplo. Aqui você pode ver um caminho curvo. Aqui eu uso duas curvas cúbicas de Bezier em um único caminho. Da mesma forma, primeiro, temos um ponto inicial e um ponto final. Mas, como você pode ver, há outra curva. Mas, como você sabe, para criar nossa primeira curva, precisamos de dois atributos e precisamos digitar o comando algo assim. Depois de criar essa curva, quero criar outra curva usando o mesmo caminho. Para isso, precisamos usar o comando. Se usarmos o comando, não precisaremos fornecer o ponto de partida. Simplesmente, precisamos digitar as coordenadas finais e você não precisa fornecer duas coordenadas como o comando C. Simplesmente, você precisa digitar as coordenadas do ponto preto e escrever algo parecido com esse código. Depois do comando C, você precisa usar o comando. Primeiro eu digito end command e entre S e Nommand, precisamos fornecer o único ponto de curva Vamos ver de forma prática como isso funciona. Mais uma vez, estou de volta ao meu coordenador do Visual Studio. Primeiro, vou mudar os pontos do carro, C 20 e CYxS 18 E em nosso segundo ponto, XX é 40 e Y xs é 80. Se eu definir esse arquivo, você pode ver que ele criou uma curva no lado negativo E se eu diminuir o ponto final dessa curva 80 para 50 e definir esse arquivo, agora você pode ver a curva Isso cria uma forma de arco perfeita. Como eu disse, quero criar uma nova curva com isso, então vou usar o comando. E para nossa segunda curva, eu quero criar um ponto aqui. Portanto, o valor X é 70 e o valor Y xs é 20. Vou digitar 70 20. Também precisamos fornecer o ponto para essa curva. Eu vou usar 90 60. Se eu definir esse arquivo, agora você pode ver a curva. Espero que agora esteja claro para você, como podemos criar duas curvas cúvicas em um caminho Se você quiser criar uma curva cuv, basta unir para usar o comando C. Se você quiser criar duas curvas cuv, precisará usar o comando E nosso comando só funciona com a curva QV, não com a curva quadrática Simplesmente, você precisa fornecer o ponto final e, entre eles, fornecer o ponto da curva. É isso mesmo. Então, vamos falar sobre curvas básicas quadráticas. Este é o exemplo da curva base quadrática. Primeiro, precisamos fornecer o ponto de partida, depois precisamos fornecer o ponto final. A principal diferença entre a curva quadrática e a curva QV está na curva quadrática, você precisa fornecer um ponto de curva, algo como esse ponto verde, e então ele se dobrará automaticamente de acordo com esse Vamos ver o exemplo prático de como funciona. Vamos pegar um valor quadrático no topo desta linha. Vou digitar XS é 20 e Y Xs é 30. Se eu definir esse arquivo, aqui você pode ver que ele criou uma curva quadrática Se você quiser criar uma curva mais alta, precisará diminuir o valor de YxS valor YX é dez. Se eu definir esse arquivo, você poderá ver uma curva mais alta. Se você quiser criar uma curva abaixo dessa linha de estado, basta unir para aumentar o valor de Y xs 80. Se eu definir esse arquivo, agora você pode ver, ele cria uma forma de arco abaixo da linha. Se você quiser mover esse ponto da curva deste lado para este lado, basta unir para aumentar o valor XXS 40 Se eu definir esse arquivo, você pode ver que ele moveu o ponto da curva. Essa é a nossa curva quadrática. Essa é a nossa curva quadrática. Basicamente, você precisa fornecer um ponto entre o ponto inicial e o ponto final e usar o comando Q para especificar esse ponto Se você quiser criar duas curvas quadráticas em um caminho, precisará usar o comando T. Deixe-me mostrar como os comandos T funcionam. Hercac em um único caminho, criamos duas curvas base quadráticas Primeiro, precisamos digitar um ponto inicial e um ponto final. Entre o ponto inicial e o ponto final, precisamos digitar o ponto Q para criar a primeira curva e você conhece o processo Se quisermos criar nossa segunda curva quadrática, basta apenas em um ponto final e não precisamos fornecer nenhum ponto de curva De acordo com o ponto verde, ele criará a mesma curva na direção oposta. A principal vantagem é que não precisamos fornecer o segundo ponto da curva. Para o ponto verde, precisamos usar o comando Q e para o ponto roxo significa ponto final, precisamos usar o comando T. Vamos ver na prática como isso funciona. Então, mais uma vez, estou de volta às minhas visitas ao seu editor de bacalhau. Então, primeiro, vou mudar as coordenadas Q 30 y 30. Se eu definir esse arquivo, você pode ver que ele cria uma forma de arco na parte superior Então, simplesmente precisamos usar o comando P porque precisamos criar outra curva quadrática Então, depois de T, precisamos fornecer os pontos Xs e YXS. XXs eu vou pegar 90 e de YxS eu vou pegar Eu configurei este arquivo, aqui você pode ver a curva. Você pode ver que ele cria automaticamente essa curva apenas para pegar o ponto N, não o ponto da curva. Esse comando D funciona com as coordenadas do comando Q. Sem o comando Q, não vai funcionar. Só funciona com curva quadrática, não com curva QV. Espero que agora esteja claro para você o que é curva QV e o que é curva quadrática Na curva QV, você precisa fornecer dois pontos de coordenadas e na curva quadrática, você precisa fornecer apenas um ponto de coordenadas Essa é a principal diferença entre essas duas curvas. Obrigado por assistir a este vídeo, nos vemos no próximo tutorial. 12. Tutorial do elemento de caminho SVG, parte 3: Olá, pessoal. Este é nosso terceiro tutorial sobre o elemento de caminho SVG E neste tutorial, aprenderemos sobre o comando arc. Como eu disse anteriormente neste tutorial, temos quatro comandos diferentes na tag de caminho SVG e aprendemos o comando de linha, a curva cúbica de Bezier e a curva quadrática de Bzier quadrática de Bzier Portanto, neste tutorial, abordaremos o arcommand. Para criar um arco, precisamos usar um comando. Com isso, precisamos usar algumas propriedades múltiplas. Vamos ver as propriedades. Aqui você pode ver o arco em nossa caixa de visualização. Parece um círculo central. Para criar um arco, você deve ter dois pontos, ponto inicial e final, e precisamos fornecer o valor Xss e o valor YxS para definir Entre o ponto inicial e o ponto final, precisamos usar o comando A. Um comando de arco de meios. Com o comando arc, precisamos fornecer o ponto de processo e o ponto YxS Este ponto que definirá o raio desse arco significa a profundidade do arco Se movermos o ponto do raio mais para o ponto central , isso criará mais profundidade no arco. Então, vamos ver o comando. Primeiro, você precisa assumir o comando, significa ponto móvel. Em seguida, você precisa fornecer o valor Xccess do ponto inicial e o valor YXS e o valor excedente do ponto e o valor Entre esses dois pontos, precisamos digitar o comando arc. Primeiro, precisamos fornecer o valor cess e o valor YXS para o ponto da curva e, em seguida, precisamos fornecer os três parâmetros diferentes Então, vamos tentar entender os parâmetros. Aqui você pode ver com o comando arc três outros parâmetros. Chame o primeiro parâmetro de X rotação excessiva. Ele pode girar nosso círculo a partir do ponto de excesso X. Basicamente, não usamos esse ponto. Na maioria das vezes, usamos o valor zero e precisamos ter muito cuidado com esse ponto. Nosso próximo parâmetro é uma bandeira de arco grande. Com esse ponto, podemos definir o tamanho do círculo. Por padrão, ele vem com zero significa arco pequeno e vem com dois valores, um ou zero. Se eu usar um valor, ele aumentará o tamanho do arco, e nosso último parâmetro é a bandeira do traje. Por padrão, sua propriedade é uma. E também vem com dois valores, zero ou um. Um significa que ele será construído onde quisermos construir. Mas se usarmos o valor zero, algo assim, criaremos o arco na direção oposta. Você não precisa alterar o valor em excesso ou o valor x. Basicamente, você só precisa jogar com o parâmetro S flat. Isso criará seu arco na direção oposta se jogarmos com esse parâmetro. Vamos ver o prático e tentar criar o arco em nosso navegador. Aqui você pode ver, eu já criei um documento Stal e já criei o contêiner de classes Dp Eu pego uma VGtag dentro dessa profundidade e já defino a caixa de visualização cem por cem E também criamos uma base temporária para entender os atributos Vamos desenhar um arco. Como você pode ver, eu já pego um elemento de caminho e disse cor vermelha para o traçado do caminho, e para cor do campo, eu disse nenhuma. Como você sabe, primeiro precisamos usar t mais profundo para desenhar uma linha. Primeiro, precisamos fornecer o ponto móvel e o ponto final. E precisamos usar AM para iniciar o ponto móvel. XX é dez e YXS é 50, espaço, e agora vou fornecer o endpoint XXS é 90 e YXS é 50. Ele vai criar uma linha desse ponto até esse ponto. Se eu definir esse arquivo, aqui você pode ver a linha. Agora vou criar o arco entre o ponto inicial e o ponto final Para isso, precisamos usar o comando A. Para criar um arco perfeito, precisamos pegar o ponto médio. Basicamente, quero dizer que quero criar um ponto nessa posição. Você precisa fornecer XXS 50 YXS 30. Se eu definir esse arquivo sem usar nada em nossa nota, aqui nós apenas fornecemos um parâmetro, precisamos fornecer outros três parâmetros. Primeiro, precisamos fornecer o parâmetro de rotação X, e eu vou defini-lo como zero para o parâmetro de bandeira grande, vou pegar zero, e para bandeira rápida, vou pegar um. Se eu definir esse arquivo, aqui você pode ver que ele cria um arco. Podemos alterar a profundidade do arco usando o valor YXS. Se eu reduzir esse valor, e vou dizer dez e definir esse arquivo, aqui você pode ver que ele reduziu a profundidade do arco. Se eu disser que YX é zero e definir esse arquivo, aqui você pode vê-lo simplesmente desenhando uma linha E se você quiser aumentar a profundidade, precisamos aumentar o valor do YS. Se eu definir 50 e definir este arquivo, aqui você pode ver a profundidade do arco. Agora vamos aprender o que é o parâmetro de bandeira grande. Aqui você pode ver que o valor da nossa grande bandeira é zero. Se eu definir um e definir esse arquivo, você pode ver que o arco cresceu. Basta lembrar que zero significa arco menor e um significa arco maior. Daí vem o parâmetro da bandeira. Tem dois valores, um ou zero. Ele pode mudar a direção do arco. Se eu definir zero e definir esse arquivo, você poderá ver o arco na direção oposta. Além disso, vou alterar esse valor para zero. Se eu definir esse arquivo, agora você pode ver, se quiser mostrar o arco de direção oposta, basta alterar o valor do sweet plug. Por enquanto, vou configurá-lo como um e vou definir esse arquivo. Agora eu quero criar outra linha com esse arco. Eu quero criar uma forma de Pi usando esse arco. Eu quero criar um ponto nessa posição. Depois desse endpoint, vou desenhar uma linha usando o comando Então, para digitar, vou usar XXS 50 e yx é 80. Se eu definir esse arquivo, aqui você pode ver que ele cria uma linha e agora eu quero unir a linha final ao ponto inicial. Para isso, vou usar o comando Z. Como você sabe, Z significa comando close path. Se eu definir esse arquivo, aqui você pode vê-lo fechar nosso caminho, e eu quero preencher essa forma de Y com a cor verde. Alguns dois tipos parecem verdes. Se eu definir esse arquivo, aqui você pode ver a forma do Pi e agora vou jogar com esses parâmetros. Se eu alterar o parâmetro sweep flag, zero e definir este arquivo, aqui você pode ver que ele cria a forma de uma aeronave bombar furtiva Se alterarmos o valor do sinalizador grande um e definirmos esse arquivo, aqui você pode ver que ele inverte a forma de Pi Aumenta o tamanho do arco na direção oposta. Se você alterar o valor um do sinalizador Sup e definir esse arquivo, aqui você pode ver que ele cresceu para cima Aqui você pode ver usando um comando, você pode criar diferentes tipos de forma, você precisa brincar com seus parâmetros. Agora vou jogar com esse parâmetro, rotação ces. Mas antes, vou diminuir o tamanho do arco. Eu vou definir esse parâmetro. Vou definir esse parâmetro como zero. Agora está de volta à sua posição normal e agora vou alterar o valor de rotação do XS. Então, primeiro, vou diminuir o valor 30 do arco YX e, em seguida, vou aumentar o valor 20 do parâmetro de rotação Se eu definir esse arquivo, agora você pode vê-lo girar nosso arco em 20 graus Se eu alterar esse valor oito T e definir esse arquivo, ele reagirá de forma muito diferente. Sempre definimos o valor de rotação zero. Você pode jogar e experimentar esse parâmetro. Espero que agora esteja claro para você o que é o comando arc na tag Path. Obrigado por assistir a este vídeo, o próximo tutorial. 13. Tutorial de elemento de texto SVG: Olá, amigos. É bom ver você de volta. Neste tutorial, vamos aprender sobre um novo elemento, que é texto. Se você escrever algo em uma tag SVG, precisará usar o elemento de texto Então, vamos ver como isso funciona. Aqui você pode ver que esse é o nosso ponto de vista. E dentro dessa janela de exibição, eu escrevo um resumo de texto Ipsum eu escrevo um resumo de texto Para escrever este texto, precisamos de dois atributos XXs e YxS e o texto começa da posição exata de junção Ele começa na parte inferior do texto e você precisa se lembrar dele. Então, vamos ver de forma prática como isso funciona. Aqui você pode ver, lado a lado, que abro meu coitor do Visual Studio e meu navegador usando a extensão lip server, e eu já criei o documento de estimativa, e dentro do documento de estimativa, eu crio um contêiner Deep plus, e dentro do contêiner, e dentro do contêiner, eu desenho uma janela de visualização de imagem asg cem Também crio uma estrutura granulada para entender os atributos Agora vou criar nossa tag de texto. Vou digitar texto. Então, esta é a nossa tag de texto dentro da tag Vou escrever um texto Lum three Se você usa o Visual Studio Ceditor, já está familiarizado com essa sequência e agora vou fornecer os atributos Xxs e YxS . XX é igual a 30 e YX é igual a 50. Se eu definir esse arquivo, aqui você pode ver o texto. E se você notar, poderá ver o texto começar da linha de YxS e também da linha de base XX. Sem YxS e xxx, temos outro atributo chamado âncora de texto Vou chamar esse atributo de âncora de texto. Usando esse atributo, podemos centralizar nosso texto horizontalmente Se você quiser alinhar seu texto , ele desempenhará um papel vital Temos três tipos de Belo nesse atributo âncora de texto Início, meio e fim. Deixe-me te mostrar. Se eu digitar no meio e definir esse arquivo, aqui você pode ver que é um texto de mídia de acordo com este ponto, porque nosso Xs é 30. Para entender melhor, vou remover esse texto. Se eu definir esse arquivo, agora você pode ver alinhamento das tomadas de acordo com o valor X 30 Então, o alinhamento leva de acordo com esse ponto. Se eu usar o alinhamento final, vou digitar e definir esse arquivo, agora você pode ver que ele faz tomadas do ponto de partida, ou seja, X 30 e Y 50. Se eu usar o valor padrão, basta começar e definir esse arquivo. Como você pode ver, ele começa com o valor padrão. Se quiser colorir seu texto, você pode usar a propriedade de preenchimento. Deixe-me te mostrar. Preencha igual à taxa. Se eu definir esse arquivo, você poderá ver que a cor do texto é taxa e agora vou usar a propriedade CSS com a tag de texto. Eu quero dar uma classe para essa tag, classe igual ao texto. Vou chamar essa classe dentro da tag de estilo, dot, dentro do Cariss e agora quero dar um traçado às tomadas Vou usar a propriedade stroke. Azul. Um traço é azul. Se eu definir esse arquivo, você poderá ver o traço azul. Além disso, podemos usar essa propriedade de campo dentro dessa seção de estilo. Eu quero cortar essa propriedade e vou usar cabelo. Se eu definir o arquivo, você poderá ver o mesmo resultado. Se você quiser tornar a cor do campo transparente, basta digitar nenhuma aqui. E defina o arquivo. Agora você pode ver no traçado do texto e a cor do campo é transparente. Por enquanto, vou usar a cor do campo preto e não quero nenhum traço, então não vou digitar nenhum. Agora vou usar outro texto relacionado à propriedade CSS. Como o tamanho da fonte, deixe-me mostrar para você. O tamanho da fonte é de dez pixels. Se eu definir esse arquivo, você poderá ver o tamanho da fonte. Reduziu o tamanho do nosso texto. Se você quiser usar uma família de fontes diferente, sim, nós podemos. Deixe-me te mostrar. E vou usar a família de fontes Impact. Eu sou EAC t. Se eu definir esse arquivo, você poderá ver o estilo da fonte. Suponha que temos um texto diferente, então eu quero alterar o texto e vou inserir um nome. Adicione uma mina. Agora você pode ver que temos duas palavras, e uma e Minh, agora eu quero quebrar essa linha Quero minerar a palavra abaixo do que adicionar uma. Para isso, não podemos usar a tag break como CSS. Precisamos usar uma tag diferente chamada T span. Deixe-me te mostrar. Vou digitar depois de adicionar um Tspan, vou mover essa palavra Minh dentro dessa tag Se eu definir esse arquivo, você pode ver que não há diferença. Agora eu quero alinhar esse Minh. Para isso, temos duas propriedades, DX e DY. Então, primeiro, vou usar a tag DY. A etiqueta DY funciona verticalmente. Podemos alinhar verticalmente o texto usando a tag DY. Como você pode ver, nosso valor Y é 50, então vou digitar 30 aqui. Agora você pode adivinhar que o Minjuor pode estar se movendo para cima a partir da linha de base, algo aqui, mas não vai funcionar Se eu definir esse arquivo, você pode ver, ele é movido para baixo. Ele não contará esse valor na área da janela de visualização Ele contará o valor a partir da linha de base do texto Mínimo de 50 pixels. Então, vamos mover 30 pixels da linha de base, dez, 20 e 30 Vou substituir o valor por dez pixels. Se eu definir esse arquivo, agora você poderá ver o resultado. O atributo DI funciona relativamente a partir da posição da linha de base e, de forma semelhante, valor Dx funciona. Deixe-me te mostrar. Dx igual a 20. Se eu definir esse arquivo, você poderá ver o resultado. Ele se move 20 pixels para a direita de seu lugar porque sua posição exata está aqui. A partir desse ponto, ele se moveu 20 pixels para a direita. Se você quiser alinhar essa palavra de acordo com essa palavra, precisará usar o valor negativo Deixe-me te mostrar. Se eu usar -25 e definir o arquivo, você poderá ver o alinhamento Agora está perfeitamente alinhado com as medalhas. Se você quiser controlar o alinhamento do subtexto, você precisa usar os atributos DY e Dx com o pentágono, não só isso, você pode Eu vou definir isso como uma classe. Classe Minh. Agora vou chamar essa classe dentro dessa tag de estilo, Minh. Dentro da resistência de Cali, primeiro, vou mudar a cor de preenchimento Azul. Se eu definir esse arquivo, você poderá ver a cor. Podemos usar propriedades CSS diferentes para a tag de subtexto. Não podemos usar a tag VA para dividir essa linha. E se você quiser usar a posição absoluta para este texto, sim, você pode. Deixe-me te mostrar. Apenas para remover D. Como vou alterar o X v. Se eu definir esse arquivo, você poderá ver o texto. Yx é dez, de acordo com a posição absoluta, significa a posição Ve Vox X é 25. Se eu aumentar o valor YXS, 30 e depois definir o arquivo Agora está claro para você como funciona. Se eu usar simplesmente os atributos SS e YSS com extensão T, funcionará como a posição absoluta do CSS Se você quiser usar o valor DI e DX , ele funciona como a posição relativa do CSS Podemos usar várias propriedades CSS com isso, como espaço posterior, fonte, etc Agora está claro para você o que é DTC em SVG e como podemos Obrigado por assistir a este vídeo. 14. Tutorial de elemento de imagem SVG: Olá amigos. É bom ver você de volta. Neste tutorial, aprenderemos sobre o elemento de imagem, pois usamos a tag IMG no SDM para inserir uma Da mesma forma, usamos a tag de imagem em SVG para inserir uma imagem. Vamos ver qual atributo precisamos para mostrar uma imagem dentro da tag SVG Suponha que esse seja nosso ponto de vista, e eu quero mostrar essa imagem de tigre dentro desse ponto de vista Primeiro, precisamos do ponto XS e depois precisamos YXSPoint, depois precisamos da largura e altura da imagem Se não fornecermos XX Zulu e YX Zu por padrão, ele começará com Da mesma forma, se não fornecermos altura e largura, por padrão, elas acumulam zero Então, não podemos ver a imagem. A propriedade de aumentar a largura é muito importante na imagem SDG. Vamos começar a prática e ver como funciona. Aqui, você pode ver, lado a lado, que eu abro meu médico do Visual Studio e meu navegador usando a extensão de servidor if, e eu já crio um documento ESTiml Dentro do documento EstiML, eu crio um recipiente profundo e, dentro dessa profundidade, pego etiqueta de peruca com uma caixa de visualização de 100 por cem Para entender os atributos, eu crio uma estrutura de grade. Primeiro, vou pegar a tag de imagem. Em seguida, dentro da tag de imagem, e agora vou usar a propriedade de ocultar e largura para essa imagem. Com altura igual a 100 igual a 100 e agora precisamos fornecer o banho de imagem. Para isso, temos um atributo especial Xink HRDF. Deixe-me te mostrar. Primeiro, precisamos digitar um link X pequeno e, em seguida, dois pontos HRDF iguais aos códigos duplos Precisamos fornecer o caminho como uma tag de imagem DML Aqui você pode ver no meu diretório de trabalho atual, image dot JPG. Vou usar essa imagem. Então, para digitar a imagem. JPG de pontos. Se eu definir esse arquivo, aqui você pode ver a imagem dentro da minha caixa de visualização Eu defino essa imagem de acordo com a largura aumentada da caixa de visualização. Se eu reduzir a largura, algo em 70 e definir esse arquivo, você poderá ver o resultado. Ele ocupa 70 pixels de largura. Se você notar, você pode ver que, acordo com seu tamanho , também muda nossa altura. Vou usar 30 pixels de largura. Defina esse arquivo. Agora você pode ver isso reduzir nossa imagem. Se você quiser alterar a posição da imagem usando XXs e YxS, sim, você pode. Deixe-me te mostrar. Vou usar a propriedade XX, X igual a 30 Se eu definir esse arquivo, aqui você pode ver a imagem começar em X 30 pixels. Essa posição da imagem é trabalhada de forma relativa, não absoluta. Deixe-me te mostrar. Se eu usar YxS YX é igual a dez e definir este arquivo, aqui você pode ver, ele se move relativamente com dez pixels em YXS W nesta tag de imagem, podemos usar tag de bunda, círculo, retângulo, etc Deixe-me te mostrar. Agora eu quero desenhar uma linha sobre a imagem deste ponto até este ponto. Para isso, vou usar uma etiqueta de bunda. Vou usar o atributo draw, D, D igual a dois dentro dos códigos duplos, dez, dez pixels, vírgula, 60 pixels Quer dizer, neste ponto, eu quero desenhar uma linha deste ponto até este ponto, nosso valor do ponto final X é 90 pixels e nosso valor do ponto i é 60 pixels, e também precisamos fornecer uma cor de traçado para esse caminho. Caso contrário, não podemos ver o caminho. Vou usar a propriedade stroke. Traço igual ao vermelho. Se eu definir esse lado, você pode ver a linha se sobrepõe à imagem Você pode usar qualquer tag com isso. Espero que você goste deste vídeo e esteja claro para você como podemos usar a imagem no BG. Obrigado por assistir a este vídeo. 15. Tutorial de propriedades de traço SVG: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos sobre as propriedades do traçado. Então, sem perder tempo, vamos ver todas as propriedades do traçado Aqui você pode ver que, no geral, temos um total de sete propriedades: traçado, largura do traçado, opacidade do traçado, lacuna na linha do traçado, junção da linha do traçado, matriz de traços do traçado e traço oposto ao traçado Então, neste tutorial, vamos aprender essas sete propriedades. Então, vamos começar a prática e tentar entender como ela funciona. Então, finalmente, estou de volta à tela do meu computador. Aqui você pode ver lado a lado, eu abro meu Visual Studio Creator e meu navegador usando a extensão if server, e eu já criei o documento TML E dentro da minha tag SVG, eu já criei uma forma retangular sem Como você pode ver, a cor do campo é verde. Então, vamos começar a usar propriedades. Nossa primeira propriedade é o derrame. Então, vou usar essa propriedade. Traço e nossa cor de traçado é vermelho. Se eu definir esse arquivo, aqui você pode ver um traço vermelho. Usando o nome da cor, podemos atribuir uma cor de traçado. Além disso, podemos usar hexa Valu RGVValu Agora vou abrir uma nova guia e pesquisar a cor xa Valu Aqui você pode ver um site, o curso de cores TL. Vou clicar neste site e aqui você pode ver muitas cores. Se eu clicar nesta seção do gráfico, aqui você pode ver muitas cores com seus valores xa e eu vou usar algo parecido com essa cor laranja Se eu clicar nessa cor, ela será redirecionada para uma página, e aqui você pode ver o valor hexa Se eu copiar esse valor e usá-lo aqui e se eu definir esse arquivo e mostrar minha página de estimativa, aqui você poderá ver a cor laranja do traçado De forma semelhante, podemos usar valor RGV para nossa propriedade de traçado Deixe-me te mostrar. Se eu voltar à minha estimada página de cores, aqui você pode ver algumas cores Vou usar essa variante de cor azul para meu traço. Vou copiar esse valor e vou vincular R GB. Então eu vou substituir esse valor. E se eu salvar esse arquivo e mostrar meu navegador, agora você poderá ver o traço azul. Desculpe, não está devidamente visível. Então, vamos torná-lo mais visível. Então, vou usar uma variante mais profunda dessa cor. E se eu salvar esse arquivo, agora você pode ver o traço azul profundo. Só quero dizer que podemos usar três tipos de valores, RGV, código hexa e nome da cor E agora vou mostrar a vocês nossa próxima propriedade, que é a erva daninha. Vou digitar Stroke We. Usando essa propriedade, podemos controlar a espessura desse traçado. Aqui, vou digitar três. Se eu definir esse arquivo, você poderá ver a espessura do traçado. Se eu aumentar o valor, isso aumentará nossa espessura do traçado. Além disso, podemos usar o valor decimal, 0,3. Se eu definir esse arquivo, agora você pode ver a espessura do traçado. Agora parece muito fino. Por enquanto, vou usar dois valores. E a seguir, nossa terceira propriedade é a opacidade do traçado. Tipo de soma, opacidade do traçado. Com essa propriedade, podemos controlar a transparência do nosso traçado. Se eu usar o valor zero e definir esse arquivo, agora ele ficará completamente transparente. Se eu usar um valor, agora ele estará completamente visível. 0-1, podemos usar qualquer valor dh. Deixe-me mostrar a raiz sonora 0.5. Se eu definir esse arquivo, agora você pode ver que é semitransparente Agora você pode ver o fundo verde no traçado porque ele é 50% transparente. Por enquanto, vou usar um valor. Agora, nossa próxima propriedade é stroke line gap. Para este exemplo, precisamos criar uma linha. Vamos criar uma linha usando a tag de linha. Linha. Eu vou dar uma aula para essa linha, linha de classe. Já aprendemos em nossos vídeos anteriores como desenhar uma linha. Precisamos usar X um valor. Primeiro, precisamos fornecer o valor X um X um igual a 20 e Y um, igual a 20. Vou começar essa linha a partir desse ponto, e agora precisamos fornecer o ponto final dessa linha. Vou digitar X dois igual a 80 e Y dois igual a 20. Agora vou usar essa classe de linha. Vou copiar o nome dessa classe e vou chamá-la aqui de linha de pontos. Dentro das calibrações, nossa primeira propriedade é verdadeira. E a cor do nosso traço é vermelha. Se eu colocar esse solo, você pode ver a linha. Agora eu quero aumentar a espessura do traçado, então vou usar a propriedade de espessura do traçado. Vou usar dois para esse derrame. Agora você pode ver a espessura do traçado. Agora vou usar nossa próxima propriedade, que é traçado, limite de linha, algum tipo, traçado, limite de linha. Basicamente, o limite da linha do traçado tem três valores, mas quadrado e redondo, mas é o valor padrão do traçado. Se eu definir esse arquivo, aqui você pode ver que não há alterações. Mas se eu usar o valor quadrado e definir esse arquivo, agora você pode ver que o traçado mudou um pouco. Basicamente, aumentou a largura da linha. Deixe-me explicar para você o que está acontecendo aqui. Aqui você pode ver uma linha de traçado usando a propriedade butt. Suponha que a largura do nosso traçado seja quatro, você pode ver a linha de base na cor preta, nosso traçado, dois pixels acima da linha preta e dois pixels abaixo da linha preta Mas se eu usar a propriedade quadrada, aqui você pode ver dois pixels acima e dois pixels abaixo. Com isso, ele adiciona dois pixels em ambos os lados. Em geral, aumenta a linha com quatro pixels, dois pixels no lado iluminado e dois pixels no lado direito. Mas se eu usar a propriedade but, ela não adicionará traçado nos dois lados. Essa é a diferença básica entre propriedade quadrada e bunda, e nossa última propriedade é redonda Se eu usar essa propriedade e salvar esse arquivo, agora você pode ver o canto do traçado, arredondado. Está claro para você. Basicamente, a propriedade paisagística funciona nas bordas. Vamos falar sobre nossa próxima propriedade, que é stroke line join. As junções de linha significam onde as duas linhas se unem. Podemos usar diferentes tipos de efeitos nessa junção. Vamos usar a propriedade. Então, para digitar, traçar, junção de linha. Basicamente, temos um total de três valores para essa propriedade. Mais uma rodada da Bíblia. Primeiro, vou usar mitra. Se eu definir esse arquivo, aqui você pode ver que não há alterações porque é o valor padrão. Mas se eu usar o valor arredondado e definir esse arquivo, e agora você pode ver o efeito redondo em todos os cantos, nosso terceiro valor é Bb. Deixe-me te mostrar. Se eu definir esse arquivo, agora você pode ver que há um pequeno corte em seus cantos. Se eu usar esse Zell, ele cortará as bordas da junta. Podemos usar essa propriedade somente em junções, não nas bordas das linhas Agora vou usar nossa propriedade seis, que é a matriz estroboscópica Então, para digitar strobe array. Se você se lembra desse estilo SS boers como pontilhado, pó, etc Da mesma forma, as propriedades do Stroke Desk Array funcionam. Podemos criar o efeito de mesa, usar essa propriedade. Deixe-me te mostrar. Suponha que eu crie um dst de dois pixels e, em seguida, precisamos fornecer o tamanho da lacuna e nosso tamanho da lacuna seja de três pixels. Se eu definir esse arquivo, agora você pode ver o lançamento do disco. Suponha que todos os pontos tenham dois pixels e todas as lacunas sejam três pixels E agora eu quero aumentar o tamanho da lacuna. Eu quero aumentar esse valor em sete. Se eu definir esse arquivo, agora você pode ver a distância entre esses pixels. Eu também quero aumentar o tamanho do pixel, cinco pixels. Se eu definir esse arquivo, agora você poderá ver o tamanho do anúncio. Suponha que agora você queira tamanho escuro de dois pixels e um tamanho de lacuna de dois pixels Para eles, podemos escrever esse valor dessa forma, digite dois. Se eu definir esse arquivo, agora você pode ver que o tamanho do pixel é dois, além disso, o tamanho da lacuna é dois. Da mesma forma, se eu usar um pixel e definir esse arquivo, agora o tamanho do pixel é um, e o tamanho da lacuna é um. Além disso, podemos usar o valor decimal para essa matriz d. Deixe-me te mostrar. Vou usar 0,6. Se eu definir esse arquivo, agora você pode ver o tamanho da mesa. Vamos fazer um pequeno avanço. Por enquanto, nosso tamanho de mesa é cinco e nosso tamanho de espaço é dois. Mais uma vez, o tamanho da nossa mesa é três. Se eu definir esse arquivo, agora você pode ver esse traçado, então eu dou outro espaço dois. Se eu definir esse arquivo, agora você pode ver que ele parece bem avançado. Aqui você pode ver que o tamanho da nossa primeira mesa é cinco e o tamanho do nosso espaço é dois, então nosso segundo tamanho é três e o tamanho do espaço é dois Agora está claro para você como podemos usar essa propriedade para criar diferentes efeitos de traçado. Daí vem nossa última propriedade, que é o Stroke Dash Rose Então, para digitar, stro dash Oset. Stroke dash oste significa que você pode mover os pontos de traço um pouco para o Caso contrário, lado direito. Deixe-me te mostrar. Apenas foque no canto desse retângulo. Vou usar uma propriedade. Se eu definir esse arquivo, agora você pode ver os cantos. Está se movendo um pouco. E agora eu quero mover esse traço de três pixels. Se eu definir esse arquivo, agora você pode ver, correr e se mover, três pixels de elevação Então, essas são nossas propriedades de sete traços. Nossa primeira propriedade é o derrame. Podemos definir qualquer cor usando essa propriedade, e nossa segunda propriedade é a largura. Usando essa propriedade, podemos controlar a espessura do traçado, e nossa terceira propriedade é a opacidade do traçado Usando essa propriedade, podemos controlar a transparência do traçado. E usando a propriedade de junção de linha, podemos controlar os efeitos de junção. Podemos usar o efeito redondo, podemos usar o efeito de corte, etc E usando a propriedade stroke dash array, podemos criar um traço em nosso traçado e, usando a propriedade traço chateado, podemos mover E nossa última propriedade é stroke line gap. Podemos usar essa propriedade de limite de linha basicamente em linhas, não nas formas. Agora está claro para você, quais são essas propriedades do traço? Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 16. Tutorial de propriedades de preenchimento SVG: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos sobre as propriedades do campo. Vamos ver as propriedades. Temos um total de três propriedades relacionadas: campo, preenchimento, filoposidade e regra de campo Vamos tentar explorar a forma prática como ela funciona. Aqui você pode ver, lado a lado, que abro minha porta do Visual Studio e meu navegador usando a extensão Live Server Como você pode ver, eu já criei um documento HTML, index dot TML Dentro do documento ESTiml, eu crio um contêiner D plus Dentro desse contêiner, eu crio um Wigtag com uma caixa de visualização de cem por cem Dentro desse igag eu crio uma grade para entender os atributos Então eu crio uma forma poligonal. Aqui você pode ver a forma. Parecia um senhor e eu também atribuo uma classe a essa forma de polígono, que é forma, e aqui você pode ver que, usando essa classe, estilizamos essa forma, traço, cor vermelha, freira de preenchimento Se eu não usar nenhuma cor de campo, se eu remover essa não palavra-chave e definir esse arquivo, aqui você pode vê-lo preencher nossa cor de forma com preto. Esta é nossa primeira propriedade, que é preenchida. Aqui podemos usar qualquer tipo de valor, valor RGV, valor hexa, caso contrário, nome colorido Por enquanto, vou usar um nome de cor, que é verde. Se eu definir esse arquivo, aqui você pode ver, ele preencherá nossa forma com a cor verde, e agora vou usar o RGV Value e vou usar a cor amarela Se eu definir esse arquivo, aqui você pode vê-lo preencher a forma com a cor amarela. Aqui, fornecemos valor de RGV. De forma semelhante, o hexav funciona. Deixe-me te mostrar. Agora vou usar hexavalu Então, primeiro, precisamos usar has, e eu quero preencher a cor inicial com azul, tipo Sumo, 0000 FF Se eu definir esse arquivo, aqui você pode ver o chef preenchido com a cor azul. Vamos falar sobre nossa próxima propriedade, que é fill opacidade, summotypeFll, opacidade Podemos controlar a transparência usando essa propriedade. Se eu definir zero e definir esse arquivo, aqui você pode ficar completamente transparente E se eu definir um e depois definir o arquivo, aqui você pode ver, agora está completamente visível. 1-0, precisamos usar pontos decimais para controlar a transparência . Deixe-me te mostrar. Se eu usar 0,5 e definir esse arquivo, agora ele é semitransparente Se você quiser reduzir mais essa transparência, basta digitar 0.2 e definir o arquivo. Agora é menos transparente do que o anterior. Da mesma forma, se você quiser aumentar a transparência, basta digitar 0.9 e definir o arquivo. Você pode controlar o quanto quiser e nossa última e terceira propriedade é a regra de preenchimento. Deixe-me te mostrar. Esta propriedade funciona apenas em design complexo. Quero dizer que quando as formas se sobrepõem, elas funcionam Eu desenho essa forma complexa de estrela usando um único elemento poligonal. Aqui você pode ver um total de cinco picos. Mas entre todo o pico, aqui você pode ver uma forma diferente Podemos controlar essa cor da forma. Nós podemos torná-lo transparente. Deixe-me te mostrar. Essa propriedade filual vem com dois valores, diferentes de zero Então, primeiro vou usar esse valor, diferente de zero. Se eu definir esse arquivo, aqui você pode ver que não há alterações porque é o valor padrão da regra de campo, mas há outro valor, que é até ímpar. Deixe-me te mostrar. Se eu definir esse arquivo, agora você poderá vê-lo transparente em nossa forma medial, mas não removeu todas as cores da forma Esse é um caso de uso da propriedade da regra de campo. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 17. Tutorial de elementos de agrupamento SVG: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos a agrupar elementos. Então, vamos começar a prática e tentar entender o que é isso. Aqui você pode ver, eu já criei um documento STML. E aqui você pode ver um contêiner de classe D. E dentro do contêiner, eu crio uma tag SVG, e dentro da VGTag eu já crio dois Nossa cor do primeiro retângulo é verde e a cor do segundo retângulo é o Como você pode ver, elas se sobrepõem umas às outras. E agora eu quero girar os dois retângulos. Para eles, vou designar uma turma. Para nosso primeiro retângulo, nosso nome de classe é verde, e para nosso segundo retângulo, nosso nome de classe é amarelo Em nossa seleção de estilo, vou criar o seletor Vou criar o seletor, ponto verde. Primeiro, quero girar o retângulo verde. Para isso, vou usar a propriedade transform. Transforme e aqui vou usar o valor de rotação, e quero girar esse retângulo Se eu definir esse arquivo, aqui você pode ver que ele gira o retângulo verde Da mesma forma, para girar esse retângulo amarelo, precisamos criar outro seletor, Também vou usar essa propriedade de transformação. Gire 20 graus. Se eu definir esse arquivo, agora você poderá ver o resultado. Mas o problema é que precisamos fazer um trabalho extra para isso. Primeiro, precisamos girar o retângulo verde e depois girar o Mas para resolver esse problema, podemos usar o elemento de agrupamento Podemos criar tanto o retângulo quanto o grupo. Por enquanto, vou cortar esse retângulo e usar a tag de agrupamento, que é a tag G, G. Dentro dessa tag G, vou colar esses É isso mesmo. Além disso, vou fazer uma aula para esse grupo, que é um grupo. Então, agora é criar um grupo. Não preciso digitar CSS diferente para isso. Vou remover um CSS e vou substituir esse nome selecionado por grupo. Se eu definir esse arquivo, aqui você pode ver, não há diferença. Se eu alterar o grau de rotação, 30 graus e definir o arquivo, aqui você pode ver que ele se move para o elemento de reação em conjunto. Agora vou usar outra propriedade que é transform ausin Transform asin sent Se eu definir esse arquivo, agora você pode ver, ele gira nossa forma retangular no meio da página Podemos controlar a rotação o quanto quisermos. 50 graus aqui podemos ver o resultado. Da mesma forma, podemos usar a propriedade stroke de uma só vez. Acidente vascular cerebral, comi. Se eu definir esse arquivo, agora você pode ver o traço vermelho, ambos os elementos t. Se eu usar a classe de grupo, isso afetará todos os elementos dentro do grupo. Agora você pode entender qual é o benefício do agrupamento. Espero que agora a tag do grupo esteja clara para você. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 18. Defs SVG, símbolos e elementos de uso: Olá, pessoal. É bom ver você de volta. Neste curso, aprenderemos elementos de uso do símbolo SVG Dips Sem perder seu tempo, vamos começar pela prática. Aqui você pode ver, lado a lado, que abro meu editor de código do Visual Studio e meu navegador usando a extensão life server, e abro um documento SDML que criei em nosso Aqui você pode ver, eu crio um grupo dentro da tag SVG. E dentro dessa tag de grupo, eu crio dois retângulos diferentes Agora, a situação é que eu quero usar um grupo de objetos mais uma vez sem escrever a mesma quantidade de código. Basicamente, quero usar esse grupo de formas várias vezes em nossa área de janela de visualização. Para isso, precisamos atribuir um ID a essa tag de grupo, ID igual a, e nosso Dnm são formas Depois da tag G, vou ligar para Utag. Deixe-me te mostrar. Dentro do Stag, nosso primeiro atributo é link, dois pontos HREF. Usando essa propriedade, podemos atribuir o grupo e precisamos passar esse ID para atribuí-lo. Copie e cole. Ele vai replicar essa forma neste livro de visualizações. Como você pode ver, usamos um ID, então você precisa fornecer a tag has. Agora precisamos passar dois atributos, atributo X e atributo Y. Usando esse atributo, podemos definir uma nova posição para essas formas. Deixe-me te mostrar. X igual a 30, Y igual a 20. Se eu definir esse arquivo, aqui você pode ver que ele cria outro barbear exatamente semelhante a essa forma, e podemos colocar esse barbear em qualquer lugar dessa caixa de visualização Da mesma forma, se eu quiser criar outra forma, duplicarei essa linha e alterarei as coordenadas -30 -20 Se eu definir esse arquivo, aqui você pode ver que ele cria outra forma na direção oposta. Lembre-se de que isso coordena nosso trabalho em relação a essa tag de grupo. Se você quiser estilizar dois barbeados de forma diferente, não é possível com a tag G. Para isso, precisamos usar outra tag, que é uma tag profunda. Primeiro, precisamos mover essa tag G dentro da tag profunda. Deixe-me te mostrar. Vou me amarrar bem aqui. Vou mover essa tag G para dentro da tag profunda. E você não precisa alterar nada dentro dessa tag G. Continua o mesmo. Mas se eu salvar esse arquivo, alguma coisa estranha vai acontecer. Deixe-me te mostrar. Aqui você pode ver que nosso grupo exato de formas desapareceu. Agora não podemos usar essa forma diretamente. Para isso, precisamos usar a tag us e agora podemos estilizar essas formas de forma diferente. Deixe-me te mostrar. Lembre-se de que não precisamos alterar nada nessa tag de grupo. Por enquanto, vou atribuir classes em nossa tag de uso. Classe A, Classe B. Agora vou criar esse seletor dentro dessa seção de estilo A, dentro dessas colunas, vou usar uma propriedade chamada stroke dash Aqui eu vou passar também. Se eu definir esse arquivo, você poderá ver a diferença entre duas formas. Uma forma vem com borda sólida e outra forma vem com borda tracejada Da mesma forma, se eu quiser alterar a cor do traçado, sim, podemos. Stroke Blue. Mas antes de definir esse arquivo, precisamos remover o traçado da origem. A forma significa forma de grupo. Se eu definir esse arquivo, agora você poderá ver traçado azul nas formas de objetos da classe A. Da mesma forma, você pode estilizar formas de classe B. Deixe-me te mostrar. Eu duplico esse arquivo e vou mudar o nome da classe B. Para a classe B, vou usar traço vermelho Eu vou mudar o traçado de uma lacuna. Cinco. Se eu definir esse arquivo, aqui você pode ver a diferença entre duas formas. Vamos pular para nossa última tag, que é símbolo. Podemos usar a tag de símbolo como uma tag de grupo. Deixe-me te mostrar. substituir essa tag de grupo por um símbolo. Há uma diferença entre tag de grupo e tag de símbolo. Basicamente, o símbolo pode criar uma caixa de visualização diferente. Deixe-me te mostrar. Vou duplicar esse símbolo e também vou alterar a forma dois do ID Se eu definir esse arquivo, aqui posso ver qualquer estilo que aplicamos em nossa classe de grupo, agora todos eles não são aplicáveis Agora vou mudar a caixa de visualização. Deixe-me te mostrar. Vou usar o view BooXpperty Igual ao interior dos códigos duplos, zero, zero, 50, 50. Basicamente, ele vai escalar nossa forma. Se eu definir esse arquivo, aqui você pode ver a diferença. Essa é a diferença básica entre símbolo e grupo. Podemos mudar as visualizações se usarmos o tanque de símbolos. Se você notar, aqui você pode ver que eu cometi um pequeno erro. Não usamos a forma dois de ID nesta seção. Vou chamar isso de ID de forma dois. Se eu usar esse arquivo, agora você pode ver que essa propriedade viewox funciona apenas em formas de ID, não nas duas formas Vamos mudar a caixa de visualização mais uma vez 150 por 150. Se eu definir esse arquivo, agora você poderá ver o resultado. Reduziu nosso objeto símbolo. Podemos alterar a caixa de visualização de forma diferente. Deixe-me te mostrar. Eu copio a propriedade viewbox e colo aqui, e aqui vou alterar 50, 50 Se eu definir esse arquivo, agora você pode ver a diferença entre view boox E se você quiser ampliar essa caixa de visualização, basta aumentar o valor dessa caixa de visualização 200 em 200 Se eu definir esse arquivo, aqui você pode ver a caixa de visualização do objeto Espero que agora esteja claro para você, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 19. Tutorial do elemento SVG TextPath: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos sobre o elemento de caminho de texto. Se você se lembra, aprendemos elemento de texto e o elemento de caminho em nossos tutoriais anteriores E se você quiser criar qualquer objeto usando texto e PAT, precisamos usar uma nova tag, que é o caminho do texto Então, sem perder seu tempo, vamos começar pela prática Aqui você pode ver, lado a lado, que abro meu visual studio coritor e meu navegador usando a extensão lip server, e já crio um documento HTML E dentro desse documento HTML, eu crio uma tag big E dentro dessa tag SVG, eu defino uma caixa de visualização cem por cem Então, primeiro, vou criar um caminho. Deixe-me te mostrar. Como você sabe, precisamos iniciar o caminho com o atributo D. Então, vou digitar D igual a C e, dentro dos códigos duplos, precisamos fornecer o comando. Em seguida, precisamos fornecer Xxs e YxS, que são 20, YX é 20, YX Esse é o nosso ponto de partida. Além disso, vou usar o endpoint para esse caminho. Deixe-me te mostrar. Nosso endpoint é 90 50. Também vou usar o stroke propriety. AVC igual à taxa. Se eu definir esse arquivo, aqui você pode ver uma linha, e agora vou dar um arco a esse traçado. Para isso, precisamos usar um comando. A, e então eu vou fornecer as coordenadas 30 e também YxS é 30, e então precisamos fornecer o valor de rotação X. Por enquanto, vou defini-lo como zero. Além disso, nosso grande valor de arco é zero e, em seguida, precisamos fornecer o valor da bandeira adequada , que é um. Eu já contei em nossos vídeos anteriores como podemos criar um arco usando esses atributos. Se eu definir esse arquivo, aqui você pode ver o arco. Por enquanto, eu não quero nenhuma cor, então vou dizer sinta a cor nun, sinta-se igual a nenhuma Finalmente, criamos a forma de arco e agora vou usar a tag de texto, deixe-me mostrar a você. Dentro dessa tag de texto, precisamos usar outra tag especial, que é o texto Bath. Deixe-me te mostrar. Dentro deste texto Bath, vou digitar um nome, adicionar um Minch. Se eu definir esse arquivo, você não verá nada em nossa caixa de visualização. Porque não anexamos esse texto a esse caminho. Primeiro, precisamos fornecer um ID para esse caminho, ID igual ao arco ARC. Agora podemos usar esse ID e agora podemos atribuir esse ID em nosso caminho de texto. Deixe-me mostrar o pontruse xlink HRDF X link dois pontos HREF igual dentro dos códigos duplos, e dentro dos códigos duplos, precisamos fornecer o ID do caminho, hastag ARC Se eu definir este arquivo, aqui você pode ver o texto, adicionar um mNosso movimento de texto de acordo com essa curva Além disso, podemos usar a propriedade CSS com esse texto. Para isso, precisamos usar uma classe igual ao texto. Agora vou criar o seletor desse texto, texto com pontos Dentro do Surge, primeiro, quero alterar o tamanho da fonte. Tamanho da fonte 12 pixels. Se eu definir esse arquivo, aqui você pode ver o resultado. Reduza o tamanho do texto. E se você não quiser mostrar esse caminho, você deseja mostrar somente esse texto. Nesse caso, você precisa usar a tag dip. Deixe-me te mostrar mergulhos. Se eu mover esse caminho e mover esse caminho dentro dessa tag dips e definir esse arquivo, agora você não pode ver o traçado, você pode ver tudo o que é preciso. Se quiser alterar a posição do arco na direção oposta, basta alterar o valor do plugue Swift um, dois, zero e definir o cinco Agora você pode ver que movemos esse arco na direção oposta. Por enquanto, vou usar um Vale. E defina o arquivo. Se você joga com coordenadas X ou coordenadas Y com R, deixe-me mostrar. Vou usar 40. Se eu definir esse arquivo, agora você poderá ver uma curva diferente, e já aprendemos sobre isso em nossos vídeos anteriores. Se mudarmos essa forma, acordo com a forma, nosso texto mudará essa posição. Portanto, se você quiser vincular esse caminho a esse caminho de texto, precisará de ID e, em seguida, precisará usar o atributo Ling HID para vincular esse caminho ao texto Espero que agora o elemento Bath de texto esteja claro para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 20. Gradientes lineares SVG: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos sobre gradientes. Vamos ver quantos tipos de gradientes temos. Aqui você pode ver que temos dois tipos de gradientes em SVG, linear e gradiente radial Como você pode ver, o gradiente linear é direcional, talvez volte para a direita, cima para baixo ou talvez diagonal, mas nosso gradiente radial vem Vamos começar a prática e, neste tutorial, aprenderemos o gradiente linear Aqui você pode ver, lado a lado, eu abro meu codificador do Visual Studio ou meu navegador usando a extensão lip server Eu já crio um documento HTML, com pontos de índice HTML, e já uso o wisitag view Wox cem e aqui você pode ver uma É muito útil entender as coordenadas. Primeiro, vou criar uma forma retangular. Vou usar a tag Rec. ponto de partida, precisamos fornecer XXs e YxS X igual a dez e YxS igual a 30, então precisamos medir a W 80 e altura igual a 60. Se eu definir esse arquivo, aqui você pode ver uma forma de retângulo e agora vou dar um traçado a esse retângulo Vou digitar traço, igual à taxa. Agora você pode ver esse traço em nosso retângulo. Por enquanto, não quero nenhuma cor, então vou digitar com uma sensação igual a nenhuma. Agora eu quero preencher esse retângulo com gradiente de cor. Significa mais do que uma cor. Para isso, precisamos usar tags de definição que significa tags de profundidade. Dentro dessa tag de profundidade, vou usar uma nova tag, que é gradiente linear. Deixe-me te mostrar. Além disso, vou usar um ID para essa tag, ID igual a dentro dos códigos duplos, L, sob o escopo G, significa gradiente linear Dentro dessa tag de gradiente linear, vou usar outra tag que é stop Você precisa fechar essa tag dessa forma. Dentro dessa etiqueta, declaramos nossa cor. Mas primeiro, precisamos usar o atributo chamado oposto. Aqui, declaramos de onde nossa cor vai começar e eu quero começar o gradiente de cor a partir de 0% Para cor, precisamos usar outra propriedade que é stop colored. Eu vou usar a cor verde. Então eu vou duplicar essa linha e vou mudar o oposto de 100% Também vou mudar a cor azul. O principal é que começa da posição zero e termina na posição cem. Em nossa posição zero, ele começa com a cor verde. Mas na posição 100, termina com a cor azul. Agora eu quero ver o efeito de gradiente em nosso retângulo. Mas primeiro, vou atribuir uma classe a essa forma de elementos retos Agora vou criar um seletor na forma de ponto da nossa seção de estilo Dentro do carlirass, vou usar uma propriedade E então precisamos usar a função URL. E aqui precisamos fornecer o ID do efeito de gradiente, que é underScog Eu quero copiar esse ID, hastag UnderCog também preciso remover a propriedade do campo Se eu definir esse arquivo, aqui você pode ver um gradiente. Aqui você pode vê-lo começando com a cor verde e terminando com a cor azul. Se eu jogar com o valor Offsite, deixe-me mostrar 80% e definir esse arquivo Aqui você pode ver 80% da área preenchida com a cor azul. Então, dessa forma, é w. Por enquanto, vou usar 100 pessoas. Em seguida, temos outra propriedade que é parar a opacidade. Deixe-me te mostrar. Se eu usar essa propriedade, usando essa propriedade, você poderá fornecer transparência nessa cor. Se eu usar o valor zero e depois definir o arquivo, aqui você pode ver que é completamente transparente. Se eu usar um valor, aqui você pode ver todas as cores. Podemos usar o valor 0-1. Vou usar 0,6. Se eu definir esse arquivo, aqui você pode ver, agora é semitransparente Agora, a cor azul é 60% transparente. Mas, por enquanto, vou usar um valor. Agora você pode vê-lo preenchido com cores sólidas. Agora vamos falar sobre a direção do gradiente. Aqui você pode ver nossa cor indo da esquerda para a direita, mas eu quero essa cor de cima para baixo. Para isso, precisamos passar Xx Zu e YxSVuhe. Aqui, precisamos usar dois tipos de xs e YxS X um, Y um, X dois, Y dois. Deixe-me mostrar X um igual a, mas não precisa de códigos duplos. Vou passar de zero pessoa para Y um, também vou usar zero pessoa. E para N coordenadas, o valor de X é 100% e o valor de Y dois é 0%. Se eu definir esse arquivo, aqui podemos ver que não há mudanças porque eu crio a mesma direção dessa cor de gradiente, e agora vou mudar X para valor, zero e Y para valor 100 Se eu definir esse arquivo, aqui você pode ver que ele mudou de direção. Agora está indo de cima para baixo. E se você quiser a cor azul na parte superior, precisamos alterar os valores, zero pessoa e Y um é 100%. Se eu definir esse arquivo, agora você pode ver a cor azul em primeiro lugar e depois a cor verde. Se você quiser mostrar a cor na diagonal, para isso, precisamos alterar o valor Y um é zero, Y dois, 100%, X dois, 100%, Y dois, também 100%. Se eu disser esse arquivo, agora você pode ver nossas cores de gradiente funcionarem na diagonal No lábio e no canto superior, você pode ver a cor verde e canto inferior direito, a cor azul. Agora está claro para você como podemos criar uma cor de gradiente linear Para isso, primeiro, você precisa criar o efeito. E então você precisa atribuir um ID para esse efeito. Você pode usar esse ID no valor da propriedade do campo. Você pode aplicar esse gradiente em qualquer tipo de forma. Além disso, podemos usar várias cores nesse gradiente. Eu quero duplicar essa linha. Agora eu quero usar a cor laranja. E eu quero sentir essa cor na posição de 50%. Se eu definir esse arquivo, aqui você pode ver o efeito. Aqui você pode ver que começa com verde, depois com laranja e depois com a cor azul. Você pode usar qualquer cor em qualquer porcentagem. Se você quiser dizer opacidade nessa cor, você pode usar a propriedade stop opacidade Isso é tudo para este tutorial. No próximo tutorial, aprenderemos o gradiente radial Obrigado por assistir a este vídeo. 21. Gradientes radiais SVG: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos sobre gradiente radial Em nosso tutorial de preferências, já aprendemos gradiente linear Vamos entrar no código do Visual Studio e começar a prática. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor ativo e já criei um documento SML nome do segundo ponto é TML E como você pode ver, aqui já criamos a forma de retângulo Agora eu quero aplicar cor de gradiente nessa forma usando seu nome de ID Quero preencher essa forma de reação com gradiente de cor radial Para isso, como você sabe, precisamos preenchê-lo com o nome de identificação, RG Para isso, eu já preencho essa forma de reação com esse ID, RG Rg significa gradiente radial e, em seguida, vou criar o gradiente radial dentro da etiqueta profunda Deixe-me te mostrar como. Dentro dessa tag profunda, vou digitar gradiente radial Acho que cometi algum erro ortográfico DI ENT. Agora, neste gradiente radial, precisamos atribuir esse ID, o ID do campo, gradiente radial RG ID do tipo hemo igual ao gradiente radial RG. Agora, dentro desse gradiente radial, vou atribuir a primeira Aqui, vou usar a tag stop. Então, precisamos mencionar a posição oposta. Vou usar o atributo Opsete. Em frente às aspas duplas, 0% na posição 0%, eu quero aplicar a cor de parada. Pare de colorir. Pare a cor igual a, e eu quero aplicar a cor verde. Então eu vou duplicar essa linha. Na posição 100%, quero aplicar a cor vermelha. Se eu definir esse arquivo, você poderá ver o resultado. Agora, ao definir essa tag de reação, você pode ver que temos uma cor de gradiente radial Começa com a cor verde e termina com a cor vermelha, e nossas cores verdes começam no centro. Vamos definir outra cor na posição de 50%. Vou duplicar essa linha e, na posição de 50%, quero aplicar a cor azul Se eu definir esse arquivo, você poderá ver o resultado. Então é assim que você pode adicionar quantas cores quiser. E se você quiser mudar a posição do gradiente, sim, você pode Não quero colar esse centro de gradiente. Eu quero movê-lo nessa posição. Para mover o ponto central do gradiente, precisamos usar os atributos Cx e Cy Portanto, o hemótipo ch é igual a 30%. E então eu vou fornecer a posição CY. CY igual a 40%. Se eu definir esse arquivo, você poderá ver o resultado. Movemos com sucesso a posição do gradiente. Podemos colocar o ponto central do gradiente em qualquer lugar em nossa tag de reação E se você iniciar seu gradiente partir do canto exato do laptop, basta passar o valor de 0% XX e 0% do valor de YxS e, em seguida, definir esse arquivo, você poderá ver o resultado Além disso, você também pode controlar o raio do gradiente. Então, primeiro, vou movê-lo na posição de 50%, YXS e 50% na posição XXs Então eu vou usar outro atributo chamado R, R significa raio R igual a, eu quero fazer com que o raio do gradiente Basicamente, vou reduzir a área do gradiente. Depois desse arquivo, você pode ver o resultado. Se você quiser estender o raio do gradiente para isso, basta passar um valor de mais de 50%, suponha que eu passe de 90% Depois de configurar esse arquivo, você pode ver o resultado. Por enquanto, vou usar 20%. Como eu vou mudar a cor inicial do gradiente. Quero substituir o verde pelo branco. Depois de sufocar, você pode ver o resultado. Agora vamos jogar com o valor do ponto de foco. Eu quero mudar o foco desse gradiente radial. Para isso, precisamos usar um atributo chamado H A X porque eu quero mudar o foco da dedução x, igual a e eu quero aplicar 10% Para configurar essa pilha, você pode ver o resultado. Isso é o que cria uma mudança no foco de 10% em excesso de direção. Ainda assim, é um gradiente radial, mas nós apenas mudamos o ponto de foco Agora parece um feixe de lanterna e, para criar um efeito de gradiente diferente, você precisa brincar com esses valores Suponha que eu faça um raio de 40%. Além disso, vou alterar o valor ex e defini-lo em 20%. Se eu definir este arquivo, você poderá ver o resultado e, semelhante à posição Fx, também temos a posição FY. Vou empatar o atributo FY igual a, e vou torná-lo 40%. Depois de definir esse arquivo, você pode vê-lo se mover sobre o ponto de foco para cima Agora, vamos falar sobre o último atributo gradiente radial girado, que é Para isso, vou duplicar essa linha e contar a linha anterior Primeiro, vou remover os atributos AX e AY. Além disso, vou remover o valor do raio. Então eu vou configurar esse arquivo novamente. Em seguida, vou chamar esse atributo de método pulverizado. Spray de hemotide. Esse atributo vem com o valor total de C , preenche, reflete e repita. Se eu usar pad, é um valor padrão, Sonu type pad. Depois de usar esse valor, se eu definir esse arquivo, como você pode ver, não haverá alterações e, em seguida usarei o próximo valor chamado repeat. Se eu definir esse arquivo, você poderá ver o resultado. Se eu reduzir o raio do gradiente, deixe-me mostrar R igual a 20% e isso configura esse arquivo, agora fica mais claro para você como ele Agora, preencha o recipiente com cores de gradiente repetíveis Aqui você pode observar a camada de gradiente repetido. Agora vamos aplicar o último V do método de propagação, que é plano. Vou substituir a repetição por plana. Urate este arquivo, é isso que ele cria. Agora, ele cria um padrão de gradiente refletivo em toda a caixa retangular Eu gostaria de sugerir que você experimente essa combinação diferente e crie um efeito de gradiente diferente Se você jogar com esse valor todas as vezes, ele retornará um resultado diferente. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 22. Adobe Illustrator para svg: Olá, pessoal. É bom ver você. Neste tutorial, aprenderemos como podemos desenhar qualquer forma complexa sem usar ASV Para isso, precisamos usar qualquer aplicativo gráfico vetorial. Como o Adobe Illustrator, o desenho oral, caso contrário, você pode usar qualquer outro aplicativo vetográfico E neste tutorial, vamos usar o Ado V Illustrator Usando o Adobe Illustrator, podemos criar formas geométricas complexas e depois converter essa forma em um docomin Então, vamos entrar no software Adobe Illustrator. Finalmente, abro o aplicativo Adobe Illustrator. Em seguida, precisamos criar um novo arquivo. Para criar um novo arquivo, você precisa ir para File Mino e clicar em Novo. Então você pode ver muitas opções. Vamos criar um arquivo para fins de desenvolvimento web, então vamos selecionar web. Então aqui você pode ver muita resolução. Todas essas são resoluções de páginas da web, mas vou criar minha própria resolução Vou criar 200 por 200. Esta é a nossa área de Vwvox. Se eu for Tacon, crie a opção, como você pode ver, ela cria uma área Vevox de 200 por 200 pixels Esta é a nossa área de visão. Nesta caixa de visualização, podemos desenhar qualquer tipo de forma. Para desenhar uma forma, primeiro vou selecionar essa ferramenta. É uma ferramenta de pinos. Usando essa ferramenta de dor, podemos criar uma linha de traçado. Deixe-me te mostrar. Suponha que, nessa posição, eu queira criar nosso primeiro ponto. Este é o nosso ponto de partida e, nessa posição, vou criar outro ponto. Esse é o nosso ponto final. Como você pode ver, ele cria uma linha reta. Nesse caso, nossa ferramenta de dor funciona como uma etiqueta de linha. E lembre-se, essa é a nossa direção excessiva e essa é a direção de YxS Além disso, usando o Pentool, podemos criar uma linha cúbica de Bezier. Deixe-me te mostrar. Portanto, nosso ponto inicial da reta sier cúbica é esse ponto e nosso ponto final cúbico mais movimentado Nesse ponto, se eu clicar nele e arrastar o mouse, como você pode ver, ele cria uma linha de Bézier Esta é a linha Cubic Bizal. Agora, de acordo com esses painéis de visualização, nossa primeira tag é tag de linha e nossa segunda tag é tag put. Como você sabe, usando a tag Put, podemos criar qualquer forma complexa. Deixe-me te mostrar. Agora vou desenhar uma forma complexa. Vamos começar nessa posição. Então eu crio alguns pontos escondo esse ponto e uno esse ponto Agora você pode ver aqui que criamos uma forma geométrica complexa. Agora eu quero preencher essa forma complexa com uma cor. Para isso, primeiro precisamos selecionar a opção de seta e, em seguida, selecionar essa forma geométrica Depois disso, a partir daqui, podemos selecionar qualquer cor. Suponha que eu queira preencher com a cor verde. Como você pode ver, agora nossa forma complexa é preenchida com a cor verde. Se você quiser alterar a cor do traçado dessa forma complexa, sim, você pode. Basta selecionar a forma complexa. Então você precisa escolher a opção. Desta vez, você precisa selecionar a opção de traçado. Agora você pode ver que nosso traçado está selecionado e eu quero atribuir ao traçado a cor vermelha. Depois de selecionar a cor, você pode ver o resultado. Em VG, podemos desenhar essa forma usando a ferramenta Path, caso contrário, a ferramenta polygon. Nós já sabemos disso. E agora vou mostrar como você pode criar uma forma de retângulo Para isso, você precisa selecionar essa opção, essa ferramenta, retângulo Em seguida, você precisa selecionar a posição inicial escolher e arrastar o mouse. Depois de arrastar o mouse, como você pode ver, ele cria uma forma de retângulo com a cor do campo verde Novamente, eu quero mudar a cor do campo. Para isso, primeiro, você precisa selecionar a opção de campo, depois vou preencher com a cor azul. É assim que podemos criar uma forma retangular, caso contrário, uma forma quadrada Se você quiser criar uma forma de elipse, para isso, você precisa selecionar o EllipTol Usando Elliptol primeiro, você precisa selecionar o ponto de partida, depois arrastar o mouse e criar E para essa forma de elipse, vou usar a cor amarela do campo Agora, eu gostaria de converter essa imagem, converter essa imagem do Adovillustrator em uma igigraphics Para isso, você precisa selecionar a opção de arquivo. Em seguida, você precisa selecionar Salvar como. Opção de salvamento superior, primeiro, você precisa fornecer em qual pasta deseja salvar seu arquivo Esta é a pasta, quero salvar meu arquivo e, em seguida, você precisa selecionar em qual formato deseja salvar o arquivo. Aqui você pode ver a opção Salvar como tipo. A partir daqui, você pode salvá-lo como Illustrator como arquivo PDF Como você pode salvá-lo como arquivo svg. Vou usar essa opção, VG. Então eu vou usar a placa Rd, usar a área de inicialização R. Se não usarmos a área Abood , você usará a área cinza como prancheta Vou usar apenas a placa vermelha. Em seguida, vou clicar na opção Salvar. Depois de selecionar a opção Salvar, aqui você pode ver muitas opções. Você não precisa alterar nada, você precisa selecionar mais opções e, a partir das configurações de mais opções, você precisa ir para a opção Avançado. E aqui você pode ver uma opção importante chamada propriedades CSS. E se eu abrir esse menu suspenso, aqui você pode ver o atributo de apresentação, o atributo estilo e os elementos de estilo Por enquanto, gostaria de salvar esse arquivo usando elementos de estilo. E então eu vou pressionar Fok. E se eu mostrar meu diretório de trabalho atual, como você pode ver no meu diretório de trabalho atual, há um Igifile chamado Untitle 01, e agora vou definir o mesmo arquivo em uma propriedade Sass diferente Deixe-me te mostrar. Novamente, vou clicar no menu Arquivo, depois elogiar Sabas, selecionar a área de Atwood e renomear o arquivo Imagem dois. Em seguida, seleciono a opção Sab. Mas desta vez, não vou selecionar o elemento de estilo. Desta vez, vou usar atributos de estilo e vou definir esse arquivo. E agora, se eu mostrar meu diretório de trabalho atual, como você pode ver agora, você precisa falar com a imagem AWG Para minha primeira imagem, aqui eu uso propriedades de elementos de estilo. E para a segunda imagem, eu uso atributos de estilo. E agora vou abrir o War of my image usando meu navegador. Então, aqui vou abrir o navegador Chrome e dentro desse navegador Chrome, vou abrir essa imagem. Como você pode ver, você pode ver a imagem exata, o que eu crio no meu software listado na Atov e você pode ver a extensão É uma imagem AWG. E agora vou mostrar o código-fonte e você poderá entender qual é a diferença entre essas duas imagens. Ambas as imagens retornarão o mesmo resultado. Não há alterações, mas se eu abrir as duas imagens no meu editor de código, deixe-me mostrar primeiro que vou abrir e o ponto um do título é WiGi, depois vou abrir a imagem dois pontos e um é Vigi Como você sabe, para a imagem da peruca dois, imagem dois, usamos atributos de estilo Nesta imagem, como você pode ver, primeiro use o vBox stag, como eu disse, criamos uma caixa de visualização 200 por 200 Em seguida, criamos uma tag de linha. Em seguida, criamos uma tag put e, usando a tag put, criamos uma linha curva Em seguida, usamos uma tag de polígono para criar a forma geométrica complexa e, em seguida, usamos uma Por fim, usamos a tag circular. Lembre-se, quando configuramos esse arquivo, usamos o atributo de estilo. É por isso que usa o método de estilo interior. Mas se eu mostrar minha primeira imagem, onde eu uso o elemento de estilo, como você pode ver, ela usou a mesma tag, mas não usa o método de estilo interno Ele usa elemento de linha, bunda, tag de polígono, tag de reação, tag Todas as tags são iguais, mas para estilizar, ele usa elementos de estilo Ele usou o nome da classe para estilizar os elementos e não segue o método de estilo Inland Essa é a diferença entre dois arquivos, mas ambos retornarão o mesmo resultado. Lembre-se de que, se usarmos cores de preenchimento semelhantes e cores de traçado semelhantes, nesse caso, ele usará o mesmo nome de classe. Ele atribuirá o mesmo nome de classe ao elemento. Mas se alterarmos uma das propriedades, caso contrário, a cor de preenchimento, caso contrário, a cor do traçado, ela usará um nome de classe diferente. Nesse caso, como você pode ver, está em um. E todos os atributos e pontos que você pode observar nessas tags, você já está familiarizado com isso. Você já conhece X um ponto X Y um ponto, X dois pontos e um y dois pontos. Este é o nosso ponto de partida e esse é o ponto final. Você está familiarizado com pontos, altura, largura, raio, círculo Y e círculo X, etc Eu não vou explicar isso aqui. Depende de você que tipo de formato você escolherá , atributo CSS, caso contrário, elemento CSS. Mas, pessoalmente, recomendo usar o elemento CSS porque é mais organizado e muito fácil de comer. Então, neste tutorial, fisicamente, eu tento ensinar como podemos converter forma ctrográfica em uma imagem SVG Caso contrário, o software Adobe Illustrator é um grande tópico. Não podemos abordar esse tópico em um vídeo. Se você se lembra dessa estrutura de grade que usei em todos os tutoriais para calcular os pontos, eu crio essa estrutura de grade usando o ADovIllustrator e apenas extraio o código SVG e o Portanto, esta é a introdução simples do sofá adv Illustrator, e há outros softwares e ferramentas on-line Isso pode converter o gráfico do vencedor em uma imagem SVG. Aqui você pode criar imagens complexas usando o Ado Illustrator Softa e convertê-las em uma imagem SVG Em nosso próximo tutorial, criaremos uma imagem complexa usando o software AdoVillstrator Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 23. Animação do Svg ClipPath: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos o que é a tag Kipput em Vamos tentar entender o que é a tag Kipp. Volto ao meu software Adobe Illustrator. Aqui você pode ver duas formas. Como você pode ver, nosso primeiro chef é forma de coração e nosso segundo chef em forma de círculo. Se eu sobrepor a forma e selecionar ambas as formas, e depois pressionar aqui você pode ver a opção, criar máscara de recorte Se eu pressionar, aqui você pode ver que ele corta a área sobreposta de acordo com o formato do coração Agora, a forma do círculo é visível somente dentro da forma do coração. Se eu mover a forma do círculo dentro da forma do coração, aqui você poderá ver resultados diferentes. Podemos mover a forma do círculo dentro da forma do coração, algo assim. Além disso, podemos reduzi-lo e animá-lo. Da mesma forma, temos a tag Kept no VIG. Antes de começar a prática, deixe-me mostrar uma coisa. Aqui você pode ver uma forma rígida dentro da caixa de visualização e eu já extraio o código do Wig desta Como você sabe, precisamos usar a tag Put para criar essa forma. Vamos entrar no editor de código do Visual Studio e tentar entender como ele funciona. Aqui você pode ver, lado a lado, que abro meu editor de código do Visual Studio e meu navegador usando extensão light server e já crio um documento STML Essa é a nossa dificuldade que é criada por essa etiqueta de bunda, e eu já atribuo ID a essa etiqueta de bunda, o que Primeiro, vou criar um círculo antes da etiqueta de bunda. Vou amarrar um círculo. Como você sabe, para criar um círculo, precisamos usar três atributos. Nosso primeiro atributo é Cx, CX igual a 40 Nosso próximo atributo é CY, CY igual a 35, e nosso último atributo é o atributo raio Para o atributo raio, precisamos usar R, R igual a, por enquanto, vou usar 35 Se eu definir esse arquivo, aqui você pode ver esse círculo. Por padrão, ele vem com a cor preta e você sabe disso. Agora vou mover esse círculo dentro da etiqueta do cliput. Vou digitar o clipe PT. Vou mover esse círculo para dentro da etiqueta do clipper. Vou definir o ID para essa etiqueta de recorte. Deixe-me mostrar um ID igual ao meu clipe. Se eu definir esse arquivo, agora você pode ver que nosso círculo está desaparecendo, e agora eu quero mostrar esse círculo dentro da forma de coração, não fora da forma de coração. Para isso, precisamos usar uma tag, que é use. Vou amarrar o uso. E então precisamos usar alguns atributos para criar essa máscara. Nosso primeiro atributo, nosso primeiro atributo, é o caminho do clipe, igual ao URL, dentro dos códigos duplos. Então, dentro desse parêntese, precisamos fornecer o ID da tag ClipPT, a tag has, meu tag has Agora precisamos vincular esse caminho de clipe a essa dificuldade. Para isso, precisamos usar outro atributo, e você sabe disso, que é xlink HRD. Deixe-me te mostrar. Dois pontos HRDF são iguais aos códigos descendentes. Precisamos fornecer isso, mas a identificação técnica, o que é difícil. Vou digitar has tag hard e também vou fornecer uma cor de campo, que é vermelha. Se eu definir esse arquivo, aqui você pode ver o resultado. Ele corta a forma do círculo de acordo com a forma do coração. Este é o principal caso de uso do clip but tag. Podemos agrupar o círculo dentro dessa forma de coração. Podemos animar o círculo dentro dessa forma de coração e muito mais Vamos animar a forma do círculo dentro dessa forma de coração, e eu já digito algum código CSS para isso. Deixe-me te mostrar. Aqui você pode ver, eu crio um nome de quadros-chave para abrir seu coração. Dentro desse quadro-chave, nosso coração começará do raio zero e sua escala de até 60 pixels E aqui selecionamos nossa forma de círculo usando seletores CSS. Aqui você pode ver dentro do MyCLP ID, que temos uma etiqueta circular. É por isso que primeiro eu uso o My Clif e depois uso a tag circular E então eu chamo nossa animação, que é Open Your Heart, quero rodar essa animação por cinco segundos e quero reproduzi-la por tempo infinito. É por isso que eu uso valor infinito. Espero que você já tenha conhecimentos básicos sobre animação SASS Se eu definir esse arquivo, aqui você pode ver a animação. A cada cinco segundos de duração , nossa animação é executada. Espero que agora você entenda o que é o uso do flip tag. Obrigado por assistir a este vídeo, fique ligado e fique ligado no nosso próximo tutorial 24. Como adicionar JavaScript na imagem svg: Olá pessoal. É bom ver você de volta. Neste tutorial, aprenderemos como podemos adicionar scripts no Vigiimage Suponha que, se você quiser alterar o tamanho do objeto e seu caminho, usando apenas um clique, precisamos usar JavaScript para isso. Aqui, você pode ver dentro da nossa caixa de visualização, temos uma forma retangular e você também pode ver um botão abaixo da caixa de visualização. E agora eu quero dimensionar esse tamanho de retângulo clicando neste botão, algo assim Para isso, precisamos usar JavaScript. Vamos entrar no coordenador do Visual Studio e tentar entender como podemos adicionar JavaScript na Aqui você pode ver, lado a lado, que abro minhas imagens para o codaor e meu navegador usando a extensão b server. Como você pode ver, eu já crio um documento externo e dentro desse documento EML, eu crio um contêiner de classe Dentro dessa profundidade, eu crio uma imagem SVG. Além disso, você pode ver uma forma de retângulo dentro desta imagem VG. Qual ID é g. Então, fora desse contêiner profundo, criamos outro centro de classes. Dentro dessa profundidade, eu crio um botão. Qual ID é o botão. Além disso, você pode ver esse botão no meu navegador. E agora eu quero dimensionar a forma do meu retângulo quando eu pego esse botão Para isso, precisamos usar JavaScript. Como você sabe, precisamos usar a tag Script para isso. Deixe-me te mostrar. Sucata. Dentro dessa tag de script, vou criar uma função e nome da nossa função é tamanho de escala. Primeiro, vou usar a palavra-chave function e o nome da nossa função é tamanho da escala. Dentro dos parênteses, por enquanto, não quero passar nenhum parâmetro Então, dentro dos escultores, precisamos selecionar o ID desse retângulo Documente, pontilhe, obtenha elemento por ID, dentro dos parênteses e dentro do curso duplo ou nome do ID, que é um e agora eu quero dimensionar a largura desse retângulo Precisamos escalar isso com o atributo. Vou usar uma função, ponto, conjunto, atributo. Em vez dos parênteses, em vez dos códigos de subsistência, primeiro, precisamos passar o nome do atributo e o nome do nosso atributo Vírgula e, em seguida, precisamos passar o valor e eu quero escalar até 50 pixels, então vou passar 50 e, em seguida, ponto e vírgula para finalizar esta Da mesma forma, eu quero escalar a altura desse retângulo, então vou duplicar essa linha e, desta vez, o nome do nosso atributo é Então, vou substituir por altura igual a 40 pixels. Então, sempre que eu clico nesse botão, eu quero executar essa função. Para isso, precisamos usar outro atributo, que é n click. E dentro desses códigos duplos, precisamos passar o nome da função, que é o tamanho da escala. Então, eu quero copiar o nome da função e colá-lo aqui. E agora vou configurar esse arquivo e executar esse código. Aqui você pode ver o resultado. Ele dimensiona perfeitamente nosso retângulo. Deixe-me te mostrar mais uma vez. Se eu recarregar meu navegador, aí você pode ver agora nosso retângulo com esses 30 BiiXL e a altura é de 20 pixels Sempre que clico nesse botão, ele escala o retângulo Agora é Ws com 50 pixels e a altura é 40 pixels. Usando JavaScript, podemos animar nossa forma, podemos mover nossa forma Você pode fazer o que quiser. Com a escala, agora eu quero mover a forma em YxS. Ou que você precisa alterar o valor do YXS. Deixe-me te mostrar. duplicar essa linha mais uma vez. Mas desta vez, vou selecionar o atributo Y aqui. Y. Eu quero mover esse retângulo de 30 Mixel na Se eu definir esse arquivo e clicar nesse botão, aqui podemos ver primeiro ele dimensionar nosso retângulo e depois mover nosso retângulo na direção YxS Espero que agora esteja claro para você como podemos usar o JavaScript com o XVGImages Usando JavaScript com CSS e usando JavaScript com VIG, eles são processos semelhantes Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial e, em seguida, começaremos nossos exercícios e projetos empolgantes 25. Animação de carros em movimento: Olá, pessoal. É bom ver você de volta. A partir deste tutorial, iniciaremos nosso projeto. Este é nosso primeiro projeto, e o nome do nosso projeto é carro em movimento. Aqui você pode ver um carro. É uma imagem SVG completa Esta não é uma página HTML e você pode vê-la no meu arquivo SVG de pontos da barra de URL Então, vamos recarregar meu navegador e ver o que aconteceu. Aqui você pode ver nosso carro se mover da direita para a esquerda. E se você perceber que pode ver quando nosso carro parou, também está parando nossas rodas. Então essa é uma animação muito empolgante. Então, vamos ver como podemos criar essa animação. Então aqui você pode ver, lado a lado, que eu abro meu diretório de trabalho atual e meu navegador. Como você pode ver, dentro do meu diretório de trabalho atual, há um arquivo Viz, o nome correto é Jeb Cabrio . Abro esse nome como arquivo VG no meu navegador e aqui você pode Agora vou entrar no software Adoviillstrator. Deixe-me te mostrar. Aqui você pode ver, eu também abro a mesma imagem SVG no ADovIllustrator Agora vou criar um novo arquivo SVG. Para isso, primeiro precisamos criar um novo arquivo AI. Vou clicar nessa seção de arquivo e, em seguida, clicar em Novo. Quero criar nossa área de janela de visualização com resolução SG total É por isso que vou usar a resolução 19 20.080. Esta é a nossa visão da área de trabalho. Agora vou arrastar esse carro nesse espaço. Vou ampliar um pouco essa imagem SVG. E agora vou definir esse arquivo como o AVG é. Para isso, vou clicar na seção do arquivo e pressionar Salvar como. Vou definir esse arquivo no meu diretório de trabalho atual e também vou alterar o nome correto, que é moving car underscore car Agora vou selecionar o tipo de arquivo, que é VG. Em seguida, seleciono a opção Usar prancheta e pressiono Salvar Eu gostaria de usar as propriedades do elemento de estilo. Vou pressionar Ok. Aqui você pode ver no meu diretório de trabalho atual, há outra imagem VG, que está movendo o sublinhado do carro 01 Se eu abrir essa imagem no meu navegador, aqui você pode ver a imagem. Neste exercício, não quero trabalhar com uma página HTML. Eu trabalho diretamente com imagens SVG. Vamos entrar no coordenador do estúdio visual e tentar criar a animação. Então, finalmente, estou de volta ao meu codificador do Visual Studio. Também abro o arquivo SVG do carro em movimento E aqui você pode ver que temos um total de três tags de colocação. Nossa primeira etiqueta de bumbum é para a carroceria do nosso carro. Nossa segunda etiqueta de extremidade é para roda dianteira do carro e nossa terceira etiqueta de extremidade é para a roda traseira do carro Primeiro, vou atribuir um nome de classe à carroceria do carro, classe igual à carroceria do sublinhado do carro. Vou criar um seletor usando esse nome de classe. Vou copiar esse nome e aqui vou usar a tag de estilo. É essa etiqueta de estilo, ponto, o nome da nossa classe. É o CaliverF que eu quero mudar a cor da carroceria do carro. Para isso, vou usar a propriedade de campo. Para a cor do corpo, vou usar a cor vermelha. Se eu definir esse arquivo e recarregar meu navegador, aqui você pode ver que alteramos com sucesso a cor da carroceria do carro Nossa próxima tarefa é girar as rodas em 360 graus Para isso, precisamos usar a tag de transformação animada. Deixe-me te mostrar. Precisamos usar a tag de transformação animada dentro da tag pt Para isso, precisamos usar a tag de fechamento da bunda. P. Primeiro, vou digitar o nome da tag, que é animate transform Além disso, precisamos finalizar a tag e, em seguida, usar algumas propriedades. Nosso primeiro nome de propriedade é nome do atributo. Deixe-me te mostrar. Nosso nome de atributo é transform. Se você está familiarizado com animação CSS, então você ouve esse som muitas vezes. Nosso próximo nome de propriedade é tipo de atributo. E nosso tipo de atributo é XML. Já sabemos que nossa imagem SVG é feita com tags XML. É por isso que nosso tipo de atributo é XML e, em seguida, precisamos fornecer o tipo de animação, tipo igual a, e nosso tipo de animação é rotação Vou digitar rotate. E então precisamos passar do valor e dois valores de 360 graus e em nossos dois valores para zero grau. Então, precisamos fornecer o tempo de duração DUR igual a, e eu quero executar essa animação por três segundos, três é, então precisamos fornecer o tempo de repetição dessa animação Para isso, precisamos usar outra propriedade que é repetir coum. Igual a, e eu quero repetir essa animação por 1,35 vez Isso depende totalmente de você. Por quanto tempo você quer repetir sua animação? Se eu definir esse arquivo, ele girará nossa roda, mas não fornecemos o ponto central dessa roda É por isso que ele manterá um resultado diferente. Deixe-me te mostrar. Se eu recarregar esse arquivo, aqui você pode ver a imagem É girar nossa roda de acordo com o ponto zero X xs. Precisamos passar as coordenadas exatas desse cubo da roda para obter esse valor exato desse ponto central, precisamos voltar ao aplicativo Adovillstrator Então, mais uma vez, estou de volta ao meu aplicativo AdoVillsTror. Agora precisamos encontrar o ponto central exato dessa roda. Vou selecionar essa roda. E aqui você pode ver o ponto Xs dessa roda e o ponto YXs dessa roda Vou copiar o XXSpoint. Se você perceber que pode ver o ponto decimal, ele começa com sete Significa que está acima de 0,5. Podemos usar 753 pontos para isso. Como você pode ver, nosso ponto Y xs é 500. Vamos voltar ao codaor do Visual Studio e atribuir o ponto XS e o ponto XS Portanto, precisamos fornecer o ponto XXS neste local. 753 e nosso ponto XS é 500 e também precisamos atribuir o mesmo valor nessa posição Se eu definir esse arquivo e depois recarregar meu navegador, agora você pode vê-lo girar nossa roda no lugar exato e executar nossa animação por três segundos, precisamos seguir o mesmo procedimento para a roda traseira Primeiro, vou fechar a tag P. E então eu vou copiar o mesmo código de animação, e vou colá-lo aqui. E, mais uma vez, precisamos fornecer o ponto exato para nossa roda traseira. Agora, mais uma vez, precisamos voltar ao software Adobe Illustrator Desta vez, vou clicar na roda traseira e aqui você pode ver a posição, 970 Xxs e 500 YXs Vamos voltar ao editor de código. Nossa coordenada XXS é 917 e nossa coordenada YXS é 500. Também precisamos substituir em duas posições. Se eu definir esse arquivo e recarregar este navegador, aqui você pode vê-lo girando nossas duas rodas na mesma direção Se você quiser mudar essa direção, precisará começar do zero e 2360 graus Só precisa inverter os coordenadores, só isso. Concluímos com sucesso nossa parte central do trabalho e agora precisamos mover o carro inteiro da direção direita para a esquerda. Como isso é possível? Aqui você pode ver que uma tag de grupo significa tag G, e nossa tag G contém todas as três tags put. Precisamos mover a etiqueta G da direita para a esquerda. Mais uma vez, vou copiar a tag de animação. Então coloque a tag, e antes da tag G de fechamento, eu vou colá-la. Para esta animação, não precisamos do valor de e para, por isso, vou removê-lo. E também é necessário alterar o valor do tipo. Para isso, vou usar o translate. Eu não quero girar meu carro inteiro. Eu só quero mudar a posição do carro. É por isso que eu uso translate. Não quero repetir essa animação, então vou usar uma. E então precisamos fornecer o ponto inicial do carro , o ponto final do carro e o ponto final do carro Para isso, vou usar uma propriedade chamada values. Valores iguais aos de dentro dos códigos duplos. Primeiro, precisamos fornecer a coordenada X inicial e as coordenadas Y. Por padrão, nossa posição na curva é zero. Eu quero ligar este carro a uma distância de 400 pixels, nosso valor X x é 400 e nosso valor Y Xs é zero. Cólon. Precisamos fornecer o endpoint Para nosso ponto final, quero parar esta carta em posição absoluta É por isso que vou passar a coordenada zero e também a coordenada Y Se eu configurar esse arquivo e recarregar o navegador, ei, não funcionará Talvez haja um erro. Ei, esqueci de fornecer ponto e vírgula após o valor final. Se eu definir esse arquivo e recarregar meu navegador, ei, ele ainda não funcionará Vamos descobrir o problema. Vamos alterar o tempo de duração por segundo. Além disso, vou mudar os valores. Só mudo o valor do ponto de partida. Se eu definir esse arquivo e recarregar meu navegador, aqui você pode ver como está funcionando Eu dirijo nosso carro e ele também direcionou nossas rodas. Quando nossos carros param, eles também param as rodas. Nós movemos nosso carro com sucesso de um ponto para outro. Espero que agora esteja claro para você como isso funcionou. Obrigado por assistir a este vídeo e fique ligado em nosso próximo projeto 26. Animação de rastreamento de caminho Svg: Olá, pessoal. É bom ver você de volta. Esta é a nossa segunda animação SVG relacionada ao exercício, e o nome do nosso exercício é Path tracking animation Vamos ver o exemplo, o que podemos fazer com essa animação? Aqui, você pode ver o mapa-múndi e agora decide enviar uma remessa de Nova York para Calcutá E por esse caminho, o navio chegará ao destino. Se eu recarregar este navegador, você poderá ver a animação. Você pode ver nosso navio porta-contêineres seguir esse caminho e chegar ao seu destino. Como você pode ver, o ponto vermelho está passando pelo caminho azul. Então, vamos começar a prática e tentar entender como podemos criar esse exemplo. Aqui você pode ver que estou de volta ao meu software Adovillustrator e também seleciono a ferramenta E também, você pode ver, eu aumento a cor do meu campo. Eu só uso a cor do traçado, e nossa cor do traçado é azul. E nossa visão da resolução é 1920 5.080. Então, primeiro, vou desenhar um traçado de curva, algo parecido. É isso mesmo. Esse é o caminho que vou usar em nosso projeto. Se você quiser aumentar a largura do traçado, sim, você pode selecionar o caminho e, em seguida, vou usar dois valores de PT para o nosso traçado. Agora está perfeito. Agora você precisa extrair o código AVG dessa imagem Para isso, precisamos clicar na opção de arquivo e depois salvar. Em seguida, você precisa atribuir um nome para esse arquivo. Vou usar o Demo. Além disso, você precisa selecionar o tipo de arquivo, que é SVG. Em seguida, seleciono a opção Usar prancheta e pressiono Salvar Aqui você pode ver muitas opções. Tudo continua igual. Você precisa usar o elemento de estilo de propriedade CSS e, em seguida, pressionar OK para salvar esse arquivo. Vamos voltar ao Visual Studio Creator e ver que tipo de atributo obtemos desse código SVG Finalmente, estou de volta ao meu Visual Studio Creator, e aqui você pode ver meu diretório, há uma imagem VG chamada demo dot VG Se eu abrir esta imagem, aqui você pode ver alguns códigos. Como você pode ver, o tamanho do nosso viewfo é 1920 5.080. Dentro da tag SVG, há uma tag PAT, que eu crio no software Adovillustrator, a classe PAT Além disso, você pode ver a propriedade CSS desse PAT. E se eu abrir essa imagem no meu navegador, você poderá ver o resultado. É apenas um caminho SVG, nada mais. Então, mais uma vez, estou de volta ao criador do meu estúdio de resultados. Primeiro, vou criar um documento HTML chamado index dot HTML, index dot HTML e também criarei a estrutura básica Então, vamos criar a animação de butt tech. Primeiro, vou usar a tag SVG. Então, para digitar SVG e dentro dessa tag Vg, precisamos definir o tamanho do ViVoc E então precisamos definir a largura e a altura dessa imagem SVG Então, primeiro, vou definir largura, largura igual a 1920 e nossa altura igual a 1080 Portanto, esse é o tamanho da nossa janela de visualização. E dentro dessa tag SVG, primeiro, precisamos criar a tag butt. Mas eu vou usar essa etiqueta de bunda. Então, vou copiar a etiqueta da bunda. E cole aqui. Como você precisa estilizar esse caminho. Para isso, vou usar a tag de estilo. Como você pode ver, o nome da nossa classe de caminho é t0s tipo dot ST Zero Então, lá dentro, o Carver diz, primeiro, se eu mostrar meu código de imagem SVG, aqui você pode ver que nossa propriedade de campo é none Então, vou copiar a mesma propriedade e valor CSS desse código e vou usá-lo aqui. Então, se eu definir esse arquivo e abrir esse arquivo com o servidor p, aqui você pode ver que ele cria o mesmo caminho de traçado com a cor azul. E agora eu preciso criar um ponto vermelho, que vai seguir esse caminho. Para isso, precisamos usar a tag circular. Vamos voltar ao código do Visual Studio editado e tentar entender como ele funciona. Então, primeiro, vou criar uma tag circular após a tag PT, círculo, e vou usar o método de estilo interno para esse Então, para usar a tag de estilo. Nossa primeira propriedade é preenchimento e nossa cor de preenchimento é vermelha. Vou usar o valor hexa para isso. Capital FF 00, 00. Como você sabe, esse é o valor hexa da cor vermelha e nossa segunda propriedade é traçado Vou digitar Stroke aqui. Para o AVC, vou usar a cor branca. Como você sabe, para criar um círculo, precisamos usar o valor do raio Vou usar R igual a e dentro do curso duplo, nosso valor de raio é 8,5 Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver um ponto vermelho no canto do laptop. Agora precisamos iniciar uma animação que pode mover nosso ponto vermelho desse ponto para esse ponto, seguindo esse caminho. Para isso, precisamos usar uma propriedade de animação SVG e o nome da propriedade de animação é animate motion. Dentro dessa etiqueta circular, vou usar a tag de movimento animado, movimento animado. Primeiro, precisamos definir o caminho dessa animação. Para isso, vou usar a propriedade path. Caminho igual ao interior dos códigos duplos. Vou usar o mesmo caminho, então vou copiar esse caminho e depois colá-lo aqui e nosso próximo atributo é o atributo de duração. Vou usar DR igual a seis segundos, nossa próxima propriedade é preenchimento igual a, vou usar o valor de congelamento, FRE Z E. Agora precisamos fechar a etiqueta de movimento animada É isso mesmo. Deixe-me explicar tudo isso mais uma vez. Primeiro, crio uma tag AVG, cujo tamanho do pé de visualização é 1920 5.080 Então, dentro dessa tag VG, primeiro eu crio uma tag butt, e essas são as coordenadas dessa tag put, e já estilizamos nossa tag put usando essa classe Em seguida, crio um ponto vermelho usando etiqueta circular e o valor do raio do nosso ponto vermelho é 815 Então eu uso uma tag de animação SVG, que é animação de movimento. Vai animar nosso ponto vermelho. E agora precisamos mover o ponto vermelho acordo com esse caminho. Para isso, eu uso o atributo butt tech. E dentro do atributo buttek, eu uso o mesmo valor. Se não usarmos o mesmo valor, nosso ponto vermelho, não seguiremos esse caminho e, em seguida, forneceremos o tempo de duração da animação, que é seis novamente. E nosso modo de campo de animação está congelado. Quer dizer que quando a faixa estiver completa, ela congelará nosso ponto vermelho. Então, se eu definir esse arquivo e mostrar meu navegador e depois deletar meu navegador, aqui você pode ver que executamos perfeitamente nossa animação de butt tech. Depois que o rastreamento terminar, ele congelará nossa parte desse caminho. Espero que agora o conceito de animação tecnológica do Path esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo exercício. 27. Animação de embrulho de title Svg: Olá, pessoal. É bom ver você de volta. Esta é a nossa quarta animação SVG relacionada ao exercício. Neste exercício, aprenderemos como podemos encapsular um título com um traço? Aqui, você pode ver algum texto na tela. Se eu continuar este texto, você pode ver a animação. Nós o chamamos de Title Rap Animation. Vamos ver como podemos criar o efeito de animação SVG? Aqui você pode ver na tela, lado a lado, que abro meu Visual Studio Creator e meu navegador usando a extensão light de servidor e já crio um documento HTML Primeiro, dentro da tag body, vou criar uma tag profunda. Então, para digitar, na TV, nossa classe mais profunda é rapper rapper SVG. Dentro desse contêiner profundo, vou criar uma tag SVG Vou dizer altura Ot para essa tag SVG, altura igual a dentro dos códigos duplos, 60 E largura igual ao interior dos códigos de dole, 320. Além disso, você precisa fornecer o espaço mínimo para nomes. Deixe-me te mostrar. Às vezes, essa declaração é necessária e às vezes não. Então, dentro da tag SVG, vou criar um retângulo Para isso, vou usar a tag rec, RCT. Além disso, vou atribuir uma classe a esse retângulo. O nome da classe é forma, e agora vou declarar a altura e a largura desse retângulo Altura igual a 60 e largura igual a 320. Em seguida, pressiono a seta para finalizar essa tag. Se eu definir esse arquivo, aqui você pode ver a imagem. Como você sabe, por padrão, ele veio com a cor de preenchimento preta. Aqui você pode ver que ele cria um retângulo cuja altura é 60 e a largura é 320 Então, dentro da tag SVG, vou criar outra tag dip, Dev, e também vou atribuir uma classe a esse dip Vou digitar um texto neste contêiner, seu texto. Texto. Se eu definir esse arquivo, você poderá ver o resultado. Portanto, concluímos com sucesso nossa parte de ATL. E agora precisamos trabalhar com a seção de estilo. Então, primeiro, vou criar a tag de estilo dentro da tag principal. Então, digite o estilo. Dentro da tag de estilo, primeiro, vou selecionar ML e tag body. Então digite TML, body. Então, dentro do surge, primeiro, quero definir uma cor de fundo. Vou usar a propriedade de fundo. Para Value, vou usar o valor RGV RGB. Então, dentro da rodada, vou digitar 20 2020. Vou definir a cor cinza escuro em nosso plano de fundo. Se eu definir esse arquivo, você poderá ver o resultado. Agora vou definir uma altura para esse corpo e essa tag HTML Então, para digitar a propriedade de altura, altura 100%. Em seguida, alinhe o texto ao centro e eu vou usar o overflow hidden Se eu definir esse arquivo, agora você poderá vê-lo alinhando horizontalmente nosso Agora vou assustar esse contêiner principal. Qual classe é o rapper Swig. Então, eu vou digitar vg rapper. Então, primeiro, dentro da resolução de Cali, vou usar a propriedade de posição, posição relativa Os 50% melhores. Eu só quero inserir esse conteúdo verticalmente. É por isso que eu uso essa propriedade e, em seguida, vou usar a propriedade transform. Transforme, traduza Y -50% e nosso valor de margem é automático. Também é nosso rapper com esses 320 pixels Se eu definir esse arquivo, você poderá ver o resultado. Por isso, alinhamos vertical e horizontalmente nosso centro de conteúdo desta página E agora vou trabalhar com essa forma de retângulo. Para isso, vou usar a classe Shape dot shape. Então, primeiro, dentro do Cariss, vou transpar para essa forma de retângulo Para isso, vou usar a propriedade do campo. Sinta-se transparente. Se eu definir esse arquivo , você poderá ver o resultado. E então vou atribuir um traçado a esse retângulo. Para isso, vou usar a propriedade de traçado, e nossa cor de traçado é vermelha. Se eu definir esse arquivo, agora você pode ver esse traçado, e também vou aumentar a largura do traçado, que é de oito pixels. Se eu definir esse arquivo, você poderá ver o resultado. E agora precisamos trabalhar com a stroke array e a propriedade stroke desk osite Deixe-me mostrar a soma da matriz de traços do tipo, 140 pixels a 540 pixels Usando esses valores, podemos controlar o tamanho do traço do traçado. Também traça a lacuna do painel. A próxima propriedade é stroke ds oposta, e nosso valor positivo de stroke desk é menos 474 Se eu definir esse arquivo, você poderá ver o resultado. Além disso, vou usar a propriedade de borda para essa forma, soma para usar borda. Borda, o tipo de borda de cinco pixels é sólido e a cor da borda é preta. Se eu definir esse arquivo, ele ainda existirá sob a linha de traçado. É por isso que você não consegue ver o resultado. E agora vou usar a propriedade de transição para a duração da animação. Então, eu sou uma transição de tipo. Para a largura do traçado, vou usar 1 segundo. Para stroke dash posite, vou usar um novamente, mais uma vez, e para stroke array, vou usar on again duration mais uma vez. Se eu definir esse arquivo, aqui você pode ver que não há alterações. Quero aplicar essa transição ao passar o cursor no texto. Agora vou estilizar esse texto. Para isso, dentro dessa tag de estilo, vou usar a classe de texto dot text. Então, dentro do Cariss, primeiro, vou mudar o tamanho da fonte e nosso tamanho da fonte é 22 pixels, daí vem e depois vou alterar a propriedade linehight Vou digitar a altura da linha e nosso valor da altura da linha é 32 pixels E eu também preciso de algum espaço entre essas letras. Vou usar a propriedade de espaçamento entre letras, espaçamento entre letras e o valor é oito pixels E também vou mudar a cor da fonte, então vou digitar a cor e nossa cor é branca. Se eu definir esse arquivo, você poderá ver o resultado. Agora vou mover esse texto acima da linha. Para isso, vou usar o valor máximo, -48 pixels superiores e nossa posição é relativa Se eu definir esse arquivo, você poderá ver o resultado. Agora vou usar o seletor de foco para aplicar esse efeito. Então, eu vou usar a classe de rapper dot SVG. Passe o ponteiro do cólon. Então, ao examinar esse contêiner de rapper VG, quero alterar a propriedade stroke dash array e a propriedade stroke dash e a propriedade stroke Para isso, precisamos selecionar a forma, a forma. Então, dentro do surge, primeiro, vou mudar o traçado com valor, então digite, traçado, com. Vou usar o valor de dois pixels para nosso traçado. E nossa próxima propriedade é traço de traçado nossa mesa de traços. O valor oposto é zero, nossa última propriedade é traço de traçado A. E nosso valor de erro de traçado é 760 Se eu definir esse arquivo e depois passar o cursor sobre o texto, aqui você pode ver o efeito. Então, criamos com sucesso o efeito de embrulho do título. Para criar um tamanho perfeito de matriz de traços, você precisa trabalhar com a propriedade de erro do traço do traço e a probidade do deslocamento do traço do traço Só é preciso lembrar que esses valores são muito importantes. Se você alterar o tamanho do retângulo, também precisará alterar os valores da propriedade Em nosso próximo exercício, vou explorar mais sobre essa propriedade. Obrigado por assistir a este vídeo, fique ligado no nosso próximo exercício 28. Animação de texto ondulada 90p aprimorada: É bom ver vocês. Mais uma vez, estou de volta com um novo projeto empolgante. Neste projeto, vamos criar uma animação de texto wav irritável com rotação de 360 graus Como você pode ver, ele fornece o efeito WaterWV de texto. Além disso, nosso conteúdo também é irritante. Podemos alterar o texto diretamente do navegador. Podemos selecionar nosso conteúdo no navegador e também podemos removê-lo. E podemos colocar qualquer conteúdo de texto aqui. Em nosso palpite, vou colocar hello world. Para este projeto, precisamos usar filtros SVC. Então, sem perder seu tempo, vamos começar pela prática. Finalmente, estamos no editor de código do Result Studio e, como você pode ver, já criamos o arquivo index dot t e também criamos o arquivo Sass de estilo dot e já vinculamos nosso arquivo de estilo a esse arquivo t. Primeiro, dentro da tag body, vou criar a tag H two, H two. E dentro dessas duas tags, vou digitar um texto. Por enquanto, vou digitar seu texto. Como você pode ver, já abrimos esse arquivo com o servidor if em nosso navegador. Deixe-me abrir o navegador. Aqui você pode ver no meu navegador seu texto. Vamos voltar ao editor de código do Visual Studio. Mas eu quero conteúdo adequado. Para isso, precisamos usar um atributo, e nosso nome de atributo é contentable. Aqui, vou digitar o conteúdo table, e precisamos torná-lo verdadeiro. Se eu definir esse arquivo e voltar ao navegador e clicar nesse texto, aqui você pode ver que editamos diretamente nosso texto. Você pode colocar qualquer texto aqui. Suponha que eu queira digitar o nome. Agora podemos editar nosso texto pelo navegador. Se eu recarregar esse arquivo, como você pode ver, ele volta ao antigo para conter seu texto Vamos voltar para a inicialização do Visual Studio novamente. Agora precisamos entrar no arquivo de estilo. No começo, vou estilizar nossa etiqueta corporal. Corpo. É que o calibre ou a primeira propriedade é a margem Margem, zero. Nossa próxima propriedade é preenchimento, preenchimento também zero. Nossa terceira propriedade é display, e eu quero usar o flex vi display flex , o centro de conteúdo Justify Além disso, quero alinhar os itens. É por isso que vou usar a propriedade do item alinhado, o centro de alinhamento dos itens Com isso, precisamos definir a altura mínima. Altura do homem cem VH. Além disso, vou dizer que é a cor de fundo. fundo para cor de fundo, vou usar RGV RGB Para vermelho, vou passar de 49. Também para verde, vou passar 49, e para azul, também, vou passar 49. Se eu definir esse arquivo, como você pode ver, ele fornecerá uma cor de fundo cinza escuro. Se eu mostrar meu navegador, aqui você pode ver no meu navegador que dissemos cor de fundo cinza escuro e também alinhamos nosso conteúdo no meio desta página Vamos voltar ao coordenador novamente. Agora precisamos estilizar nossa tag H two, H two. Dentro da resina cali, nossa primeira propriedade é Cor, e eu vou usar a cor branca. Branco. Nossa segunda propriedade é a margem. Margem zero. Nossa próxima propriedade é o acolchoamento. O preenchimento também é zero, e vou usar a família de fontes. Fonte, família, sensorial. Vou usar a fonte sensorial aqui e também vou usar a fonte 08 Font, espere. Eu gostaria de usar a fonte mais ousada. Vou selecionar 900. E então eu vou selecionar o tamanho da fonte tamanho da fonte am. Se eu definir esse arquivo e voltar ao navegador, aqui você pode ver o resultado, seu texto. E se você quiser editá-lo, você também pode. Você pode colocar qualquer texto aqui. Suponha que eu passe por Hello World. Podemos editar o conteúdo diretamente, mas se recarregarmos esse navegador, como você pode ver, ele voltará ao conteúdo antigo e agora precisamos entrar na parte mais importante desse vídeo, que é o filtro VG Vamos voltar ao código do Visual Studio e ao arquivo da tabela de índice. E aqui vou criar um filtro VG. No começo, vou usar a etiqueta VG, VG. Dentro dessa tag VG, vou pegar uma tag filtrada Além disso, vou definir um ID para esse filtro. ID igual a isenção. Então, dentro dessa etiqueta de filtro, primeiro, vou usar o filtro de turbulência FE, turbulência FE E então precisamos usar algum atributo. Nosso primeiro nome de atributo é type. Tipo igual a dentro do código duplo, nosso nome de tipo é turbulência. Nosso próximo nome de atributo é frequência base. Frequência base do tipo Shamo. Frequência base igual a 0,005. Nosso próximo atributo é uma oitava. Num oitavo, igual a cinco. Eu vou dizer isso na oitava cinco. Vou configurar esse arquivo. Em seguida, precisamos criar outro filtro, que é o mapa de deslocamento Então, aqui vou digitar o mapa de deslocamento FI. Fato. R, precisamos passar dois atributos aqui iguais aos gráficos de origem. Nosso próximo atributo é a escala. Escala igual a 50. Por isso, criamos com sucesso nosso filtro AVG. Agora precisamos aplicar esse filtro em nossa tag corporal. Então, vou voltar ao arquivo CSS e, dentro dessa tag body, vou usar um filtro de nome de propriedade. Filtre o URL e, aqui, vou usar essa onda de ID. Eu copio esse ID e aqui vou passar o nome do nosso ID para o hass tag Se eu definir esse arquivo, mostro meu navegador, aqui você pode ver no meu navegador o resultado do deslocamento Aqui você pode ver como esse efeito restringe nosso texto. Vamos voltar ao arquivo CSS porque precisamos alinhá-lo no meio desta página Aqui, vou estilizar outra tag, que é SVG SVG, dentro da resina de Cali, vou definir como alto o W Altura, também zero. Se eu definir esse arquivo e mostrar meu navegador, agora você pode ver que é o Align no meio desta página, e agora vamos pular para a parte final, que é a animação Precisamos girar nosso conteúdo em 360 graus. Vamos voltar ao citador de código. Agora, dentro da tag H two, vou usar a propriedade de animação. Animação e nosso nome de animação é animate. Quero rodar nossa animação para o dia 22. Esta é a duração da nossa animação. E nossa direção de animação é linear. E, finalmente, quero rodar nossa animação por tempo infinito. Então, aqui eu vou usar infinito Vado infinito. E agora precisamos criar o quadro-chave para essa animação Então, aqui vou usar a palavra-chave do quadro-chave na taxa dos quadros-chave na taxa dos quadros-chave E o nome da nossa animação é animate. Então, se os calibres estiverem na posição de 0%, ganharemos nossa posição inicial, quero usar a propriedade de transformação Transforme e aqui vou usar girar e girar 360 graus Então, em nossa posição final significa 100% de posição. Mais uma vez, vou usar a propriedade transform. Transforme, gire. E agora eu quero girá-lo em zero grau. Se eu definir esse arquivo e voltar ao meu navegador, deixe-me mostrar para você. Aqui você pode ver nosso efeito final com a animação. Além disso, nosso conteúdo também é irritante. Podemos editar diretamente. Então, aqui vou passar olá mundo. Olá, mundo. Então, isso é tudo para este tutorial. Espero que você goste do seu projeto. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo projeto. 29. Mascaramento de texto SVG com vídeo: Olá, pessoal. Mais uma vez, voltei com um novo exercício emocionante. Neste exercício, vou realizar o mascaramento do teste SVG com vídeo Neste exercício, aprenderemos como podemos usar texto SVG e transformá-lo em uma máscara de recorte Você pode mostrar qualquer coisa por trás do texto. Pode ser vídeo, talvez imagem ou qualquer coisa, mas eu gostaria de usar o vídeo. Vamos começar a prática e ver como podemos criar essa máscara? Então, finalmente, estou de volta ao meu coordenador do Visual Studio. Como você pode ver, eu já crio um documento HTML e também crio um arquivo CSS de pontos de estilo Aqui você pode ver no meu diretório de trabalho atual há um vídeo, vídeo.p4, e eu vou usar esse arquivo de vídeo para este exercício, e eu já abro esse arquivo usando a extensão light server Primeiro, dentro da tag body, vou criar uma tag VG como VG, e precisamos definir o casamento máximo para essa imagem SVG Vou usar a propriedade de altura, altura igual a 100%. E com igual a 100%. Vou usar a página inteira do nosso navegador e, dentro da tag SVG, vou usar a textag para criar o Então, para digitar texto, nosso texto é uma máscara SVG Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver no meu navegador não há nada porque não podemos definir nenhuma cor de campo para esse texto. Vou atribuir a cor e a posição do campo a esse texto. Para isso, precisamos passar a coordenada X X igual a 50% e as coordenadas Y iguais a 50% Essa coordenada colocará nosso texto no meio da página, e também precisamos fornecer a cor do campo ao texto, então vou usar a propriedade do campo, igual à taxa Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver que o texto é Vig mask, mas não está centralizado verticalmente Precisamos centralizá-lo verticalmente. Vamos falar com o criador do Visual Studio mais uma vez. Em seguida, vá para o arquivo CSS e eu vou selecionar a tag body. Em vez do cali vss, vou definir a altura. 100 VH e mesclar em zero. Se eu definir esse arquivo e mostrar meu navegador, aqui você poderá vê-lo alinhando vertical e horizontalmente Vamos estilizar esse texto e torná-lo melhor. Vou estilizar a tag SVG. Snotype SVG dentro da resina de Cali. Primeiro, vou jogar com o tamanho da fonte. Tamanho da fonte 15 EM e nossa posição é obsoleta, e o valor máximo é zero. Além disso, o valor de elevação é zero e a altura, 100%. Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver que o texto é WigiMsk Vamos mudar a família da fonte desse texto. Vou usar o MonstertFont para este texto e já copiei o link do Google front . Em breve colarei aqui. Depende totalmente de você qual tipo de fonte você deseja usar. Em seguida, volte ao arquivo Style Sass, e vou usar a propriedade da família de fontes, a família de fontes MonsoroWise, MonsoroWise Se eu definir este arquivo e para você meu navegador, aqui você pode ver, mudamos nosso estilo de fonte. Mas se você notar aqui, pode ver que nossa fonte ainda não é medalha em nossa página Para isso, precisamos usar a propriedade de âncora de texto. Deixe-me te mostrar. Então, dentro da minha tag de texto, vou usar essa propriedade âncora de texto igual à medalha Se eu definir esse arquivo, mostro meu navegador, agora você pode ver que nosso texto é Weld Align Mas há outro problema. Nosso texto não responde. Para isso, precisamos usar o mediaquery. Deixe-me te mostrar. Voltando ao arquivo CSS de estilo, vou usar mediaquery ou media, screen, e vou usar Maxi Probability, Max, With, With, quero dividi-lo em termos de tamanho, então vou usar Aplicará uma nova propriedade CSS quando resolução do nosso navegador estiver abaixo de 1.200 pixels Quando navego abaixo de 1.200 pixels, quero diminuir o tamanho da fonte Vou selecionar a tag SVG e, dentro do fígado, diz: vou usar a propriedade de tamanho da fonte Tamanho da fonte quatro EM. Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver nosso navegador com mais de 1.200 pixels É por isso que está escrito às 15:00 da manhã. Tamanho da fonte. Mas se eu reduzir o tamanho do navegador, aqui você pode ver nossa fonte diminuir para o tamanho das 4:00 da manhã. aqui você pode ver nossa fonte diminuir para o tamanho das 4:00 da manhã. Se eu aumentar o tamanho do navegador, você poderá ver o resultado. Vamos definir uma transição para tornar a transformação linda. Vou usar a propriedade de transição aqui. A duração da transição é de 1 segundo e, em seguida, precisamos passar a propriedade de transição. Por que precisamos aplicar o efeito de transição? Quero aplicá-lo em nosso tamanho de fonte. Então, para copiar o tamanho da fonte, eu devo colá-lo aqui. Se eu definir esse arquivo e depois voltar ao meu navegador, e se eu reduzir o tamanho do navegador, você poderá ver a transição. Como você pode ver, nossa fonte muda suavemente de tamanho. Portanto, nosso trabalho central está concluído. Vamos adicionar um vídeo à nossa página de tabela. Vou usar a tag de vídeo aqui. E dentro dessa tag de vídeo, vou usar alguns atributos, como reprodução automática, como reprodução automática, ou o próximo atributo é colocar na linha, mutar, repetir e Dentro dessa tag de vídeo, vou usar a tag source para vincular este vídeo. Então, para digitar, fonte, SRC e o nome do nosso arquivo de vídeo é video.v4 Se eu definir esse arquivo e mostrar meu navegador, aqui você poderá ver o resultado na tela. Agora eu preciso usar mais duas tags SVG, a tag Diptag e a tag Musk Deixe-me te mostrar. Vou digitar Diptag Dentro do Diptag, vou criar a tag Musk, Musk. Como vou atribuir ID a essa máscara, ID igual a, e nosso nome de identificação é Musk E também preciso posicionar essa máscara, então vou usar X igual a zero, e também a posição de YxS é zero Também vou dizer altura e largura dessa máscara, altura igual a 100%, e também preciso fornecer largura e largura iguais a 100%. Em seguida, vou mover essa tag de texto dentro da tag de máscara. Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver que nosso texto sumiu e você já está familiarizado com a tag de definição, aprenderemos sobre a tag dep em nosso tutorial anterior, não vou explicá-la novamente Então, dentro da etiqueta de massa, precisamos criar um retângulo Então, vou usar a tag rec. Vou usar a mesma propriedade de alto peso para esse retângulo Então, vou copiar as coordenadas e colá-las aqui, e também preciso usar a mesma forma de retângulo fora dessa tag dep, algo parecido Se eu te mostrar meu navegador, agora você não verá nada. Agora precisamos selecionar nossa forma retangular em nosso CSS. Vou digitar SVG rec. Então, dentro da resistência Carli, vou preencher o retângulo com a cor branca Vou usar a propriedade do campo, branca. Em seguida, vou usar a propriedade da máscara, máscara, dois pontos, URL. Dentro do parêntese, aqui, precisamos fornecer esse ID, máscara Então, vou copiar o ID e digitar hashtag ou máscara de identificação Se eu definir esse arquivo, ele deve funcionar. Vamos acessar o navegador e ver o que aconteceu. Aqui você pode ver que nosso vídeo SVG deve funcionar perfeitamente e, se eu reduzir o tamanho do navegador, ele também funcionará perfeitamente Agora está claro para você como podemos realizar o mascaramento de sabor SVG Obrigado por assistir a este vídeo. Fique ligado no nosso próximo exercício. 30. Desenho de rolagem: Olá, pessoal. É bom ver você de volta. Mais uma vez, venho com um novo exercício excitante. Neste exercício, aprenderemos a desenhar em rolagem usando a tag VG Path Então, vamos entrar no navegador da web. Como você pode ver, não há nada nesta página. Está completamente em branco. Mas quando eu rolo o mouse, você pode ver que ele desenhou uma imagem, eu desenho a forma de uma estrela. Esse truque do VG está relacionado à barra de rolagem. Então, quando eu rolo meu navegador, ele completa a forma. Então, vamos ver como podemos criá-lo. Lado a lado, abro meu Visual Studio Creator e meu navegador usando a extensão Lifesaver e já crio um documento HTML chamado index Primeiro, dentro da tag body, vou criar a tag Vg SVG. Além disso, vou atribuir ID a essa tag SVG, ID igual ao meu SVG Então, dentro da seção principal, vou usar o estilo. Dentro dessa tag de estilo, primeiro, vou selecionar o corpo e nossa primeira propriedade é altura, altura igual a 3.000 pixels Você pode se surpreender porque eu uso essa quantidade de altura, porque não temos muito conteúdo nesta página da web É por isso que, para fins de rolagem, vou usar essa altura Se eu definir esse arquivo, aqui você pode ver a barra de rolagem. Então eu vou começar a imagem SVG. Hashtag, meu SVG, e que os calibres são nossa primeira propriedade é Posição fixa. Vou usar a posição fixa para este exemplo. Então, no top 15%, para a imagem SBG, vou usar 400 pixels de largura, 400 pixels de largura e 210 pixels de altura Além disso, vou usar a margem no lado do colo, então vou digitar margem p -50 pixels Porque eu quero posicionar a imagem SVG nessa posição, não no canto superior esquerdo do canto É por isso que eu uso essas propriedades. Em seguida, vou criar a forma de estrela usando a etiqueta de bunda. Então, Path fechando o caminho é a tag de bunda. Nossa primeira propriedade é sentir. Sinta-se igual a ninguém. Não quero nenhuma cor de campo para a forma de estrela. Então, nossa próxima propriedade é o AVC. AVC igual à taxa. Além disso, quero definir essa largura do traço. Então, vou usar a propriedade de largura do traço Largura igual a três. Além disso, vou definir o ID para esse caminho. ID igual à estrela. Então, vamos criar a forma usando coordenadas PT. Como você sabe, para criar uma forma usando a tag put, primeiro, você precisa usar o atributo D, Dequal two, em vez dos códigos duplos, nosso ponto de partida Precisamos fornecer o ponto de partida, 150 pixels, e também fornecer o ponto. E nosso ponto é 200 pixels, e nosso próximo ponto é L 225 pixels. E também o endpoint é zero pixel. Se eu definir esse arquivo, como você pode ver, ele desenha uma linha. Ei, há um erro na ortografia da largura. Esqueci de fornecer D entre I e T. Se eu definir esse arquivo, agora você poderá ver a largura do traçado Esse é o nosso ponto de partida. 150 pixels YxS e 200 pixels Xxs. Este é o nosso próximo ponto. Para criar uma nave estelar, vou criar outro ponto neste lugar. Para XXs eu vou passar 300 e para YxS eu vou passar Se eu definir esse arquivo, você pode ver, ele cria outro ponto nessa posição. E agora vou criar outro ponto, algo nessa posição. Para isso, vou passar 150 XX e 50 YXs Se eu definir esse arquivo, como você pode ver, ele cria a linha e, em seguida, quero outro ponto nessa posição. Então, na direção Xs, vou usar L 300 e na direção YX, vou usar apenas 50 Se eu definir esse arquivo, agora você pode ver o ponto. E agora precisamos completar essa forma. Então, precisamos desenhar uma linha desse ponto até esse ponto. E, como você sabe, para voltar ao ponto inicial, precisamos passar o valor Z. Só quero passar Z. Se eu definir esse arquivo, agora você pode vê-lo completar nossa forma de estrela Então, concluímos com sucesso a cápsula de desenho. Mas se eu rolar esta página, ela não vai desenhar a imagem. Para isso, precisamos usar JavaScript. Primeiro, vou criar a tag do script. Depois da tag BG, vou digitar script. Então, dentro da tag do script, primeiro, vou obter o ID desse elemento do caminho, que é estrela, er star igual ao ponto do documento, obter elemento por ID. Dentro dos parênteses, nosso nome de identificação é estrela e dois pontos para finalizar a linha Em seguida, precisamos obter o comprimento total dessa forma. Para isso, vou criar outra variável, por enésima. Igual ao ponto estrela, vou usar a função get total length. Agora temos o comprimento total dessa forma de estrela. Em seguida, precisamos jogar com matriz stroke dh e o valor oposto stroke dash estrela, ponto, estilo, ponto Matriz de traços de estrela, ponto, estilo, ponto e traçado igual ao comprimento Em seguida, ponto e vírgula para finalizar essa linha. Média da matriz de traços, esta é a posição inicial deste desenho. Usando a propriedade stroke desk Osete, podemos ocultar essa forma de estrela e, em seguida, vou usar stroke dash Vou substituir a matriz de traços por mesa de traços oposta Usando isso, podemos esconder essa estrela com traço perturbador e remover essa linha para mostrar a estrela antes desse frio Agora precisamos encontrar a porcentagem desse pergaminho. Para isso, precisamos usar a função Window Add even listener Deixe-me mostrar para você, então digite window dot, um ouvinte uniforme. Então, dentro dos parênteses, nome do nosso evento é scroll, quando eu percorro a página da web, quero chamar uma função e o nome da nossa função é minha Agora precisamos criar uma função que possa calcular esse valor de rolagem Então, vou criar essa função. Primeiro, vou usar a palavra-chave function, function e o nome da nossa função é minha função. Dentro do parêntese, eu não quero passar nenhum parâmetro, então eu o deixo Então, dentro do Calibra, primeiro, vou criar uma variável, e o nome da nossa variável é porcentagem de rolagem Equivalente ao parêntese, primeiro, precisamos unir a rolagem do valor do corpo com o valor da rolagem do documento. Deixe-me te mostrar. Ponto do documento, corpo, ponto, rolar para mais, com isso, vou acrescentar que vou adicionar rolagem de valor do elemento do documento, ponto do documento, ponto, rolar para, e precisamos dividi-lo com o valor da altura. Dentro do parêntese, documente ponto a elemento, rolagem do ponto e, da altura de rolagem, precisamos subtrair a altura do cliente Vou digitar menos a altura do cliente do elemento do documento. Esse cálculo retornará as porcentagens frias. Como você pode ver, quando eu configuro meu arquivo, ele já esconde minha forma e agora eu preciso desenhar a forma ao rolar para baixo. Vou criar outra variável, e o nome da nossa variável é draw, igual ao comprimento, multiplicar por porcentagem de rolagem e semig para finalizar essa linha Se você quiser reverter o desenho, ao rolar para cima em busca desse ponto estrela, estilize, ponto, traços opostos, iguais ao comprimento menos a bruta Se eu definir esse arquivo e rolar minha página, como você pode ver, ele desenhará perfeitamente nossa forma. Se eu rolar para cima, como você pode ver, ele inverte o desenho Se eu rolar para baixo, ele desenha nossa imagem, e se eu rolar para cima, invertendo o Espero que você goste desse projeto. Obrigado por assistir a este vídeo, fique ligado no nosso próximo projeto 31. Animação do SVG Loader: É bom ver vocês. Nesta seção, vamos criar todo o carregador, um por um Aqui você pode ver um total de oito tipos diferentes de carregador de SVG e eu vou criar todo o carregador um por um Vou começar nossos projetos com esse carregador. Vamos ver como podemos criar esse carregador. Finalmente, estou de volta ao meu software Adovillustrator e crio uma área de painel de visualização de 200 por 200 pixels Como você pode ver, dentro dessa área do visor, temos que virar duas formas, uma forma completa de círculo de anel cinza Com isso, como você pode ver, há um pequeno pedaço de círculo. E agora eu preciso girar esse pedaço vermelho do círculo de acordo com a circunferência do círculo Agora, o quoi é como podemos criar essa forma. Como você pode ver, eu já criei um tamanho semelhante de área da janela de visualização, aqui vou criar um círculo sem cor de campo Em seguida, vou alinhar ao meio essa forma de círculo, algo nessa posição Em seguida, vou aumentar o valor do traçado para pixel. Depende de você que tipo de peso corporal você deseja. Em seguida, precisamos converter esse traçado em um caminho de contorno. Para isso, você precisa selecionar o traçado e, em seguida, ir para a seção de objetos, e aqui você pode ver o caminho da opção Basta clicar no traçado do contorno. Agora ele converte nosso traçado em uma forma, e agora vou mudar a cor do traçado, algo como cinza Então eu vou duplicar essa forma de círculo nessa posição Por isso, vou elogiar o Controle C, a Folha de Controle V. Aqui você pode ver na minha seção de camadas que temos duas formas agora, e agora vou ocultar nossa forma anterior. E agora vou cortar essa forma de círculo de um ponto a outro. Para isso, vou usar a forma de linha. Vou desenhar uma linha desse ponto até esse ponto e mergulhar até esse ponto Vou selecionar todas as formas e linhas juntas e, em seguida, vou elogiar o objetivo da nave de ativar a ferramenta Shape Builder. Vou cortar essa tartaruga a partir desse ponto e também vou remover as linhas do traçado E então eu vou preencher a forma com a cor vermelha. Além disso, vou ver meu círculo anterior. Então, criamos com sucesso a estrutura do carregador. E agora precisamos definir essa imagem como uma Vigimage. Para isso, você precisa ir à seção de arquivos e elogiar Salvar como. E aqui você pode ver a opção de tipo de arquivo, AVG, usar pranchetas e depois elogiar salvar E depende de você qual tipo de propriedade CSS você deseja usar. Você pode usar o atributo de estilo, caso contrário, você pode usar o elemento de estilo e conhecer o processo. Eu já salvo minha imagem SVG. É por isso que eu não vou salvá-lo novamente. Vamos voltar ao codator do Visual Studio e tentar entender como podemos criar esse Finalmente, estou de volta ao meu codator do Visual Studio e já abro um documento TML chamado index Além disso, você pode ver uma imagem do AVG no meu diretório de trabalho atual chamada loader dot SVG Se eu mostrar o código SVG, você poderá vê-lo claramente. Como você pode ver, o tamanho do nosso trabalho de visualização é 200 por 200 e, como você pode ver, temos que fazer dois caminhos em nossa imagem SVG Nosso primeiro caminho é para um círculo completo e nosso segundo caminho é para a parte central desse círculo. Agora vou copiar todo o código desse arquivo. E então eu vou pular para o arquivo STL de pontos de índice. Primeiro, dentro da minha seção de corpo, vou criar um carregador de classes div Dentro dessa div, vou colar todo o código SVG, algo parecido Se eu definir esse arquivo e mostrar meu navegador, você poderá ver a imagem SVG em nosso navegador Mas parece bem grande. Precisamos reduzi-lo, também precisamos posicioná-lo no meio desta página. Então, mais uma vez, estou de volta ao coriator do Visual Studio e vou digitar a tag de estilo Estilo. No começo, vou estilizar o corpo. Em vez do Cali ResSF, vou usar a propriedade de margem Margem zero. Em seguida, vou usar a propriedade de preenchimento, preenchimento também zero E então eu vou definir uma cor de fundo. Vou usar o valor RGV. RGB dentro do parêntese, nosso valor R O valor G também é 66 e o valor B também é 66. Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver que ele cria uma cor de fundo cinza escuro, então vou reduzir o tamanho desse carregador Para isso, vou selecionar a classe Loader. Altura do carregador dentro do Cariss, 300 pixels, erva daninha, também 300 Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver que reduzimos nossa imagem com sucesso E agora precisamos alinhar essa imagem SVG, no centro desta página Dentro do seletor de corpo, primeiro, vou usar a propriedade de exibição, flexibilidade de exibição, justificar conteúdo, centro, centro de alinhamento de texto Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver o alinhamento horizontal Agora, quando atribuir uma margem para centralizá-la no meio desta página Vou usar o valor máximo da margem. Margem superior a 300 pixels. Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver que intermediamos nosso carregador com sucesso e, em seguida, vem a parte principal deste tutorial Precisamos animar esse carregador. Para isso, precisamos girar essa forma vermelha no círculo Sargumpas Vamos ver como podemos girar essa forma. Agora precisamos animar esse caminho. Primeiro, precisamos criar a tag do caminho de fechamento. Dentro dessa tag de bunda, precisamos usar outra tag, que é animate transform. Então, para digitar, animar, transformar. Como vou fechar essa tag, também precisamos usar alguns atributos básicos. Nosso primeiro atributo é o tipo de atributo. Igual a XML e também é necessário fornecer um nome de atributo igual para transformar nosso tipo de animação em tipo, igual a girar. Em seguida, precisamos fornecer o ponto inicial da animação e o ponto final da animação. Para isso, vou usar para isso, vou usar o atributo from. De igual ao nosso ângulo de rotação inicial é zero e, em seguida, precisamos fornecer o ponto central dessa rotação. Precisamos passar por Xxs e YxS. Como você sabe, nossa visualização em DVD funciona em altura e W tem 200 pixels. Para encontrar o ponto central, precisamos dividir a altura por dois. Então, se eu dividir 200 por dois, está escrito 100. Isso é para X xs e da mesma forma para Y xs é escrito 100. Este é o nosso ponto X xs e este é o ponto do nosso eixo Y. Esse é o ponto de partida dessa animação e também necessário fornecer o ponto final dessa animação. Vou usar dois valores dois, iguais a dentro do curso duplo. E primeiro, precisamos fornecer o ângulo de rotação. E eu quero completar essa rotação, então vou usar 360 graus. Além disso, precisamos fornecer o ponto central. Portanto, nosso excesso de direção é 100 e também a direção de YxS é 100 E então precisamos fornecer o tempo de duração da animação. Então, vou usar o valor der, der igual a 0,8 segundo. Além disso, vou rodar essa animação por tempo infinito. Então, vou usar o atributo de contagem repetida. Conta igual a dentro dos códigos duplos, indefinida. Se eu definir esse arquivo e depois mostrar meu navegador, aqui você pode ver na tela nosso carregador funciona com sucesso Se você quiser tornar essa rotação mais rápida, precisará diminuir o tempo de duração. Deixe-me te mostrar. Agora vou usar 0,4 segundo de duração. Se eu definir esse arquivo e mostrar meu navegador, aqui você pode ver que nossa velocidade de rotação aumentou. Espero que agora esteja claro para você como podemos criar esse carregador de SVG Obrigado por assistir a este vídeo. Fique ligado no nosso próximo exercício. 32. Turbulência de imagem e deslocamento, parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo exercício emocionante. Neste exercício, vou te ensinar como podemos criar o efeito de onda Tarvulens Se eu recarregar meu navegador, como você pode ver, após 2 segundos, ele executou a animação do efeito Tarvulence Vamos começar a prática e ver como podemos criar esse projeto. Para este exemplo, vou usar essa imagem. Como você pode ver, lado a lado, abro meu estúdio de recursos Creator e meu navegador usando a extensão lip server, e já crio um documento HTML chamado index dot TML Também crio um arquivo CSS de 40 pontos no estilo CSS. Eu já vinculo esse arquivo a esse arquivo STL. Em seguida, vou usar a tag SVG dentro da tag body, So ty SVG, depois dentro da tag SVG Por enquanto, não precisamos especificar nenhuma caixa de visualização porque criaremos esse VG para um filtro Então, aqui vou usar a tag de filtro. Filtrar. Temos um total de 17 filtros diferentes em SVG. Mas para este tutorial, vamos usar apenas dois filtros. Primeiro, vou usar Tarulns e depois vou usar um mapa com caneta deslocada Mas antes, vou atribuir um ID a esse filtro, ID igual ao ruído. Com isso, vamos passar coordenadas, posição e posição Y, X igual a dentro da cotação, 0% Da mesma forma, Y igual a dentro dos códigos, 0%. Com isso, vamos passar a largura e a altura do filtro, largura igual a 100%. Também a altura é igual a 100%. Vamos usar nosso primeiro filtro, que é o AE Tarvulens Tempo de soma FE tarbulens. Agora precisamos usar alguns atributos. Suponha que nosso primeiro atributo seja frequência base, base de empate de invocação, melhor frequência igual aos códigos da boneca, vou passar o valor total de dois, 0,02, e nosso segundo valor é Esses são dois valores diferentes. Isso afetará a forma de onda da lente da estrela. Você pode experimentar esses valores. Depende de você e nosso próximo atributo é resultado, soma de tempo, resultado. Resultado igual ao ruído. E também precisamos passar outro atributo que seja num octave, type, num octave, Além disso, vou usar um ID para esse filtro, ID igual a Travolens Então eu vou completar essa tag. Vamos usar o filtro de turbulência com uma imagem e ver como fica O software é uma tag VG. Vou criar outro mergulho. Profundo e nosso dip plus é o recipiente. Dentro desse recipiente profundo, vou inserir uma imagem. Imagem, fonte IMG e o nome da nossa imagem é, como você pode ver, OceanSunPMO OceansUnPMO Se eu definir esse arquivo, você poderá ver a imagem em nosso navegador. Isso é para uma peça SML. Vamos entrar no arquivo CSS e estilizar essa imagem. No começo, vou estilizar o body tag. Corpo, margem esquerda, zero, margem direita, zero. E também vou definir a altura desse corpo. Altura igual a cem VH. Também vou definir a posição relativa e, em seguida, vou estilizar a tag SVG Então, para selecionar SVG é a CarirassPosition, posição igual à absoluta posição Em seguida, vou estilizar nosso contêiner D. Então, vou copiar o nome do elenco e voltar para o arquivo de estilo. contêiner dentro do calibre diz: vou usar a propriedade da grade de exibição, grade de exibição Nossa próxima propriedade são as colunas do modelo de grade. Colunas do modelo G. Aqui eu vou usar a repetição de repetição um. Para o tamanho da célula da nossa grade, vou usar o valor automático. Vou usar o valor automático. Além disso, vou alinhar este item ao centro e alinhar o centro do item E também quero definir a altura desse contêiner, altura igual a 100 VH largura igual a 80% e margem zero ou dois Se eu definir esse arquivo, nada vai acontecer aqui. Então, vamos aplicar o filtro em nossa tag de imagem. O tipo Sumo IMG dentro do carro diz: Eu sou do tipo W W igual a 100% Para imagem, vou usar 100% com. Se eu definir esse arquivo, e agora você pode ver que nossa imagem é responsiva, agora vou aplicar esse filtro Starl nessa Como você pode ver, para isso, vou usar esse ID, noise. Então aqui estou: filtro de tipo, URL, ruído de hastag. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, se usarmos apenas o filtro de turbulência nesta imagem, ele desenhará um padrão diferente nesta Então, com isso, precisamos usar outro filtro, que é o mapa de deslocamento Então digite FE, mapa de deslocamento, com isso, também precisamos usar alguns atributos Nosso primeiro nome de atributo é in, igual a dentro do curso duplo, gráficos de origem, subtipo, gráfico de origem, nosso segundo nome de atributo é N dois, N dois, igual ao ruído interno do curso duplo, e nosso terceiro nome de atributo é escala Escala igual a 20. Se eu definir esse arquivo, você poderá ver o padrão da web nessa imagem. O gráfico de origem é nossa imagem e, usando ruído, podemos vinculá-lo ao filtro. Depois de combinar esses dois efeitos , está escrito esse resultado. Isso é tudo para este tutorial. Na próxima parte deste tutorial, vamos realizar animação usando JavaScript. Obrigado por assistir a este vídeo, fique ligado na próxima parte deste tutorial 33. Turbulência de imagem e deslocamento, parte 2: Olá, pessoal, é bom ver vocês de volta. Essa é a segunda parte deste tutorial. Nesta parte, vamos executar a animação usando JavaScript. Basicamente, vou usar animação GSP. Primeiro, vou vincular esse arquivo ao CDN e, em seguida, vou criar a tag Script Em primeiro lugar, precisamos selecionar o efeito de turbulência. Para isso, vou usar esse ID, turbulência. Eu quero criar uma variável t El elemento igual a document, dot, get element by ID, dentro dos parênteses, dentro de um único curso turvulens Em seguida, semiconal para finalizar essa linha. Depois disso, vou criar uma linha do tempo. Portanto, a linha do tempo TL é igual à minha linha do tempo máxima. Insira o parêntese e insira o cimsis. Precisamos definir a pausa igual ao ponto e vírgula verdadeiro para finalizar essa linha Isso significa que quando eu carrego meu navegador, ele não executará a animação. Ele executará a animação quando eu ligar, e agora precisamos apenas alterar os atributos usando JavaScript. Vou digitar a função tal dot two. Dentro do parêntese, primeiro, precisamos passar o elemento significa elemento de turbulência Então, eu devo digitar EL. Precisamos passar a duração, que é de três segundos, e depois precisamos passar o objeto, e eu quero alterar o atributo, soma ou tipo ATR, dois pontos É o contínuo, quero alterar a frequência base, o tipo de soma, a frequência base aqui. Com isso, também precisamos passar o valor da frequência base. Dentro de um único curso, zero, zero. Por fim, precisamos passar outro valor, que é atraso e após dois segundos de atraso no carregamento do navegador, ele executará a animação. Eu passo dois e ponto e vírgula para esta linha, finalmente, precisamos chamar outra função, que é a função play Som para digitar para reproduzir pontos. Então, vamos acabar com essa linha. Se eu definir esse arquivo, como você pode ver, depois de dois segundos, ele executa nossa animação. Mais uma vez, vou recarregar meu navegador. Como você pode ver, depois de dois segundos, ele executará minha animação e levará três segundos para concluir a animação porque nosso valor de duração de animação é três e nosso valor DA de animação é dois segundos. Então, em nossas duas funções, basicamente passamos um total de quatro parâmetros. Primeiro, nosso elemento selecionado, depois a duração da animação e, em seguida, precisamos passar o valor do atributo e, por fim, precisamos passar o tempo de atraso da animação. Isso é tudo para este tutorial. Agora você pode criar seu próprio efeito de turbulência com o AVG. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 34. Animação de reunião de mapa Svg: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com o novo projeto de animação SBG. E neste projeto, vamos criar um efeito de animação de reunião do mapa do seu país Deixe-me recarregar o navegador para demonstração. Depois de recarregar meu navegador, você pode ver como cada um dos estados do país retornou à sua própria posição Como você pode ver, isso cria um lindo efeito de reunião. Eu fiz esse projeto no aniversário de 50 anos de Gandhi. Além disso, se eu passar meus carros neste mapa, também podemos preenchê-lo com tricolor Este projeto levará muito tempo. Vou te mostrar a parte deste projeto sobre como concluí-lo. Primeiro de tudo, você precisa baixar o mapa SVG do seu país Eu sou da Índia, então eu baixei o Indian Map e lancei este site mapwgi.com Aqui você pode ver cada estado da Índia marcado separadamente e também pode ver o nome dos estados ao se Vou baixar este mapa para este projeto. Então, vamos começar a prática e ver como podemos criar esse projeto. Como você pode ver, estou no meu navegador e vou clicar com o botão direito nele. Depois de selecionar a seção de elementos no meu ozônio, vou usar meu cursor em todos os estados deste país e selecionar um dos estados, e vou selecionar esse pequeno estado e vou selecionar esse pequeno Depois de selecionar esse estado, como você pode ver na minha seção de elementos, esse caminho já tem um título, Misoam Além disso, tem um ID, NI N. Portanto, esse ID é muito importante. Usando esse ID, você pode executar uma animação nele. Então eu copio esse ID. E como você pode ver, abro todo esse arquivo C no editor de código do Visual Studio. E como você pode ver, todos os estados deste país foram criados pela PutTag E agora vou encontrar o mesmo estado de Mzurum usando seu ID Então eu pressiono Control AF, e aqui vou colar o nome do ID. E aqui está. Então, primeiro, precisamos criar a animação em movimento para esse estado. Então, primeiro, vou adicionar uma tag put de fechamento e, dentro dessa tag Pt, vou usar a tag VG, que é animate transform Para animação em movimento, essa tag é muito importante. Além disso, vou atribuir um ID a essa tag. ID igual a essa tag é misoram, então vou digitar MZ e, em seguida, precisamos passar o nome do atributo, nome do atributo, igual a, e nosso nome de atributo E então precisamos passar o atributo tipo de atributo igual a XL. E agora precisamos passar o tipo de animação. Digite igual para traduzir e, em seguida, precisamos passar o valor da duração da animação, Dur igual a quatro segundos, e agora precisamos passar o local exato de onde precisamos iniciar a animação, e eu quero começar essa animação desse lugar Dentro dos valores, vou passar X xs e YX é 50 40, esse é o ponto de partida e a partir do ponto, vou passar 00 e também precisamos passar outro atributo para essa animação, que é vaca repetida Então aqui estou um t, repita a contagem igual a um. Quero executar essa animação apenas uma vez. Se eu disser esse arquivo e voltar ao meu navegador e recarregar esse navegador, como você pode ver, ele funcionou perfeitamente Aqui você pode ver como esse estado retornando ao seu próprio lugar. Usando essa animação e o valor, você pode criar o efeito de reunificação do seu país E se você quiser mudar a cor do seu estado, ao passar por ele, para isso, você precisa usar algumas propriedades. Nosso primeiro nome de propriedade está em Mouse. E aqui, eu vou passar por um véu colorido. Vou digitar esse estilo de ponto, a sensação de ponto é igual a, e o nome da nossa cor é cinza. Quando coloco meu cursor sobre ele, ele retorna a cor cinza. Com isso, quero adicionar um efeito de mouse out. Aqui vou digitar com o mouse, igual a esse estilo de ponto, sensação de ponto igual à cor verde. Com isso, quero adicionar uma cor de traço nela. Então, aqui vou digitar esse estilo de ponto, traçado, igual ao vermelho. Vamos configurar o arquivo e voltar para o navegador. Aqui você pode ver que nossa animação funciona perfeitamente. E se eu estiver no meu carro nesse estado, ele retornará a cor cinza. E se eu sair dela, como você pode ver, ela se transforma em verde e também adiciona uma cor de traço, que é vermelha. Então, espero que agora seja excelente para você como eu crio todo esse projeto Um por um, você precisa criar o efeito de animação para cada estado. Se você é dos Estados Unidos , precisa fazer a mesma coisa por 50 vezes. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo exercício 35. O que são filtros SVG: Olá, pessoal. É bom ver você de volta. Novamente, estou de volta com um novo tutorial relacionado ao WiGi. Neste tutorial, vamos aprender filtros VG A maioria dos efeitos avançados de animação SVG são feitos com filtros Além disso, podemos criar efeitos de imagem com isso. Neste tutorial, vamos explorar os conceitos básicos dos filtros VG Primeiramente, aprenderemos o que são filtros AVG e como eles são diferentes dos filtros CSS Em seguida, usamos o elemento de filtro e aprendemos sobre os primitivos de filtro Com isso, vou mostrar uma demonstração de como podemos usá-lo de forma prática. O que exatamente são filtros SVG? Antes de iniciarmos os filtros SVG, precisamos entender os filtros CSS Como você deve saber em CSS, temos certas funções e podemos usá-las para desfoque, sombra projetada, operação de cores, etc Além disso, podemos controlar o brilho da saturação de matiz usando filtros CSS Esses filtros são aplicados principalmente em imagens. Todos esses são filtros CSS e, para usar esses filtros, precisamos trabalhar com a função de filtro. Mas os filtros CSS são bastante limitados. Nós os usamos principalmente em imagens, e a funcionalidade também é bem básica. Se você quiser mais funcionalidades, caso contrário, funcionalidades complexas, precisamos usar filtros SVG E aqui está a parte interessante. Os filtros CSS são um subconjunto dos filtros SVG. Os filtros CSS são muito mais fáceis de usar e vêm com funcionalidades simples. Por exemplo, em CSS, podemos desfocar imagens, mas o desfoque é uniforme. mesma quantidade de desfoque é em todas as direções, mas em SVG, podemos fazer o mesmo desfoque com os diferentes valores Xxs e YxS Também podemos controlar as bordas do desfoque da imagem. Você pode pensar que os filtros SVG funcionam apenas com o elemento SVG. Isso não é verdade. Podemos aplicá-lo a qualquer elemento SML. Para criar isso, precisamos começar com o elemento de filtro. Além disso, precisamos usar algumas funções especiais chamadas primitivas de filtro Para começar, você precisa começar com a tag SVG e, em seguida, adicionar elemento de filtro dentro da tag SVG, e não se esqueça de adicionar um ID a essa tag de filtro porque esse ID funciona como uma referência desse filtro e, dentro desse elemento de filtro, precisamos adicionar primitivos Todos esses são primitivos de filtro SVG. Que podemos usar dentro da tag de filtro. Finalmente, precisamos aplicar os filtros enquanto queremos aplicá-los. Suponha que eu queira aplicar esse filtro em uma tag de imagem. Nesse caso, precisamos digitar o nome do atributo filter, igual a dentro do sistema operacional, precisamos digitar URL e, dentro da tela redonda precisamos vincular o filtro ao ID, e há muitas primitivas que você pode usar em seu filtro E se você notar, você pode ver um prefixo ou Obin. Esse prefixo significa efeito de filtro. Essas primitivas nos permitem criar efeitos simples, como desfoque, sombra projetada, relâmpago, etc., e também podem fornecer efeitos de graduação de protoshok, modo de flexão, composição, mapa modo de flexão, composição, No próximo tutorial, começaremos a prática. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado. 36. Implementação do filtro SVG: Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server. Eu já criei uma página HTML chamada index dot HTML. E dentro dessa tag de corpo, declaramos uma tag SVG com 750 e altura E também a área da caixa de visualização é S. Em seguida, precisamos criar um elemento de filtro. Então, dentro da tag SVG, vou digitar filter Além disso, precisamos atribuir um ID a esse elemento ID igual a D. Dentro desse elemento de filtro, vamos adicionar um filtro de impressão. Mas, primeiro, vamos criar outro elemento onde vou aplicar esse filtro, e o nome do nosso elemento é imagem. Aqui vou digitar a imagem. Aqui eu vou usar um atributo excede. Link NO HREF. Igualmente para inserir o curso duplo, precisamos fornecer o caminho da imagem Você pode ver no meu diretório de trabalho atual, há uma imagem JPG de 01 ponto. Vou vincular essa imagem. Aqui eu vou digitar 01 ponto JPG. Se eu definir esse arquivo, você pode ver no meu navegador que vinculará nossa imagem com sucesso. Se você quiser definir dentro da altura, sim, você pode. Só para digitar. Peso, 100%. Também a altura. Alto, 100%. Além disso, se você quiser especificar a posição inicial, sim, você pode. Para isso, basta passar Xs e YxS X zero. Também YxS zero. Se eu definir esse arquivo, você poderá ver o ritmo. Basicamente, a resolução da minha imagem corresponde a essa dimensão. É por isso que esses atributos não afetarão tanto. Depois, volte ao tópico principal e crie o filtro. Como você pode ver, agora é um filtro de banda, mas eu quero aplicar esse filtro nesta imagem. Para isso, precisamos usar um atributo e nosso nome de atributo é filtro. Filtro igual a está no curso duplo. Precisamos digitar URL. URL está redondo, agora precisamos vincular essa imagem a esse filtro com a ajuda do ID Aqui vou digitar Hastag Demo. Se eu definir esse arquivo, como você pode ver, ele ficará completamente em branco. Agora você não pode ver a imagem porque o filtro foi aplicado. Além disso, o filtro é preto. Vamos adicionar alguns primitivos. Primeiro, quero aplicar uma cor excessiva nessa imagem e, em seguida, vamos fazer um modo de mesclagem A primeira primitiva que vou usar para cores sólidas, que é o AI flirt, esta Então, aqui, vou flertar do tipo A. E para primitivos, você precisa usar tags de fechamento automático. Se eu definir esse arquivo, por padrão, retornará a cor preta e agora vou adicionar uma terceira cor. Ou isso, e eu preciso passar um atributo, flood hífen color Igual a dentro do curso duplo, vou passar por um hexa VH Dag duplo zero S duplo zero. Se eu definir esse arquivo, você poderá ver o resultado. Está escrito na cor verde. Se você quiser controlar a opacidade, sim, você pode. Para isso, você precisa usar outro atributo e o nome do atributo é flood Opacity Opacidade do hífen de inundação. Igual a, para 100% de opacidade, precisamos passar por um Se eu definir esse arquivo, você poderá ver 100% de opacidade. Em seguida, precisamos usar outra tag, que é o resultado. Então, resultado do tipo hemo. Resultado. É o curso duplo, eu vou passar pela inundação Essa primitiva pode ser combinada outras primitivas e, para combinar com outra primitiva, podemos usar o atributo result como ID Podemos usar o ID para outra primitiva para combinar as duas primitivas Em seguida, quero adicionar outra primitiva para o modo de mesclagem. Para isso, vamos usar esse filtro primitivo de mistura FE para combinar imagens Aqui vou digitar FE blend. Agora, aqui, neste caso específico, precisamos passar duas fontes. Nosso primeiro atributo é E igual ao gráfico de origem entre aspas duplas. Graph Source guppix basicamente significa a imagem aqui. Se eu definir esse arquivo, você poderá ver o resultado. Depois de digitar a fonte Guppy, podemos ver nossa imagem novamente Agora eu quero marcar essa fonte Guppy com essa inundação primitiva. Aqui, precisamos passar outra fonte Guppy. Vou digitar em igual a dentro dos códigos duplos, flood Então, vinculamos nossa segunda fonte Grape a esse resultado. Em seguida, precisamos passar pelo modo de mesclagem. Aqui, vou passar para o modo, igual a dentro dos códigos duplos, queima de cores. Se eu definir esse arquivo, você poderá ver o resultado. Ei, não está funcionando. Vamos usar uma cor diferente e depois aplicá-la. Vou passar uma cor diferente. É uma cor azul. Se eu definir esse arquivo, como você pode ver, agora está funcionando. Ele dobra a cor com a imagem. É assim que podemos usar filtros SVC. Este é o primeiro exemplo de filtro VC. No próximo tutorial, darei outro exemplo de filtro VC 37. Filtro SVG feColorMatrix: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a primitivos Em nosso tutorial anterior, já aprendemos sobre como podemos usar o primitivo com ajustadores VG E neste tutorial, vamos aprender essa primitiva, a matriz de cores A. Essa primitiva é usada especialmente para filtrar a transformação de cores Este filtro da matriz Apple, transformação para alterar a cor do pixel de entrada. Você pode usá-lo para manipulação de cores como conversão de tons de cinza, mudança de cor, mudança de cor E em nosso exemplo prático, vou mostrar como podemos converter uma imagem colorida em uma imagem em tons de cinza Então, vamos estudar de forma prática. Então, como você pode ver, lado a lado, abro meu editor de código do Wizz Studio e meu navegador usando a extensão de servidor Light, e já crio um documento ML chamado index two dot TML Em nosso tutorial anterior, já aprendemos sobre como podemos usar filtros SVG Então, primeiro, como você sabe, precisamos atribuir um ID ao nosso filtro. Então, vou atribuir o mesmo nome de ID, matriz de cores AI. Então eu copio isso e vou colar aqui. Em seguida, precisamos aplicar esse filtro em nossa imagem. Então, aqui vou passar a tag e nossa matriz de cores AI do nome de ID. Se eu definir esse arquivo, como você sabe, ele retornará em branco. Como nosso filtro está em branco, por isso que ele retornou em branco. Como eu disse, vou usar esse filtro para conversão de escala de cinza. Então, vou chamar esse filtro de matriz de cores AI e vou fechar essa tag. Inicialmente, dentro da matriz de cores, vou usar o atributo de tipo Type igual a, e dentro dos códigos Dule, vou passar saturate após definir este arquivo, você pode ver o resultado, mas não passamos nenhum Podemos controlar a saturação de cores dessa imagem usando esse filtro Então, para isso, precisamos passar os valores. Então, eu tenho um valor de tipo igual ao dos códigos duplos. Primeiro, vou passar 0,9. Depois de definir esse arquivo, como você pode ver, há pequenas alterações. Você não pode identificar as alterações porque aqui você precisa passar um valor entre 0,92 0,1 Então, se eu passar 0,1 e definir esse arquivo, como você pode ver, ele quase dessaturará nossa imagem, mas não dessaturará completamente Se eu passar 0,0 e depois definir esse arquivo, agora você pode ver, agora ele dessatura completamente a imagem Aqui você precisa passar um valor entre 0,021. Se eu passar um, e esse arquivo, agora você pode ver que nossa imagem está completamente saturada. Você pode ver todas as cores. Mas se eu passar 0,5 e isso subir nesse arquivo, agora esse filtro reduz a saturação das cores no elemento Vigi, e reduz 50% da cor porque aqui passamos Além disso, podemos aplicar o mesmo filtro nos elementos do AVG Então, aqui vou criar um elemento de reação. E primeiro, vou atribuir com igual a cem. Além disso, vou atribuir altura, altura igual a 100. Em seguida, vou atribuir a cor. Eu quero preencher com a cor azul. Então, aqui vou digitar o atributo de estilo. Estilo para aplicar a cor, como você sabe, precisamos usar probabilidade de campo. Preencha azul. Em seguida, vou aplicar o filtro. Para aplicar o filtro, como você sabe, usamos precisamos usar o atributo filter. Filtro, dois pontos e precisamos passar o URL. Em seguida, você define a tag de URL. Primeiro, precisamos passar a hashtag, depois precisamos aplicar o filtro Mas antes de aplicar esse filtro, vamos definir a multa. Para configurar esse arquivo, aqui você pode ver o resultado. Aqui, criamos um elemento de reação com a cor azul. E agora vou aplicar esse filtro, matriz de cores AE. Então eu copio esse ID do filtro vou passá-lo aqui. Depois de configurar esse arquivo, como você pode ver, ele reduziu o valor da cor azul em 50% E se eu passar um, apenas um e depois definir esse arquivo, você poderá ver o resultado. E se você fizer com que fique completamente dessaturado, basta passar zero Agora, ele faz com que fique completamente dessaturado. Agora, não há cor nessa imagem, também nesse elemento de reação. Então é assim que podemos usá-lo. Agora, deixe-me mostrar outro exemplo. Outro uso desse filtro. Então, já aprendemos como podemos usar esse filtro para fins de saturação E agora vou usar o mesmo filtro para cores personalizadas. Então, novamente, vou digitar a tag de filtro. Além disso, vou atribuir um ID e, desta vez, nosso nome de ID é de cor personalizada. Então eu vou fechar essa tag. Então, dentro desse filtro, vou usar a matriz de cores FE primitiva Uma matriz de cores primitiva. Ele digita uma matriz de cores. Não preciso dessa tag de fechamento porque preciso dessa tag única. E então aqui eu vou passar um atributo, e o nome do nosso atributo é tipo. Basicamente, podemos simplesmente copiar essa primitiva e eu vou substituí-la aqui Então eu vou mudar o tipo. Aqui eu vou passar um tipo chamado matriz. Desta vez, usamos essa primitiva com o tipo de matriz e agora precisamos passar os valores Mas desta vez, o atributo value contém uma matriz de quatro por cinco que define a transformação da cor. Basicamente, você quer dizer que aqui precisamos passar o total de quatro linhas e precisamos passar para cinco valores em cada linha. Cada linha da matriz corresponde a um dos canais de cor de saída. Nossa primeira fila representará a cor vermelha. Nossa segunda fila representará a cor verde, nossa terceira linha representará a cor azul e nossa quarta linha representará Alpha. Então, sem confundir você, deixe-me passar algum valor Então, na nossa primeira linha, vou passar esse valor, 0,5. Então eu vou passar de zero. Nosso próximo valor é zero, espaço, zero e zero. Se você notar, você pode ver em nossa linha, aqui passamos o valor total de cinco. Essa primeira linha representa o canal vermelho, canal cor vermelha, e aqui passamos 50% da cor vermelha. Então, na segunda linha, aqui eu vou passar o canal de cor verde, e eu quero aplicar 100% de cor verde. Então, primeiro, vou passar zero, depois vou passar um, espaço, zero, espaço, zero, espaço Z. Como eu disse, cada linha conterá cinco valores diferentes Nossa segunda linha representa o canal verde, canal 100% verde, mas nossa primeira linha representa 50% do canal vermelho. Então, na nossa terceira fila, eu vou passar o valor do canal azul. Então, para passar espaço zero, zero, espaço um, espaço zero e zero. Em seguida, precisamos passar o valor Alpha. Para o valor Alpha, vou passar espaço zero, zero, espaço, zero, espaço um, espaço, zero. Como eu disse, nossa última linha significa Opacidade, Alpha Valu significa Opacidade, Alpha E agora vou configurar esse arquivo e aplicar o mesmo filtro a essa imagem. Então, vou duplicar essa imagem e comentar a linha anterior E desta vez, vou copiar esse ID do filtro e substituí-lo por esse filtro. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele adiciona uma nova camada de filtro a essa imagem. E se você aumentar ou diminuir o valor de qualquer canal, deixe-me mostrar. Suponha que eu queira aumentar o valor do canal vermelho. Eu quero fazer nove, depois de definir este arquivo, você pode ver o resultado diferente. Então foi assim que foi processado. Por enquanto, vou usar 50% do canal vermelho. Da mesma forma, você pode alterar o valor do canal verde. Suponha que aqui eu passe 0,5 e descanse este arquivo, agora você pode ver um efeito diferente. Basicamente, se você quiser se tornar um especialista nisso, deve ter conhecimento básico de edição de fotos. Além disso, você deve ter conhecimento de Subta, como o Photoso. Então você pode entender esse valor muito bem. Então é assim que podemos usar essa primitiva. Espero que agora esteja claro para você. No próximo tutorial, aprenderemos os demais. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 38. FeComponentTransfer: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outro tutorial. Relacionado está o WiGiFilter e, neste tutorial, bom aprender esse filtro, a transferência de componentes de IA Esse elemento filtrante implementa manipulação de cores em cada canal colorido separadamente Como você sabe, temos três canais de cores, vermelho, verde e azul. Com isso, também temos outro canal chamado Alpha. Como você sabe, podemos controlar transparência usando esse canal de cores. Os quatro canais de cores nesses elementos são FI funk RFI funk G, FFunkV e FI, funk A. Então, para usar esse filtro, precisamos usar esse canal de cores dentro desse filtro precisamos E ao realizar a manipulação de cores, os elementos devem ter apenas um elemento filho de cada tipo, e temos apenas um atributo que está dentro e é usado para armazenar a entrada para a primitiva fornecida E em nossos elementos, podemos totalizar apenas quatro tipos de tabela discreta Gamma linear Então, sem perder seu tempo, vamos começar a prática e ver como podemos usar esses filtros Como você pode ver, lado a lado, abri meu editor de código do estúdio de resultados e meu navegador usando a extensão light de servidor e já criei um documento de estimativa chamado tabela de índice. Então, nessa tag TML, temos uma tag SVG, e aqui definimos com a altura e também dissemos a caixa de visualização Por enquanto, é um filtro vazio, mas configuramos uma demonstração de ID. Também dentro dessa tag SVG, vinculamos uma imagem e você pode ver a imagem no meu navegador Agora vou criar esse filtro. Então, dentro dessa tag de filtro, vou usar essa primitiva, que é uma transferência de componente Então, primeiro, dentro desse privitivo, vou usar o elemento Alpha Então HemotipeFV SNC AF Alpha. Então eu vou fechar essa tag. Primeiro, vou usar primeiro, dentro desse elemento, vou usar o atributo de tipo, T Tip igual aos códigos de duelo, e vou digitar a tabela Como eu te disse, temos que dizer por tipo. Então, primeiro, vou usar o tipo de tabela. Em seguida, precisamos usar outro atributo que é o valor da tabela. Igual a está nos códigos tobon. Aqui precisamos passar os valores. Para o valor Alpha, vou passar espaço zero, espaço zero um, espaço um. E então eu vou criar outro canal, que é o canal u. Então, vou começar esta seção e vou substituir A por B e o Hemótipo zero, um, depois vou passar zero, Em seguida, vou aplicar o canal de cor verde. Então, novamente, vou ser essa linha e substituir B por G, e vou mudar os valores. Primeiro, vou digitar um, espaço um, zero, zero e, por fim, vou aplicar o canal de cor vermelha. Então, vou substituir por R e alterar os valores. Primeiro, vou digitar zero espaço zero, espaço um, espaço zero. Vou configurar esse arquivo. E agora vou aplicar esse filtro nessa imagem. E para isso, como você sabe, ele gosta de digitar URL. Então você ajusta as prensas redondas, eu vou usar IDs. Alguém usa esse ID, então eu quero passar o sinal hastex, e então vou passar o nome de identificação dim Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele aplica o canal de cores modificado nesta imagem. Esse tipo de mapeamento pode ser útil para transformação de cores personalizadas ou efeitos no Vrapis. Você pode usar esse valor para perseguir os canais Então, isso é tudo para este tutorial. Espero que agora esteja claro para você. No próximo tutorial, aprenderemos outra primitiva. Então, obrigado por assistir este vídeo de forma estável. 39. Filtro SVG feComposite: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial e, neste tutorial, vamos aprender outra primitiva de filtro SVG Vamos nos concentrar no AI Composite. Agora a questão é: o que é Fi composite? Um composto é usado para combinar várias imagens ou elementos gráficos Ele permite que você especifique como diferentes imagens ou elementos de origem devem ser compostos para produzir um resultado final O elemento composto AI é normalmente usado nos filtros do AVG para aplicar efeitos complexos de processamento de imagem Por exemplo, você pode usar o AI Composite para realizar operações como combinar duas imagens usando operadores aritméticos como adicionar substrato É uma ferramenta muito poderosa para criar efeitos visuais avançados no AVG E vem com alguns operadores, como over in, atop, out, ZO lighter ou aritmética Agora, antes de começar a prática, quero mostrar alguns exemplos. Como você pode ver, abro o software Adobe Illustrator e, neste software, crio aqui dois elementos Primeiro, criarei um elemento circular e, acima do elemento circular, criarei um elemento estrela. Agora vou realizar alguma operação usando o Pathfinder. Algumas operações do Pathfinder são muito semelhantes às do AI composite Então, vou selecionar o elemento e, no localizador de caminhos, vou selecionar essa opção sem voltar Até selecionar menos para trás, você pode ver o resultado. Em seguida, vou selecionar outra opção, que é selecionar cortar, você pode ver o resultado. Esse tipo de operação, podemos fazer usando alguns compostos Além disso, podemos realizar esta operação e esta operação e esta menos fonte Vamos começar a prática e ver como podemos usá-la. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão light server. Eu já criei um filtro SVG e atribuímos um ID a esse filtro como filtro composto E antes de criar o filtro SVG, primeiro definimos a imagem SVG, e ela define com 400 pixels e altura 400 pixels Então, dentro desse estágio de profundidade, criamos o filtro, filtro composto Em seguida, usamos a tag de imagem AV para carregar a imagem. Ele usa duas etiquetas de imagem AV. O primeiro é para a imagem de fundo. A forma do círculo é nossa imagem de fundo e a forma da estrela é nossa imagem de primeiro plano e também as armazenamos como resultado de fundo e resultado de primeiro Em seguida, usamos a primitiva composta de IA, mas não usamos nenhum valor de operador No AI Composite, aqui precisamos usar o total de três atributos, o atributo do operador, o atributo in e o atributo verdadeiro No atributo, Hen precisa passar a primeira fonte da imagem e no atributo, ela precisa passar a segunda fonte da imagem. Por fim, aplicamos esse filtro a um elemento de imagem que exibe a imagem de fundo. Você já sabe disso, como podemos aplicar filtro em nossa imagem. Agora vou aplicar todos os operadores um por um. No início, vou me inscrever como operadora. Esse é o operador padrão. Após a etapa deste arquivo, como você pode ver, não há alterações, então vou usar no operador. Depois de definir esse arquivo, você pode ver as alterações. A parte desse gráfico de origem que é definida pelo atributo in que se sobrepõe ao gráfico de destino, que é definido pelo atributo into, e no operador substitui o gráfico de destino Agora vou usar outro operador, que está fora de uso. Depois de configurar esse arquivo, você pode ver o resultado. As partes do gráfico de origem definidas pelo atributo in que estão fora do gráfico de destino definidas no atributo into Basicamente, solte a área do círculo da estrela e, em seguida, vou usar outro valor, que é o topo. Depois de definir esse arquivo, você pode ver o resultado e os efeitos. Em seguida, vou usar outro valor ZR. Depois de definir esse arquivo, você pode ver o resultado. Essas operações são bem parecidas com o Adobe Illustrator É por isso que eu começo este tutorial com o Ado V Illustrator para dar uma ideia do tipo de operação que vamos realizar Nosso próximo valor é mais leve. Vou substituir o ZR por er. Depois de definir esse arquivo, você pode ver o resultado. Agora temos um operador restante, que é o operador aritmético, e ele vem com um total de quatro valores, K, K dois, K três e K Aqui, vou usar a aritmética. Em seguida, precisamos passar os quatro valores. Primeiro, vou passar K. K igual a dentro do código duplo, vou passar 0,1 Então eu vou passar K, K igual a 0,2. Então eu vou passar, K três é igual a 0,3. E por último, vou passar K. K quatro igual a 0,4. Até configurar esse arquivo, você pode ver o resultado. Isso é o que podemos fazer usando se você compõe primitivo. Espero que agora esteja claro para você como podemos usar esse. Então, obrigado por assistir a este vídeo. Fique ligado no próximo primitivo. 40. Filtro SVG feConvolveMatrix: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outro tutorial relacionado às primitivas do filtro SVG E neste tutorial, vamos aprender a matriz convolva de IA matriz convolva AE é uma primitiva de filtro SVG que permite realizar uma operação de convolução A dois D em uma Essa operação envolve combinar cada pixel na imagem com seus NIORs circundantes usando uma matriz carnal para produzir um E se eu falar sobre seus atributos, seu atributo gaialten Em qual matriz de kernel, divisor, polarização, alvo alvo Y, modo H, alfa preservado, comprimento da unidade do kernel, Agora vamos falar sobre a sintaxe. Uma matriz convolva, e esses são os atributos que precisamos usar nessa Não precisamos usar todo o atributo de uma só vez. De acordo com nossas necessidades, podemos usar esses atributos. Se eu falar sobre esses atributos, nosso primeiro atributo está em sua entrada de armazenamento para a primitiva dada Nosso segundo atributo é a ordem. Ele testa o tamanho da matriz a ser usada pelo elemento filtrante. Por padrão, é três por três. Então vem a matriz de erneel. Ele definiu a lista de números que formam a matriz do Kernel O kernel é um filtro simples de detecção de bordas, conhecido como Svaloperator para detectar Nosso próximo atributo é divisor. É definida a soma dos valores da matriz do kernel. Por padrão, ele é definido como um. Nosso próximo atributo é preconceito. Eu defino o alcance do filtro. Por padrão, está definido como zero. Então temos o alvo X e o alvo Y. Agora vamos começar a prática Primeiro, vou aplicar esse atributo Kernel matrix. Vamos entrar no código do Visual Studio. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor ativo e já crio um documento HTML chamado index dot HTML Então, em nossa etiqueta corporal, temos uma etiqueta de peruca, e aqui dizemos com 100% e altura e altura 400 E então temos Diptag dentro dessa tag dip, vamos criar o filtro Mas antes de criar o filtro, vamos explicar o que fizemos aqui. Primeiro, usamos uma tag react. Então, como você pode ver nesta tag de reação, definimos com 500 e altura 300 e aqui dizemos cor do traço, e também dizemos cor de preenchimento verde escuro. E então usamos o elemento de grupo. E nesse elemento de grupo, colocamos o texto, hello world. E aqui eu disse, tamanho do formulário 34 pixels e família de fontes Vardana E como você pode ver, cor do nosso texto é branca. Aqui, usamos um valor hexa. Agora vamos criar o filtro e tentar ver o que ele retornará fisicamente. Então você disse essa tag profunda, vou digitar tag de filtro. Em seguida, vou definir um ID para esse filtro, ID igual a convolve Então, dentro da etiqueta do filtro, vou usar a primitiva, que é a matriz convolva FE Então, experimente a matriz convolva FE. Acho que cometi algum erro de ortografia. É AI, deveria ser AV e não FR. Em seguida, feche essa tag. Então, dentro disso, se você confirmar a matriz, vou usar um atributo que é matriz carnal igual e tem que passar valores, alguns valores carnais E por padrão, como eu disse, nossa matriz carnal terá 33 valores de grade, 33 valores de estrutura de grade Deixe-me mostrar como, em nossa primeira fila, vou passar um espaço cinco, espaço menos um Então, na nossa segunda fila, vou passar menos um espaço zero, espaço quatro Então, na nossa terceira fila, vou passar por zero, espaço zero e menos um A primeira linha da matriz cardinal é 15 menos um. Esse valor correspondeu aos pesos usados para a primeira linha de pixels na operação de convolução O valor da segunda linha é menos um, zero e quatro. Esses são os pesos do pixel da segunda linha. Basicamente, vamos realizar algumas manipulações de pixels usando essa primitiva Este é um nível muito avançado, primitivo, mesmo que eu não tenha conhecimento adequado sobre ele e a terceira linha representa o peso da terceira linha de E agora vou aplicar esse filtro na minha tag de reação e no texto. Aqui, vou usar o atributo filter. Filtro igual ao de dentro dos códigos duplos, vou passar a URL, URL e, dentro das teclas redondas, hashtag, vou passar esse ID Além disso, vou chamar o mesmo filtro no meu texto. Então, vou copiar a seção de filtro e na minha tag de texto, depois do valor Y, depois do atributo Y, vou colar esse filtro. Vou chamar esse filtro. Se eu definir esse arquivo, você poderá ver o resultado. Agora, se você olhar com cuidado no meu texto, como você pode ver, isso reduz a nitidez desses Parece que nosso texto está tremendo. Também tem efeito na minha forma de retângulo. Ficaria mais claro se eu reduzisse o tamanho da fonte. Se eu fizer dez pixels e depois servir esse arquivo, você poderá ver o resultado. Agora você pode ver que agora você pode ver que ele destruiu o pixel desse texto. Isso é o que podemos fazer com esse filtro. Agora, vamos adicionar uma imagem e tentar aplicar esse filtro a essa imagem. Depois da tag de grupo, vou colar o código-fonte da imagem. Eu já copiei o código do nosso tutorial anterior. Em seguida, vou remover esse ID de URL. Vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Essa é a nossa imagem. Agora, se eu aplicar esse filtro a essa imagem , copiarei esse ID do filtro, e aqui vou usar o Haztexine, colar o código e colar o nome do ID Após a etapa deste arquivo, se você notar , isso afeta um pouco nossa imagem. Vamos brincar com os valores. Vou mudar os valores, a matriz do Kernel. Primeiro, vou passar na nossa primeira fila menos sete. Nosso próximo valor é menos, vou fazer com que seja menos dez, e o terceiro valor é, vou fazer com que seja Então, na nossa segunda fila, vou começar com menos dez Então, nosso próximo valor também é dez. Então, o valor da nossa terceira coluna é menos um. Para a terceira coluna, vou continuar o mesmo. Após a etapa deste arquivo, vamos ver o que ele retornará. Após a etapa deste arquivo, agora está mais claro para você. Depois de alterar o valor, agora você pode vê-lo borrar um pouco nossa imagem Cada valor na matriz do Kernel afeta a forma como a operação de convulsão combina os valores dos pixels de entrada para produzir os valores dos pixels de saída Se eu passar valores positivos, isso aumentará os valores negativos das características enquanto os valores negativos podem superá-los. O pixel central da matriz carnal basicamente se multiplica com os pixels ao redor e cria um novo pixel e , em seguida, retorna o Lembre-se de que a matriz convolva do filtro SVG I pode ser bastante poderosa, mas pode ser necessária alguma experiência para alcançar o efeito desejado Isso é tudo para este tutorial. Espero poder lhe dar uma pequena introdução de como podemos usar o filtro de matriz AI Convol Obrigado por assistir a este vídeo, fique ligado no próximo tutorial 41. Filtro SVG feDiffuseLighting: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao filtro VG E neste tutorial, vamos aprender essa iluminação primitiva, A difusa filtro de iluminação difusa primitivo gosta de uma imagem usando o canal Alpha como um mapa Usando iluminação difusa, o lado do objeto voltado para a luz fica mais claro e a visão voltada para o fica mais escura e E com a iluminação difusa, aprenderemos outras três primitivas: luz de distância I, luz pontual e luz de holofote E também precisamos de um composto primitivo. Juntos, usando essa privacidade, podemos criar diferentes efeitos de luz, distância, luz pontual, holofote, etc. Agora vamos falar sobre alguns atributos. Esses são os atributos que precisamos com iluminação difusa em escala de superfície, constante difusa, comprimento do kernel, comprimento da unidade do kernel, unidade do kernel O atributo in identifica entrada para a primitiva de filtro fornecida Nosso próximo atributo é a escala da superfície. Eu represento a altura da superfície. Seu valor é multiplicado pelo valor Alpha. O valor padrão é um. O próximo atributo é conteúdo difuso. É um número não negativo, cujo valor padrão é um, e então temos o comprimento da unidade Kernel Ele indica a distância pretendida entre colunas sucessivas Vamos começar a prática e ver como podemos aplicá-la. Como você pode ver, lado a lado, abro meu editor de código de estúdio e meu navegador usando LipseRetension e já crio um documento HTML abro meu editor de código de estúdio e meu navegador usando LipseRetension e já crio um documento HTML chamado index dot tamal. Então, em nossa tag body, temos uma tag VG, e nessa tag VG, primeiro, configuramos uma tela, e nossa tela varia de 440 pixels e a altura é de 140 pixels Então eu crio um círculo e a cor do nosso círculo é verde, e eu não digito nenhuma luz porque nesse círculo, eu não vou aplicar nenhuma luz. Então eu crio outro círculo. Este é o círculo onde vou aplicar a iluminação. Então eu crio um filtro e defino um ID, acendo um para mim. Por enquanto, meu filtro está vazio e, aí, vou aplicar luz pontual de IA. Então, precisamos usar essa luz primitiva, pontual I, com iluminação difusa de IA Inicialmente, dentro dessa etiqueta de filtro, vou criar uma iluminação difusa primitiva difuso do SamotiEfe era a iluminação, e então vou Aqui vou digitar o mesmo que dentro dos códigos duplos. Como eu disse, isso na entrada identifica a entrada para a primitiva de filtro fornecida Vou identificá-lo como um gráfico de origem. Então, nosso próximo atributo é resultado. Resultado igual a dentro dos códigos duplos, vou usar luz. Em terceiro lugar, precisamos passar outro atributo chamado cor de iluminação. Cor da iluminação. Cor de iluminação igual ao branco. Ou eu vou configurar esse arquivo. Então, dentro dessa primitiva, precisamos usar outra primitiva, que é AE, primitiva de luz pontual Vou usar essa luz HemoTypePoint primitiva. Desculpe, não precisamos desse horário de encerramento. E então precisamos passar algum atributo. Primeiro, precisamos passar XX como valor. X igual a 150. Então, precisamos passar YX como valor. Y igual a 60. Isso vai definir a fonte de luz pontual. Além disso, precisamos passar Z é. Ele tipo Z é igual a 20. E agora precisamos usar o AE Composite Primitive. Isso combinará o gráfico original com o efeito de iluminação. Deixe-me te mostrar como. Então, aqui, vou digitar SE composite. Novamente, não precisamos dessa espiga de fechamento. Em seguida, precisamos passar alguns atributos. Então, aqui, eu vou passar algum atributo. Nosso primeiro atributo está no atributo. É igual a aqui que vou passar o gráfico de origem. O gráfico de origem é nosso gráfico original, então vou copiar o gráfico de origem. Então precisamos passar outro atributo que é chamado, que é N dois. É igual a, aqui precisamos passar novamente o gráfico de origem que é leve Então, precisamos passar operador, operador e vamos usar operadores aritméticos Operador igual à aritmética. E agora precisamos passar o valor K, K, K três e Kour para garantir que os gráficos originais sejam combinados de forma a preservar sua aparência original ao aplicar o efeito de iluminação Como eu disse para combiná-lo, precisamos passar quatro valores K iguais a um dentro dos códigos duplos. Então eu dupliquei essa linha, nosso próximo valor é K dois E K dois é igual a zero. Então eu dupliquei novamente, K três também é igual a zero Então eu o duplico novamente e K quatro é igual a zero, e vou subtrair esse arquivo Agora vou aplicar esse filtro nesse círculo. Para isso, vamos usar seu nome de identificação. Acenda um para mim. Então, dentro da IRL, vou usar o sinal de pressa e depois vou colar o nome do ID, Light me one Se eu definir esse arquivo, você poderá ver o efeito. Essa é a aparência de uma luz pontual. Agora crie outro efeito de iluminação, que é luz de distância, uma luz de distância. Aqui, vou digitar um comentário. A fonte de luz é um elemento de luz de distância, e eu vou criar a luz de distância AI. Vou copiar esta seção e colá-la aqui. No começo, vou substituir esse nome. Um ponto para uma luz distante. Então, só precisamos substituir essa privacidade. Uma luz pontual com luz de distância e, em seguida, precisamos usar alguns atributos. Nosso primeiro nome de atributo é o primeiro atributo que vou usar é AzeMat sumo type az I AUT H. AzeMat igual a is at the double codes Eu vou passar 214. Agora, qual é o uso desse atributo? Ele especifica o ângulo de direção da fonte de luz no XXSplne Basicamente, ele especificou o ângulo de direção da luz. Em seguida, quero passar outro atributo, elevação. Elevação igual a 20. Basicamente, ele especificou o ângulo da fonte de luz acima do plano XY. Além disso, precisamos mudar o funcionamento do filtro. Vou substituir o Light M one pelo Light M two. Então eu vou aplicar esse filtro nesse círculo. Antes de configurar esse arquivo, vamos ampliar esta página. Então eu vou configurar esse arquivo. Depois de definir esse arquivo, as operações se sobrepõem umas às outras. Precisamos mudar a posição. Aqui, vou fazer com que seja de 28280 pixels e vou definir esse arquivo Além disso, precisamos mover esse círculo. Aqui, também vou passar o valor CX para 80 pixels. Depois de definir esse arquivo, você pode ver o resultado. Você pode ver que é assim. Agora, vamos criar o efeito de luz de luxúria, que é um holofote Já criamos luz pontual, luz de distância e agora vamos criar holofotes de IA Novamente, vou copiar esta seção e colá-la aqui. Em primeiro lugar, vou mudar a posição desse texto. Aqui eu vou movê-lo para 390. Além disso, vou mover o círculo na direção xx de 390 pixels Em seguida, vou substituir o ID desse filtro. Vou substituir o Light M two pelo Light M três. Além disso, vou substituí-lo aqui. Em seguida, substituo o texto, luz de distância FI, por holofote FI Em seguida, insira o filtro de iluminação difusa DFE, quero remover esse primitivo Eu não preciso desse primitivo agora. Desta vez, precisamos usar outro primitivo chamado F Spotlight Então, dentro dessa primitiva, precisamos passar alguns atributos Primeiro, precisamos passar XX como atributo, YX como atributo e Zadix como atributo XX é igual a três, 60. Então precisamos passar por YX. Yx é igual a aqui, precisamos de cinco, e para Xerxes, igual a, eu vou passar 30 E então eu vou passar outro atributo chamado ângulo limite do cone, limitando o ângulo co igual e eu vou passar de 20 Basicamente, é definido o ângulo do cone que limita a propagação do holofote Em seguida, precisamos passar três outros atributos, que é o ponto em x igual a 390 Então precisamos passar para duplicar essa linha, apontar para Y. Ponto em Y igual a 80 Em seguida, vou passar o ponto em Z. Novamente, dupliquei essa linha e substituirei X por Y por Z. Precisamos torná-la maiúscula, caso contrário não funcionará, então vou passar capital mais tarde e apontar z igual a e apontar z igual Basicamente, esses três valores especificam o ponto alvo em que o holofote é detectado Se eu definir esse arquivo, aqui você pode ver o resultado. Isso é o que ele cria depois de usar esse holofote. Nosso primeiro círculo aparece sem efeito de luz. Nosso segundo círculo difusa o efeito de iluminação usando uma luz pontual e dando a ela uma dimensão tridimensional em nosso terceiro círculo, usamos luz de distensão, que fornecerá uma aparência tridimensional uniforme . Em nosso quarto círculo, usamos holofotes e focamos e ela fornece uma aparência tridimensional de foco com um efeito de iluminação mais dramático Para usar outros efeitos de iluminação, usamos iluminação difusa IA primitiva Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, Sytune pelo próximo tutorial 42. Filtro SVG feDisplacementMap: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial sobre um primitivo Vigi E neste tutorial, vamos aprender uma nova primitiva, que é o mapa de deslocamento de IA É a privativa mais popular e útil nos filtros Swig Esse filtro privado em SVG é usado para criar um efeito de deslocamento em uma imagem usando os valores de pixel de uma imagem do mapa de deslocamento Esse efeito pode distorcer uma imagem de várias maneiras, como criar efeitos de ondulação ou deslocar partes da imagem com base no valor de pixels de outra imagem com base no valor de pixels de outra E se eu falar sobre sua sintaxe, fica assim. Primeiro, precisamos digitar um mapa de deslocamento e, em seguida, usar esse atributo em Aqui, precisamos fornecer a cópia da fonte. Então temos outro atributo em dois, e aqui precisamos passar a imagem do mapa de deslocamento Então temos a escala, e aqui precisamos passar o valor da escala. Em seguida, temos o seletor de canais X e o atributo seletor de canais Y. Como eu disse, são necessárias duas entradas no total para criar um resultado. A imagem contida para deslocar especifica NA em atributo e, em nosso atributo in, definimos qual efeito de deslocamento vamos aplicar E em nosso atributo de escala, definimos a quantidade de deslocamento Valores mais altos resultam em um efeito mais pronunciado, e esse atributo é usado para o deslocamento de XXs. Aqui podemos usar um dos valores. Podemos usar o valor R, valor vermelho, valor verde, caso contrário, valor azul. Além disso, podemos usar o valor Alpha. Da mesma forma, temos o deslocamento do YXS e, para tornar o conceito mais claro, vamos começar a prática Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor if e já crio um documento de estimativa. Por enquanto, nosso documento está completamente em branco. Então, dentro da nossa etiqueta corporal, primeiro vou pegar um Igitad, um Então eu fecho essa tag. Em primeiro lugar, precisamos definir SVG com altura e área Vevox Então, para digitar com igual a 200. Além disso, vou considerar uma altura igual a 200. Em seguida, vou usar outro atributo, que é view boox A visualização funciona da mesma forma dentro dos códigos duplos. Primeiro, precisamos fornecer Z x é zero, YX é zero e, em seguida, precisamos fornecer a área Eu quero passar 220 por 220. Então, dentro dessa tag SVG, primeiro, vou criar um círculo Para criar esse círculo, como você sabe, precisamos fornecer alguns atributos, e nosso primeiro atributo é CX, Cx igual a dentro da centena de códigos duplos Nosso próximo valor é CY, CY igual a cem. Dentro do casaco duplo cem. Em seguida, fornecerei a cor do traçado para esse círculo, traçado igual a, e quero usar a cor verde. E eu configurei esse arquivo. Depois de definir esse arquivo, como você pode ver, não temos nenhum círculo no meu navegador porque esquecemos de fornecer o raio Então, o hemótipo é igual ao que ele disse que o Dole codifica cem. E eu vou configurar esse arquivo. Depois de definir esse arquivo, aqui você pode ver o resultado. Como você sabe, por padrão, o SVG preenche nosso elemento com a cor preta E agora é hora de criar o filtro. Então, aqui vou digitar a tag de filtro. Vou atribuir um ID a esse filtro, ID igual a, e nosso nome de ID é DisppendFilter E agora eu quero aplicar esse filtro no meu círculo. Para aplicá-lo, como você sabe, precisamos usar a tag de estilo. Estilo igual a Eu vou usar a propriedade de filtro. Então, os casacos da boneca, filtrados por hemótipo. Filtrar dois pontos, URL. Então, dentro do código duplo, precisamos passar o ID desse filtro, tem tag e o nome do nosso filtro é filtro de deslocamento Se eu definir esse arquivo, nosso círculo desaparecerá. Então, depois de definir esse arquivo, como você pode ver, ele desaparece do nosso círculo. Então, dentro dessa tag de filtro, vou criar a primitiva. E nosso nome primitivo é AI displacement MX. Eu vou usar essa tag. Então, dentro dessa primitiva, vou usar os atributos Primeiro, vou usar o atributo into em dois. Por enquanto, vou deixá-lo preto. Então eu vou usar o atributo in aqui, eu vou passar o código-fonte do estupro. Então, dentro dos códigos duplos, vou passar a fonte do estupro. Então, precisamos usar o atributo de escala. Escala igual a dentro do dobro, eu vou passar o valor 50 da escala 50. Com isso, precisamos passar dois outros atributos: seletor de canais X e seletor de canais Tipo Soto, seletor de canais. Seletor de canal X igual a, e eu vou usar o perfil R Rul pass R em Então eu vou duplicar esta seção. Então copie e cole aqui, e aqui vou passar o seletor de canais Y. E desta vez eu vou passar pelo BV. Se eu definir esse arquivo, nada vai acontecer. Basicamente, escale esse círculo, nada aconteceu demais. Como eu disse, usando o atributo in, podemos especificar a imagem de entrada, e nossa imagem de entrada é esse círculo. Mas em nosso atributo into, precisamos passar a imagem do mapa de deslocamento Cujos valores de pixel serão usados para modificar a imagem de entrada. Então, aqui eu vou usar outra primitiva, que vai modificar a imagem de origem Então, outra primitiva que vou usar, que é a turbulência, AE Antes do mapa de deslocamento, vou digitar FE turvulens Além disso, precisamos fornecer algum atributo ao primitivo. Primeiro, precisamos declarar que o tipo T é igual aos códigos duplos turvulens LENC Não se preocupe. Vamos aprender a primitiva da turbulência da IA em nosso próximo tutorial Neste tutorial, focamos apenas no mapa de deslocamento da IA. Então, o próximo atributo que vou passar, que é a frequência base. Melhor frequência igual à dos códigos duplos, eu vou passar um. E o próximo atributo que vou passar, que é num optics e num optics igual a Istide, os códigos duplos, vou passar E o último atributo que precisamos passar em um turvulens é Resultado igual a um leme para passar por turvulens. E agora precisamos vincular esse primitivo. Precisamos vincular a primitiva I ao mapa de deslocamento usando o atributo into Então, aqui, eu vou passar pela turbulência. E eu vou configurar esse arquivo. Defina completamente este arquivo, aqui você pode ver o resultado É isso que cria o efeito de turbulência Utter Ap DFI no mapa de deslocamento II. Como eu disse, são necessárias duas entradas no total para criar um resultado Deixe-me mostrar outro exemplo com imagem real. Então, se eu mostrar meu crítico direto de trabalho atual, há um nome de imagem JPG de um ponto Então, vou usar essa imagem. Então, aqui, vou vincular a imagem. E eu já apliquei esse filtro. E antes de configurar esse arquivo, vou mudar a semana da imagem do WIG E também vou comentar esse círculo. Não preciso desse círculo para este exemplo. E desta vez, vou fazer com que o AWG WD tenha 500 pixels e a altura seja 333 Além disso, precisamos defini-lo em nossa área de trabalho de visualização. Então, aqui eu quero passar 500 e, para altura, vou passar 333 e vou definir esse arquivo Depois de definir esse arquivo, como você pode ver, ele não está funcionando. Então, primeiro, vou alterar o valor da frequência base da turbulência A. Vou fazer com que seja 0,05. Vamos certificar e ver se é adequado ou não. Sim, depois de definir esse arquivo, como você pode ver, ele começa a funcionar. Podemos manipular o cimento usando o valor da frequência base, valor óptico numérico, deixe-me mostrar. Então, se eu alterar o valor da óptica numérica, então vou torná-lo três e depois definir esse arquivo, você pode ver pequenas mudanças Então eu vou mudar o valor da escala. Se eu fizer 200, vamos ver e definir o arquivo. Como você pode ver, é isso que ele retorna. Então, por enquanto, vou fazer 50. Com isso, se eu mudar um dos canais, suponha o seletor de canais Y, vou usar o valor verde, G. Neste arquivo, você pode ver o resultado diferente Portanto, você precisa experimentar isso para obter um resultado diferente. Então é assim que podemos usar o mapa de dispersão. Usando o mapa de deslocamento, podemos criar vários efeitos ondulados em E não se preocupe. Vamos criar um projeto de animação usando esse filtro. Espero que agora esse primitivo esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 43. Filtro de Turbulência SVG: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao filtro SVG primitivo E neste tutorial, estamos prontos para aprender a turbulência primitiva da IA A turbulência AI filtrada pelo AVG gera ruído, que é útil para simular vários fenômenos naturais, como nuvens, fogo e fumaça, e gerar texturas complexas, como E o ruído pode ser usado para distorcer a imagem e o texto. função de turbulência Purlin é usada para gerar ruído de purlin A maioria dos incríveis filtros VG feitos com essa privacidade, eu turvulns Com ele, podemos criar fogo, fumaça, qualquer textura complexa, etc E se eu falar sobre sua síntese, primeiro para turvulens do tipo A e depois para usar atributos Atributo de tipo, atributo de melhor frequência, atributos de número de oitava, atributo CT e blocos de fenda Agora, vamos falar sobre esse atributo. O que podemos fazer com esse atributo? Nosso primeiro atributo é o atributo de tipo. Ele vem com dois valores, ravulens, caso contrário, ruído fractal, e o valor padrão é turbulência Em seguida, vem a frequência rápida. Seu efeito, o tamanho e a granulação do ruído gerado. O valor padrão é zero, então temos oitavas numéricas Ele define a frequência ou os detalhes do ruído e seu valor padrão é um. Então nós temos. Ele fornece um número inicial diferente para a função aleatória. Por último, temos ladrilhos de costura. Ele é usado para criar um efeito de costura quando você tem duas áreas adjacentes de ruído Ele define o comportamento do acúmulo de ruído na borda e nos cantos Então, ele vem em todos os cinco atributos diferentes. Então, vamos começar a prática e ver como podemos usar esse atributo. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor if, e já criei um nome de documento HTML com o nome de um documento HTML , índice, ponto de índice Então, como você pode ver em nossa tag corporal, temos uma tag WG e, dentro desse AUG, definimos a altura de 200 pixels e 200 Então, dentro do veado profundo, criamos um filtro, ID do filtro, filtro turvulens Então, dentro desse filtro, Hero usa a privacidade de Fitervuls Usamos o atributo type, o atributo base fgency, atributo num octaives e o atributo set, mas não fornecemos nenhum valor ao Então, temos uma tag de reação. Temos uma etiqueta retangular. Aqui dizemos com 200 pixels e altura 200 pixels. É uma caixa quadrada e, como você pode ver , está cheia de vermelho. Primeiro, vou aplicar esse filtro nesse retângulo Então, aqui eu uso o atributo de filtro e vou copiar esse ID. Em seguida, vou digitar o URL. Então eu coloquei os vestidos redondos. Precisamos usar o sinal astec e passar o ID. E se eu definir esse arquivo, como você pode ver, ele oculta nosso elemento retangular Então, um por um, vou adicionar valores de atributos. Primeiro, vou fornecer valor de tipo, tipo. Como eu disse, ele vem com dois valores de turvulns e ruído faccional Tarvulens é o valor padrão, então eu gostaria de usar o ruído faccional Então, temos a frequência base. O valor padrão do atributo de frequência base é zero. Mas aqui vou usar uma pequena quantidade de frequência base, que é 0,05 Em seguida, temos um número de oitavas. Como eu disse, o valor padrão de num octave é um. Mas aqui, eu vou passar por três. Finalmente temos C, e aqui vou passar dois. Se eu definir esse arquivo, você poderá ver o resultado. Isso é o que ele cria. Aqui, ele cria um efeito um pouco nublado, barulhento e esfumaçado. E se eu alterar os valores um pouco molhados, você pode ver o resultado diferente. Suponha que aqui eu mude o valor da frequência base. Vou usar 0,5, não 05, e depois definir esse arquivo, você pode ver o resultado da frequência base. Ao mesmo tempo, se eu alterar o valor de num Octive, três, dois, cinco, definir o valor três e definir esse arquivo, aqui você poderá identificar pequenas alterações Então, por enquanto, vou definir a frequência base de 0,05. E você pode ver o resultado. E se eu usar o valor restrito padrão Tarvles para substituir ruído factual por Tarvles e, em seguida, neste arquivo, você poderá Isso é o que ele cria. Como eu disse, maioria das vezes usamos essa primitiva com outra primitiva, que é um mapa de deslocamento de taxas, e já aprendemos sobre isso em nosso Então, se eu chamar outro mapa de deslocamento de IA primitivo e definir num Optics o valor dois, valor CT cinco e este arquivo, você poderá ver o Não vou explicar como podemos usar mapa de deslocamento de IA porque eu já abordei isso em nosso tutorial anterior Neste tutorial, eu apenas tento me concentrar apenas na turbulência da IA Então é assim que podemos usar essa primitiva. E se você quiser resultados diferentes, precisará experimentar esse valor. Então, espero que agora ele aprenda para você como podemos usar a turbulência de AF Obrigado por assistir a este vídeo, fique ligado no próximo tutorial