(Música animada) Bem-vindo de volta às pontuações da KnowledgeCity em folhas de estilo em cascata. Sou Cliff Brozo no seu instrutor e a lição de hoje, veremos a formatação de gráficos vetoriais escalonáveis. Vamos dar uma olhada no que vamos fazer. A primeira coisa que vamos explorar é o que acontece quando o CSS luta contra si mesmo. Vamos ver como nosso CSS formata diferentes objetos e luta contra si mesmo porque os nomes acabam sendo os mesmos. Então, vamos dar uma olhada em e explorar gráficos vetoriais escaláveis. Vamos explorar o que é a caixa de visualização e como isso nos permite olhar para esta imagem que estamos criando. Vamos olhar não apenas para um círculo mas alguns polígonos e retângulos e caminhos e então iremos incorporar nosso CSS direto em um arquivo gráfico vetorial escalonável. Quando criamos o círculo giratório KnowledgeCity, criamos uma imagem gráfica vetorial escalável, e formatamos isso definindo o tamanho da fonte e a família, o peso, transformando o texto em maiúsculas, colocar algum espaçamento entre letras para manter as letras um pouco mais separadas do que o normal e preenchendo essas letras com uma cor. Está tudo no arquivo SVG. O arquivo CSS funciona da mesma maneira e o que estávamos fazendo era tentar realizar o mesmo tipo de formatação em um objeto diferente. O que acabamos com foi, quando um mudou, o outro mudou também. Então, precisamos colocar o CSS no lado esquerdo da tela, direto no arquivo SVG. E isso o manteve separado do que estava no arquivo CSS. Uma das coisas que vamos fazer é algo que pode ser divertido. Primeiro, temos que entender no canto inferior esquerdo da tela, que os gráficos vetoriais vão nos dar uma imagem nítida e nítida, não importa o quão grande seja. Ao contrário dos gráficos raster, os outros tipos de arquivo que irá distorcer à medida que os tornarmos maiores. Gráficos vetoriais escaláveis permite três tipos de objetos gráficos, formas como caminhos e contornos, e serão linhas retas e curvas, algumas imagens de bitmap e texto. Agora, felizmente, todos os principais navegadores da web têm suporte para gráficos vetoriais escalonáveis. Então, estamos em boa forma aqui. O que decidi fazer para me divertir, é produzir três sinais de trânsito comuns. Um sinal de pare, um sinal de sentido único e um sinal de saída de estrada. Vamos dar uma olhada. O sinal de parada aqui é realmente um polígono e o polígono tem vários pontos e os pontos são definidos como um local de partida, quão longe e quão longe. E a partir desse ponto, contornamos a placa de pare. Por exemplo, 55 é 50 pixels a partir da esquerda e cinco pixels abaixo do topo. A partir desse ponto, passamos para 100, 5 isto é 100 pixels acima e cinco abaixo do topo. Em seguida, passamos para 125 acima e 30 do topo, 125 acima, 80 a partir do topo, 100 acima e 105 do topo, 50 acima e 105 do topo, 25 acima e 80 a partir do topo, 25 acima e 30 a partir do topo e isso irá completar nosso polígono. Então, se eu tiver um objeto de oito lados, o que vou fazer é tirar os pontos para todos os oito sinais. Agora, a razão pela qual existem dois polígonos aqui é porque um deles vai ser vermelho e o outro vai ser branco. O vermelho é o primeiro que declarei como polyA e mais em meu CSS eu defini polyA para ter um preenchimento de vermelho. Polígono B é a borda branca que vai dentro do polígono vermelho e isso tem um traço de branco e um preenchimento de vermelho. E o traço é a linha real. Então, quando estou desenhando isso, você notará que a parte inicial o 50, 5 é realmente 52, 10. Então, este ponto bem aqui é um pouco mais para a esquerda e cinco pixels para baixo. E cada número está um pouco acabado e um pouco mais para baixo. Vamos dar uma olhada em alguns outros sinais. Os sinais de mão única são uma combinação de retângulos e polígonos. A parte preta da placa de mão única eu dei uma borda curva e esses são retângulos. O fator rx aqui é semelhante ao raio da borda. Então, 25 pixels é o meu raio de fronteira é por isso que recebo uma esquina arredondada. Mas desenhar minha seta branca é realmente um polígono. Neste caso, o polígono C é minha seta branca, que é preenchido com branco e o polígono C está aqui embaixo na linha sete e eu começo com 175 sobre 25 todo o caminho para 305 sobre 25 para baixo. 305 acima e cinco abatidos. Então, eu desenho uma linha do final aqui até o topo em seguida, uma linha inclinada para 360 e 45. Outra linha inclinada 305, 85 em seguida, volte para 305, 70 de volta a 175 e 70. E é assim que você desenha um polígono. O texto se encaixa no lugar certo, Eu preencho o texto com branco mas eu dei uma localização de coordenadas de 38 e 70 que é onde vai começar e eu atribuo a ele um tamanho de fonte 36. O mais divertido foi criar uma placa de rodovia. Agora vou deixar isso assim por um segundo e peço que você pense qual é o verdadeiro e qual é o que foi criado com CSS e SVG. Bem, eles têm a mesma aparência. Eles com certeza parecem iguais. Um é um pouco mais claro que o outro e se você adivinhou que o sinal original de Morristown Mahwah que fica na 287 em Nova Jersey, é o da esquerda, você estava certo. O da direita é o que foi criado com CSS. Agora, talvez com um pouco mais de cuidado e a fonte adequada Eu teria sido capaz de duplicá-lo exatamente mas eu não tenho a fonte da estrada que o sistema de rodovias interestaduais dos Estados Unidos usa, então tento obter a fonte o mais próximo possível. Se você olhar com atenção, verá que o falcão em Morristown é ligeiramente diferente do haw na minha versão. A interestadual 287 teria sido muito, muito difícil gráficos vetoriais escaláveis para criar porque seria uma forma estranha. Não é um retângulo, não é um círculo. E eu teria que criar um caminho ou uma elipse que desenha este símbolo para mim. Felizmente, ele está disponível na web como um arquivo SVG completo e tudo que eles precisavam era importá-lo para o meu documento.
