Aprende animación de SVG con HTML, CSS y Javascript

1. Introducción a Svg: Oye, ¿quieres aprender gráfico y animación AWG de principio a fin? Entonces estás en el lugar correcto. Hola. Mi nombre es Jouger Profesionalmente, soy instructor en línea y desarrollador web FootsTEC Trabajé como empleado y freelancer respecto a este campo. Estoy muy entusiasmados por aprender animación SVG porque podemos programarla, también podemos controlarla cuando queramos Y como saben, la transición y la animación juegan el papel clave para hacer que nuestro sitio web sea muy introductorio. Sin perder el tiempo, veamos qué vamos a aprender de este curso. Al principio, te voy a presentar lo que es AVG. Y entonces vamos a aprender ¿cómo podemos encrudar imagen SVG en un documento TML A continuación, vamos a hablar la parte más importante de esta serie de tutoriales, que es SVG view port y view box. Después de eso, vamos a saltar a la sección de elemento, línea, elemento de reacción, elemento círculo, elemento elipse, elemento poligonal, elemento polilínea, elemento de ruta, elemento texto, elemento de imagen, trazo y propiedades de campo, y cómo podemos agrupar elementos, profundidad, elemento símbolo, A continuación, vamos a aprender ruta de texto y elemento de degradado. Por fin, vamos a aprender cómo podemos incluir JavaScript en imágenes SVG. También estoy tratando de cubrir algunas características de animación SVG. Después de completar todas estas propiedades, vamos a saltar a la sección de proyectos. Veamos qué tipo de proyecto vamos a cubrir en este tutorial s. En nuestro primer proyecto, vamos a crear una animación cur móvil usando AVG A continuación, vamos a saltar este proyecto. En este proyecto, vamos a crear animación SVG Stroke con CSS. Esta animación de trazo de líneas VC se ve bien con el texto transparente. Después vamos a crear otra animación de Trazo de Línea con una forma. Como puedes ver, dibuja una forma con la línea. A continuación, vamos a crear efecto de animación de línea elastrica SVC, como puedes ver que cambia de color con el movimiento En nuestro próximo proyecto, vamos a aprender cómo podemos envolver nuestro título con el trazo. Aquí puedes ver un texto en tu pantalla. Si obero mi cursor sobre él, envuelve nuestro título con una línea de trazo Puedes implementarlo en tu sitio web. Hablemos de nuestro próximo proyecto. Aquí vamos a crear animación de texto Wab benéfica con rotación de 360 grados Aquí puedes ver nuestro contenido de texto. Parece una ola de agua y nuestro contenido también es benéfico. Podemos eliminar nuestro contenido antiguo y podemos poner nuevo contenido de texto aquí. En nuestro caso, voy a escribir Hello World. En nuestro próximo proyecto, vamos a crear animación rápida de cargador SVG, y podrás ver el ejemplo en tu pantalla, cómo es así. A continuación, vamos a crear tres D sobre animación usando VG Como puedes ver en tu pantalla, cuando yo sobre mi Kazar en esta imagen, puedes ver una forma de tres D saliendo de la imagen de fondo En nuestro próximo proyecto, vamos a crear animación de seguimiento de rutas. Puedes ver el Mapa de guerra en tu pantalla, y quieres enviar un montón de carga de Nueva York a Kolkata Por este camino, el barco llegará al destino. Y si me muero mi navegador, se puede ver la animación. Supongamos que el punto rojo es nuestra gavilla contenedora y se mueve sobre la línea Y en nuestra siguiente sección, vamos a aprender cómo podemos crear toda la animación SBG pase loader una por una A continuación, vamos a crear scroll haciendo animación. Como pueden ver, si me desplazo por mi Kurar dibuja una forma Y esto está al final. Con eso, vamos a crear animación de máscara de video SVG. Y en nuestro proyecto final, vamos a crear el último. ¿Cuál es el especial de este proyecto? Si vuelvo a cargar esta página, como pueden ver, todos los estados de la India se reúnen su propio lugar y completan el mapa No sólo eso, si yo Oba mi auto en los estados, como pueden ver, llena nuestros estados de tricolor Entonces este es el video de introducción de nuestro curso. Si crees que es bastante beneficioso para ti, inscribe ya este curso. Gracias por ver este video. 2. Incluir SVG en HTML: Me alegro de verles chicos. En este tutorial, vamos a aprender ¿cómo podemos incluir archivo SVG en un documento SML Con eso, vamos a aprender ¿cómo podemos cambiar las propiedades de HVC usando CSS Veamos cómo funciona. Aquí puedes ver una imagen VG, cual abro en el software Illustrator Voy a usar esta imagen en una página SML con CSS. Ahora voy a abrir el editor de código de estudio y ver cómo funciona. Se puede ver lado a lado, abro mi visual studio Cditor y también abro mi navegador y ya creo archivo TML llamado index También subo esta imagen en mi directorio de trabajo actual. Aquí puedes ver una D que clase es contenedor dentro de mi etiqueta de estilo, yo estilo este contenedor. Dije color de fondo, borde, ancho aumentado y píxel harta con bordes de margen Se puede ver que este contenedor está en blanco, y ahora quiero insertar imagen Vg en este contenedor Para esto, voy a usar Image tag, simplemente escriba IMG. Y nuestro nombre de archivo es mag dot wig. Voy a escribir imagen punto peluca. Ahora voy a configurar este archivo y volver a cargar este navegador. Aquí se puede ver el foso. Podemos utilizarlos como cualquier otra imagen, PNG, JPG, GP, etcétera Ahora te voy a mostrar cómo podemos usar esta imagen usando CSS. Voy a comentar esta línea, y vuelvo a mi sección de estilo. Dentro de la propiedad background, voy a usar una etiqueta, que es URL. Dentro del paréntesis, necesitamos proporcionar la ruta del archivo, que es image, av, eso es todo Si configuro este archivo y vuelvo a cargar este navegador, puedes ver la imagen, pero viene en segundo plano. Déjame probarte eso. Si tecleo algo Loum TextFile y configuro este código, y si vuelvo a cargar este navegador, puedes ver que viene en segundo plano Voy a quitar esta línea, no necesito esta línea. Voy a configurar este archivo una vez más y volver a cargarlo. Entonces se pueden decir imágenes SVG en fondo. Podemos investigar nuestro archivo usando propiedad de tamaño de fondo. Te voy a mostrar eso. Tamaño de fondo 150 píxeles. Si configuro este archivo y vuelvo a cargar este navegador, se pueden ver muchas imágenes en esta D. Se pueden ver muchas imágenes en esta D porque no usamos valor modifet para este fondo, así que voy a escribir Si configuro este archivo y vuelvo a cargar este navegador, ahora puedes ver una imagen simple Sé que ya tienes un conocimiento básico sobre CSS, pero estoy asumiendo que eres principiante completo. Ahora está claro para ti, podemos usar imágenes SVG con CSS, y podemos establecer cualquiera más alto que nosotros. Ahora te voy a mostrar el tercer método, cómo podemos usar la imagen SVG usando la etiqueta SVG. Entonces voy a escribir SVG. Para ello, voy a abrir esta imagen en mi editor de texto. Ahí se puede ver la estructura de la imagen. Se puede ver que está hecho con PT. Voy a copiar toda la etiqueta de excavación. Copia y luego voy a volver a mi archivo STL de punto índice, y lo voy a pegar dentro del contenedor Voy a quitar esta línea y voy a pegarla aquí. Eso es. Ahora voy a eliminar la propiedad de diagrama CSS. No necesito esto ahora y voy a configurar este archivo. Si vuelvo a cargar este archivo, aquí se puede ver la misma imagen ¿Cuál es el principal beneficio si uso la etiqueta SDG así? En este curso, vamos a aprender eso. El principal beneficio es que podemos editar ATL y CSS. Si quiero cambiar el color del pelo, podemos simplemente pasar el cursor sobre el panel de color y simplemente arrastrar cualquier color Si guardo este archivo y vuelvo a cargar esta hilera puedes ver que cambia el color del cabello No sólo eso, podemos usar clase en este camino. Solo escribe clase. Nuestro nombre de clase es cero es t uno. Voy a quitar este estilo. Voy a cambiar el nombre de la clase solo t uno. Dentro de esta etiqueta de mosaico, voy a crear el selector. Dentro del Css, y ahora podemos usar la propiedad CSS y su valor. Voy a usar llenar. Quiero llenar de rosa fuerte. Si configuro este archivo y vuelvo a cargar este archivo en mi navegador, puedes ver ahora el color del cabello es rosa Esta propiedad de relleno se utiliza sólo para SVG. Con él, podemos establecer el color de fondo. Déjame mostrarte algo. Ahora voy a crear un efecto Ella. Voy a usar punto, contenedor, colon, hover, ST uno Entonces dentro del auto resiste llenar negro. Yo solo quiero que si coloco esta imagen, va a cambiar el color de fondo negro Voy a configurar este archivo y además voy a recargar este archivo en mi navegador, así lo vuelvo a cargar Entonces como pueden ver, cuando yo sobre el contenedor, cambia el color de fondo. Del mismo modo, podemos hacer cualquier cosa con eso. Podemos animar esta imagen. Podemos vincular esta imagen, cualquier cosa. Estos caminos son básicamente objeto. Así podemos cambiar cualquier color de objeto. Déjame mostrarte eso. Entonces voy a aumentar el tamaño del navegador, y voy a activar la opción Developer. Ahora podemos usar ahora podemos elegir el elemento particular, simplemente pasar el cursor sobre el elemento, algo así Y aquí se puede ver el color de campo de este objeto y podemos cambiarlo. Sólo tienes que arrastrar el color como quieras. Si quieres el color azul, solo arrastra al azul, eso es todo. Se ha convertido en un color azul. Usando class, podemos editarlo en nuestra sección de estilo. Puedes editar cualquier cosa. Si quieres eliminar algún objeto, sí, puedes. Espero que ahora te quede claro cómo podemos ingresar el archivo SVG en nuestro archivo STL Podemos usar Image tag y también puedes usar CSS, pero la mejor manera es la etiqueta SVG. Espero que te guste este video. Gracias por ver este video. 3. Tutorial de ViewPort y ViewBox de SVG: Hola, amigos. Bienvenida de nuevo. Antes de comenzar a aprender sobre SVG, debemos tener conocimiento de viewport y view fox Entonces saltemos a la pantalla de la computadora. Aquí pueden ver, abro mi archivo TML anterior. Aquí puedes ver una D y su clase es contenedor. Se puede ver que especificamos DV altura y ancho y color de fondo y borde. Dentro del contenedor, utilizo una imagen SVG. Ahora voy a explicarte qué es viewport. Viewport es el área donde vemos la imagen. Como pueden ver, esta es nuestra ventana gráfica y ahora voy a cambiar el tamaño de mi Voy a seleccionar la etiqueta SVG. Dentro de la sección de estilo, SVG. Entonces dentro del carro divs está, primero, voy a darle un borde a mi viewport, border to pixel Sólido y el color es negro. Si configuro este archivo, ahora no se puede ver el borde porque nuestro tamaño de contenedor y el tamaño de la imagen SVC es el mismo, y ahora voy a cambiar el tamaño de la imagen, altura 200 pixel con 200 pixel Si configuro este archivo y vuelvo a cargar mi navegador, ahora puedes ver el borde Ahora esta zona es nuestra ventana gráfica. Nuestra altura de ventana gráfica es de 200 y con esta 200 también. El área en la que se muestra la imagen, llamamos viewport Y recuerda, la ventana gráfica no está relacionada con la imagen. No podemos desbordar nuestra imagen fuera de la ventana gráfica. Podemos escalar nuestra imagen dentro de la ventana gráfica. Hablemos de viewbox. ¿Qué es view boox Cómo mostramos la imagen dentro de la ventana gráfica, llamamos Viewbox Podemos hacer zoom view boox dentro del área de la ventana gráfica. Además, podemos alejarlo. Hagámoslo más simple. Voy a abrir mi software Illustrator. Aquí se puede ver toda la zona blanca. Esta es nuestra viewpo puedes ver una forma dentro la ventana gráfica y podemos colocar la forma en cualquier lugar de nuestra Podemos mover la forma a cualquier parte dentro del viewpod. Podemos dibujar imágenes SVG dentro del viewpot. Pero si hablo de ver boox está relacionado con el zoom y el Ahora quiero mostrar esta imagen más grande dentro del viewpot. Si queremos, no podemos mostrar toda la imagen dentro del viewpod, algo así Podemos hacerlo usando nuestro viewbox. Puedes ver que no cambiamos nuestro área de viewpot, pero podemos cambiar la posición de la imagen dentro del área viewbod Podemos escalar en escala, y si no queremos mostrar la imagen completa, podemos. Podemos hacerlo usando viewbox. A ver ¿cómo podemos hacerlo prácticamente? Ahora puedes ver que nuestro visor es de 200 por 200. Dentro del área de la ventana gráfica, podemos ver una imagen que se reclama desde view boox Aquí puedes ver una propiedad en nuestro SVG, que es cuadro de vista. Se confeccionó con cuatro valores X xs, YX, ancho y alto Empiezo con X xs, luego vengo YX, luego ancho y alto Y aquí se puede ver, tomamos similar con y altura como nuestro contenedor. Si aumento view boox con y altura, podemos alejar y acercar nuestra imagen. Déjame mostrarte. Voy a cambiar 900 y voy a cambiar también la altura 900. Si configuro este archivo y vuelvo a cargar este navegador, puedes verlo alejar un poco Si aumentamos el peso alto en nuestra vista boox entonces alejamos nuestra imagen El tamaño base de la imagen es de 500 por 500. Si aumentamos el valor, entonces se alejará. Si disminuimos el valor, entonces se acerca. Déjame mostrarte y nosotros hacemos tipo 200 por 200. Si configuro este archivo y cargo este navegador, puedes verlo cortar nuestra imagen, significa que es Zoom nuestra imagen. Es trabajo como en prospectiva. Cuanto más te acerques, el objeto se hará más grande. De igual manera, el objeto se hará más pequeño a medida que vayas más allá. Vamos a traer de vuelta a la imagen a la posición normal. 500 por 500. Si configuro este archivo y vuelvo a cargar este navegador, cómo puedes ver que está de vuelta a su propio lugar Hablemos de XXs y YxS. Si tecleo XXs 100 y pongo la imagen, entonces este cuadro de vista empieza desde punto 100, algo de aquí Si vuelvo a cargar este navegador, puedes verlo. Podemos mover imágenes usando XX y YxS. De igual manera, si utilizo 200 para YxS y recargo este navegador, ahora puedes ver la imagen comenzar desde aquí Dentro de la misma área de ventana gráfica, podemos cambiar la perspectiva de la imagen y su posición usando probidad de viewbox Según el viewbox, la imagen comienza desde 100 Xxs y 200 YxS No sólo eso, a la vez, podemos alejar nuestra imagen. Entonces voy a aumentar el valor de ancho aumentado 700 por 700 Si configuro este archivo y vuelvo a cargar mi navegador, puedes verlo alejar un poco Pero me gustaría respaldar la posición normal. No sólo eso, podemos usar valor menos para Xxs e YxS. Si configuro este archivo, ahora se puede ver que comienza desde dirección opuesta. Pongamos esta imagen en su posición predeterminada, cero, cero. Si configuro este archivo y cargo este navegador, aquí puedes ver que ha vuelto a su propia posición. Espero que ahora te quede claro lo que es viewport y view boox Solo recuerda, viewport es área exterior y Viewbox está dentro de a. déjame mostrarte otro ejemplo que te hace ver Aquí puedes ver una nueva imagen SVG en mi navegador y puedes ver cuatro formas diferentes en esta imagen. Es una sola imagen, pero dentro de la imagen, tenemos cuatro objetos diferentes, círculo, polígono, reaccionar, rectángulo, etcétera, lo llamamos sprite de imagen Si combinamos diferente imagen con eso, si creamos una sola imagen, entonces se llama Image Sprite Ahora quiero mostrar cada objeto uno por uno dentro de este cuadro de vista dentro de esta ventana gráfica Pero la pregunta es ¿cómo es posible? Es una sola imagen. Para ello, necesitamos hacer zoom esta imagen y posicionar esta imagen. Eso es. La altura de nuestra ventana gráfica es de 500 píxeles. Si notas, todas las formas toman misma cantidad de altura, 125 píxeles. Voy a escribir 125 para ancho y 125 para alto. Si configuro este archivo y vuelvo a cargar este navegador, aquí puede ver que los objetos no están en el área de ventana gráfica Entonces necesitamos mover su posición usando XX RL. Voy a escribir 188 píxeles de XXs. Si configuro este archivo y vuelvo a cargar este navegador, puedes ver nuestra primera forma geométrica Ahora voy a cambiar YxS y puedes ver cada forma geométrica una por una Voy a escribir 125 píxeles para YxS. Si configuro este archivo y vuelvo a cargar este navegador, ahora puedes ver nuestro siguiente círculo de forma geométrica Si agrego 125 con este valor, entonces voy a escribir 250. Y establecer este archivo. Ahora se puede ver otra forma forma de rectángulo. De igual manera, si tecleo 375 y configuro este código, ahora puedes ver la forma triangular. Todos los parámetros dependen del tamaño de su ventana gráfica. Espero que ahora puedas entender cómo usamos ViewVox para alcanzar Gracias por ver este video. Nos vemos pronto. 4. Tutorial de elementos de línea de SVG: Una vez más, estoy de vuelta con una nueva T a, y en este video, vamos a aprender sobre el elemento de línea. Utilizamos elemento de línea para dibujar uno. Pero antes de dibujar cualquier línea, deberíamos tener conocimiento sobre el punto X xs y el eje Y poin Supongamos que esta es nuestra vista y creamos una línea diagonal en esta vista Para trazar una línea, debes tener punto de partida. Para el punto de partida, necesitamos X xs e Y xs y lo reconocemos X uno e Y un punto. Para comenzar una línea, necesitamos proporcionar punto X xs e Y xs punto. De igual manera, necesitamos proporcionar el punto a la línea, y lo reconocemos X dos e Y dos. En general, necesitamos cuatro atributos para trazar una línea. X uno, Y uno, X dos, Y dos. Sin este cero, no podemos crear la línea. Veamos cómo podemos crearlo prácticamente. Aquí se puede ver lado a lado, abro mi estudio visual Cretor y también abro mi navegador usando la extensión Live Server Ya creo un documento de estimación para este ejemplo. Aquí puedes ver, creo un contenedor llamado Dev, y configuro un color de fondo y borde a este contenedor. También digo hide wid 500 pixel para alineación media, configuro Margen cero y auto Dentro del DV se puede ver una etiqueta SVG. Dentro de la vista boox utilizo Xxs cero y YX es cero. Yo digo, entonces la altura 100 y 100. Dentro de la inmersión, creo una cuadrícula. Para esta grilla, utilizo etiqueta G. Te explicaré más adelante cómo podemos crear grano en VG y voy a iniciarlo desde aquí Primero, voy a tomar una etiqueta de línea. Como ya les dije antes, necesitamos cuatro atributos para crear una línea. Dentro de la etiqueta de línea, voy a escribir X uno, igual a 20 píxeles e Y igual a y YN es 40. Se puede suponer que después de cada diez píxeles, dibujo una línea. Entonces esto es X cero, esto es diez, y esto es X 20. Esto es Y cero, esto es Y diez, esto es Y 20, esto es Y 30 y esto es Y 40. Nuestras líneas parten de este punto, ahora necesitamos definir el punto final. Nuestro punto X dos es 80 y nuestro punto Y dos también es 40 va a crear una línea recta. Si configuro este archivo, no se puede ver una línea porque necesitamos definir un color de trazo a esta línea. Voy a usar la propiedad de trazo. Voy a escribir trazo y voy a darle un color a este trazo. Tarifa. Si configuro este archivo, ahora puedes ver la línea. De igual manera, si se quiere crear una línea diagonal, sólo tiene que aumentar el valor de Y dos. Quiero escribir 60. Si configuro este archivo, aquí se puede ver, ahora es crear una línea diagonal. De esa manera, se puede crear cualquier línea. Usando la propiedad de trazo, podemos establecer el color. En nuestro próximo video, vamos a conocer más sobre el ictus. Y ahora voy a crear un rectángulo usando línea. Primero, voy a dibujar una línea recta, así que voy a cambiar Y a valor por B. Yo creo nuestra línea recta, y luego voy a replicar esta línea, y voy a comenzar mi siguiente línea a partir de este punto Voy a escribir X uno, 80 e Y 140. Ahora nuestra segunda línea arranca desde este punto, y quiero terminar esta línea este punto. Nuestro punto X dos es 80 y también nuestro punto y dos es 80. Voy a cambiar el color del trazo azul. Si configuro este archivo, puedes ver la línea, y voy a duplicar esta línea. Ahora quiero comenzar mi tercera línea a partir de este punto, y quiero terminar esta línea este punto. Para esto, solo cambia para esto, solo va a cambiar Y 1.80 por X dos puntos, necesitamos escribir 20 Es X cero, es diez, es X 20. Yo tecleé X 2.20 y no necesitamos cambiar Y dos puntos, y voy a cambiar el color del trazo verde Si configuro este archivo, puedes ver la línea. Para nuestra cuarta línea, voy a duplicar esta línea una vez más. Ahora nuestras líneas parten de este punto significa X 20 y sin embargo esta línea va a terminar este punto. Significa que no necesitamos cambiar el valor X, solo vamos a cambiar el valor Y dos 40. Si configuro este archivo, puedes ver la línea. Enhorabuena. Simplemente creamos una forma rectangular usando líneas. Se puede ver usando punto de inicio y punto final, creamos un rectángulo. Podemos dibujar cualquier forma geométrica con eso. Para esto, necesitamos usar etiqueta de línea, y también necesitamos mencionar un color de trazo para esta línea. De lo contrario, no podemos ver la línea. Si elimino la grilla y configuro el archivo, ahora se puede ver sin grilla como se veía. Yo creo esta grilla porque que puedes entender mejor nuestros puntos. Si usamos grid, es muy fácil dibujar una estructura. Ahora tu reto es crear un triángulo sin usar grid. No es un reto muy difícil. Espero que disfrutes de este reto. Gracias por ver este video. 5. Tutorial de elementos de recto de SVG: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender sobre el elemento react. Rect significa rectángulo. Veamos qué tipo de atributo necesitamos para crear un rectángulo dentro de la Bigita Aquí puedes ver un viewpot y dentro del viewpot creo un rectángulo Si queremos crear un rectángulo como este, entonces necesitamos un punto de partida. Para ello, necesitamos los ejes X xs e Y. Con eso, necesitamos otros dos atributos. El primero es el ancho y el segundo es el alto. Veamos prácticamente cómo funciona. Aquí se puede ver lado a lado, abro mi visual studio Cditor y abro mi navegador usando extensión de servidor if Como pueden ver, ya creo un documento TML, y también creo un contenedor de clase profundo, y digo realzado con color de fondo y borde Dentro de la Deb ya uso la etiqueta SVG, y configuro el cuadro de vista cien por cien píxeles, y ya creo una estructura de cuadrícula que puedas entender nuestros puntos muy fácilmente Empecemos a crear un rectángulo. Para rectángulo, necesitamos usar etiqueta Rc, RECT. Para crear un rectángulo, necesitamos cuatro atributos, y quiero comenzar mi rectángulo a partir de este punto. Entonces nuestro punto Xs es 20 y nuestro punto Y xs es 13. Entonces necesitas proporcionar ancho. Para Width, tenemos un atributo llamado width. Oye, olvidé usar comillas dobles. Tenemos que mover este valor dentro de la doble cotización. De lo contrario, no va a funcionar. Nuestro Wi, voy a escribir 80 pixel y además necesito proporcionar altura. Y voy a proporcionar 40 píxeles. Si configuro este archivo, puedes ver en mi navegador, dibuja un rectángulo y voy a disminuir esto con Blu benti Si configuro este archivo, ahora nuestro rectángulo se ve perfecto, por defecto, nuestro rectángulo coloreado es negro, y no hay trazo en este rectángulo. Para dar un trazo, necesitamos usar trazo pprity TROCHE igual al interior de la doble capa, voy a usar color rojo Si configuro este archivo, ahora puedes ver el trazo. Si quieres cambiar el color del rectángulo, entonces tenemos una propiedad llamada fill. En cambio el paréntesis, nuestro color de campo es, voy a poner amarillo Básicamente, usamos pupatry de campo para cambiar el color de fondo Puedes escribir el nombre del color, de lo contrario, puedes usar hexa amarillo Voy a cambiar el color del campo rosa. Si digo este archivo, ahora nuestro rectángulo de color de fondo es rosa. Y si no quiero enviar y si no quieres establecer ningún color de fondo a este rectángulo, solo necesitas escribir ninguno. Si configuro este archivo, aquí se puede ver, no hay color de fondo a este rectángulo. Por ahora, voy a usar el amarillo. No sólo eso, podemos establecer border reduce a este rectángulo. Entonces tenemos dos propiedad RX y RY. Voy a escribir RDX. Rx igual a diez. Si configuro este archivo, se puede ver que reduce nuestro borde diez píxeles. No es necesario escribir ningún parámetro porque usamos view vox. Si utilizo propiedad RI significa radio Y propiedad, voy a escribir R Y. Igual a dentro de los códigos. Básicamente, se ha trabajado verticalmente, y voy a ponerle 50. Si guardo este archivo, ahora se puede ver, es cambiar nuestra forma de trabajo Rx en Xxs y RY YxS Puede cambiar la cota de radio con este valor. Resumamos este proceso rápidamente. Cómo podemos crear este rectángulo. Primero, necesitamos punto de partida. Aquí tenemos que pasar el valor X y el valor Y, y luego tenemos que proporcionar dentro de la altura, y necesitamos dentro de la altura de acuerdo con esta caja de U. Supongamos que este es nuestro punto de partida y tomo con 70, necesitamos contarlo a partir de este punto, diez, 20, 30, 40, 50, 60, 70. Es un trabajo así. ¿Cómo establecemos nuestro radio X y nuestro radio Y? Y para trazo, uso propiedad de trazo, y para el color de fondo, uso propiedad de campo. Podemos crear múltiples rectángulos en una etiqueta Vg. Déjame mostrarte esto. Quiero duplicar esta línea y voy a establecer nuestra x 0.30 e Y 0.40 Quiero establecer con 40 y quiero establecer la altura 20, y quiero establecer el color de fondo verde. Si configuro este archivo, ahora puedes ver el rectángulo dentro del rectángulo. Si elimino el radio, ahora se puede ver el rectángulo adecuado. Usando este proceso, podemos crear múltiples rectángulos como queramos. Entonces espero que ahora te quede claro, ¿ cómo podemos crear rectángulo dentro de la etiqueta SVG? Gracias por ver este video. 6. Tutorial de elementos de círculo de SVG: Hola, amigos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre el elemento círculo. Como saben, utilizamos este elemento para crear un círculo. Entonces veamos qué tipo de atributo necesitamos para crear un círculo. Aquí puedes ver un círculo en nuestra piscina de vista. Si quieres dibujar este círculo, entonces necesitamos X xs e YxS Definimos este atributo Xxs con Cx, significa círculo Xxs y CY para círculo Con eso, necesitamos otro atributo, que es el radio. Usando el atributo radius, podemos definir el tamaño del círculo. Si quieres crear círculo grande o pequeño, entonces radio va a jugar el papel real y definimos este radio con R. Vamos a entrar en el codificador de estudio visual y ver cómo funciona Aquí puedes ver lado a lado, abro mi navegador y abro mi editor de bacalao, y ya creo un documento de estimación. Dentro de la etiqueta del cuerpo, ya creo un contenedor de clase profunda, y establecí altura y ancho a este contenedor. Dentro de la etiqueta deep, uso WigTag con view box y ya creo un grip para entender los puntos de atributo Ahora voy a crear esta etiqueta circular para crear primero un círculo solo para crear una etiqueta circular. Y también necesitamos tres atributos para crear este círculo. Primero, necesitamos X xs e yxs. Nuestro nombre de atributo es CX, igual a, y quiero hacer este círculo desde el centro. I tipo 50 y CY para YxSequal 50. Ahora nuestro atributo más importante es el radio. Usando radio, podemos definir el tamaño del círculo y definimos el atributo de radio usando R pequeño, R igual a 40. Si configuro este archivo, aquí se puede ver un círculo de color negro. El negro es el color predeterminado. Y si quieres cambiar este color de círculo, entonces necesitas usar atributo de campo. Voy a atar relleno. Rellenar igual a, quiero usar color verde para este círculo. Si me senté este archivo, aquí se puede ver, se ha convertido en un círculo verde. Si queremos usar trazo, sí, podemos. Déjame mostrarte. Para ello, necesitamos usar el atributo de trazo. Y quiero usar el color rojo para trazo. Si configuro este archivo, aquí puedes ver este trazo. Si no queremos usar ningún color, solo para escribir ninguno en el relleno. Aquí pueden ver ahora nuestro círculo es completamente transparente, por ahora voy a usar el color verde, y ahora quiero reducir el tamaño del círculo, así que voy a reducir el valor del radio 20. Si configuro este archivo, ahora puedes verlo reducido por 20 píxeles y también quiero mover este círculo a esta esquina Voy a aumentar el valor X 80 y también necesito aumentar el valor de Y. 80. Si pongo este archivo, aquí pueden ver, movemos perfectamente este círculo en esta esquina. No sólo eso, podemos crear múltiples círculos en esta etiqueta VG Voy a duplicar esta etiqueta circular. Además, voy a cambiar el valor X y el valor Y 30, 40, y nuestro radio es diez y el color es azul. Si configuro este archivo, ahora puedes ver este círculo. Creamos una imagen y hay dos círculos en esta imagen. Puedes crear múltiples círculos, cuánto quieras. Con eso, se pueden crear rectángulos, líneas, triángulos, etcétera. Ahora te queda claro cómo podemos dibujar círculo en un Veggitag En el siguiente tutorial, te voy a mostrar cómo podemos crear el elemento Ellipse Gracias por ver este video. 7. Tutorial de elementos de elipse de SVG: Una vez más, es bueno verte de vuelta. En este tutorial, vamos a aprender sobre el elemento Ellipse Veamos qué tipo de atributo necesitamos para crear un elemento Ellipse en su tanque VG Aquí puedes ver dentro de la ventana gráfica, dibujo un elemento Elipse Para iniciar elemento Ellipe, necesitamos dos cosas Xxs e Y xs Definimos propiedad X con CX y definimos propiedad Y con CY. Similar al círculo. A diferencia del elemento círculo, necesitamos otras dos propiedades. RH significa radio X y RY significa radio Y. Veamos cómo funciona en la práctica. Aquí puedes ver, lado a lado, abro mi rezo studio corator y mi navegador usando extensión de servidor Lip y ya creo un documento TML Tener un contenedor profundo plus, y dije color de fondo realzado con margen y borde Dentro de esta etiqueta profunda, tengo una etiqueta SVG, y configuramos Vevox vedo a esta Como pueden ver, ya creo un sistema de cuadrícula para entender los puntos de atributo. Empecemos a crear el elemento Ellipse. Primero, necesitamos escribir la etiqueta de Ellipe. Dentro de la etiqueta ellip, voy a tomar propiedad Cx y Cy, Cx igual a 50 y CY igual a 50 porque quiero iniciar este ellip medio de este Ahora necesito proporcionar radio Xxs y radio YX, Rx igual a 20 y radio yx igual Si configuro este código, aquí se puede ver el elemento de nuestros labios. Por defecto, es de color negro. Si quieres cambiar el color de este elemento ipe, entonces necesitamos usar propiedad de relleno, si lo hago quiero llenar esta elipse con color rojo Si dijera este archivo, ahora está convertido en rojo. Si desea usar trazo, necesita usar la propiedad de trazo, trazo, igual a negro. Si configuro este archivo, aquí puedo ver un trazo negro. Si quieres que sea transparente, simplemente escribe ninguno en la sección de campo. Ahora es completamente transparente. Ahora voy a crear otra herramienta Elipse dentro de esta como tag ig Voy a duplicar esta herramienta Elipse y voy a cambiar la propiedad Rx y ROI, diez, 20, y voy a proporcionar el color de campo verde Si configuro este archivo, aquí se puede ver otro elemento Ellipe dentro de este elemento Ellipe Si quieres rotar este elemento Elpe, sí, puedes. Ahora voy a usar clase en este elemento Ellipe, doulas CLA y nuestro nombre de clase es segundo porque este es nuestro segundo elemento Ellipe En tal sección de estilo, voy a seleccionar este elemento. Segundo. Dentro de las celdas, voy a usar una propiedad transform, transform, rotate, y quiero rotar este elemento 20 grados. Si dije este archivo, ella puede ver que es rotar el elemento F 20 grados en su lugar. Si desea rotar este elemento desde su lugar exacto, entonces necesita proporcionar transformar la propiedad de origen. Déjame mostrarte que Transforma Aisin 50% de altura y 50% de ancho Si configuro este archivo, ahora se puede ver que es rotar de acuerdo a la mitad de este pool de vistas, y voy a aumentar el valor de rotación 40. Si configuro este archivo, puede ver que podemos controlar el grado de rotación. Espero que ahora te quede claro qué es elemento lip y cómo podemos dibujar el elemento lip en una etiqueta WIG, y cómo podemos rotarlo usando CSS. Gracias por ver este video. 8. Tutorial de elementos de polilínea de SVG: Oye, una vez más, estoy de vuelta con nuevo tutorial. En este tutorial, vamos a aprender sobre el elemento de polilínea Veamos qué atributo necesitamos para crear una forma de polieno Aquí puedes ver una forma de poliano dentro de la vista boox. Se puede crear cualquier tipo de forma de polieno. Puedes crear cientos de sitios para tu elemento de polieno. Aquí puedes ver que tenemos un total de cinco lados en nuestra forma de polyne y necesitamos puntos para unir estas dos líneas Supongamos que quiero comenzar mi forma de polino desde este punto rojo, necesitamos proporcionar el valor exacto de Xs y el valor YXS De igual manera, para el punto verde, necesitamos otro valor Xxs e YXS Necesitamos un total de cinco puntos diferentes para crear esta forma. Pero si quieres cruzar esta forma, una vez más, necesitas proporcionar primero X xs y YxsPoint Mans nuestro valor de punto rojo Total, necesitamos seis puntos para dibujar esta forma. Ahora se puede pensar que podemos hacer el mismo trabajo usando elemento de línea, pero hay un problema. No se puede sentir la forma con el color. También cada vez que necesitamos proporcionar punto de inicio y punto final, pero puede crear esta forma usando una etiqueta, etiqueta de polilínea Vamos a sumergirnos en el navegador y ver cómo funciona. Aquí puedes ver, ya creé un documento TML, y dentro de la etiqueta body, creo un contenedor de clase Dentro del DV creo una etiqueta SVG, y configuro nuestro cuadro de vista cien por cien píxeles y creo un sistema de cuadrícula dentro esta vista boox para entender los valores Ahora voy a iniciar nuestra etiqueta polilínea. Primero, necesitamos escribir etiqueta de polilínea. Solo necesitamos un atributo para crear puntos de polilínea. Dentro de los puntos, primero, necesitamos proporcionar el punto de partida, Xs y YxS Supongamos que quiero iniciar este polinee a partir de este punto. Nuestro punto Xs es 20 y nuestro punto YxS es 20 también. Supongamos que nuestro siguiente punto está aquí, entonces necesitamos proporcionar un espacio, y de acuerdo a este punto, nuestro valor x es 80 y nuestro valor YX es 30 Para nuestro tercer punto, voy a usar este punto significa 60 y 60. Voy a usar el espacio, y voy a escribir XX 60 YXX 60 entonces necesitamos proporcionar nuestro cuarto punto Y para nuestro cuarto punto, voy a usar este. Según este punto, nuestra Xs es 20 y nuestra Y xs es 50. Voy a pasar el 2050. Si configuro este archivo, se puede ver una forma de polilínea. Como puedes ver, por defecto, es de color negro. Y si conoces el proceso, cómo podemos cambiar el color de la polilínea, necesitamos usar la propiedad de relleno Rellenar verde. Si configuro este archivo, ahora está convertido en color verde. No sólo eso también podemos usar la propiedad de trazo, trazo, igual a la tasa. Ahora puedes ver este trazo. Puedes ver que no completamos nuestra forma de polilínea. Por eso no proporcionamos el trazo de este punto a este punto. Tenemos que cerrar este punto. De lo contrario, esta forma es completa y sabes que nuestro punto final D es nuestro punto de partida, 20 d 20. Voy a copiar estos puntos y voy a dar un espacio y pegar. Si configuro este archivo, ahora puedes ver el trazo. Ahora es completa nuestra forma. Usando polynee puedes dibujar cualquier forma. Si no quieres dar ningún color de fondo, simplemente escribe ninguno en la sección de campo. Si configuro este archivo, ahora se puede ver, es completamente transparente. Resumamos esta conferencia. Para crear una polilínea, necesita una etiqueta de plisado. Y necesitas un atributo para crear puntos de polilínea. Para trazar una línea, es necesario proporcionar valor Xs e YXS. Y para su siguiente punto y una vez que necesite proporcionar valor Xs e YXS De esta manera similar , sigue adelante. Y una cosa que debes recordar, tu punto final debería ser tu punto de partida. De lo contrario, la forma estaría incompleta. Y si quieres rellenar esta forma con color, puedes usar la propiedad de campo, y para el borde, puedes usar la propiedad de trazo. Entonces espero que ahora te quede claro, ¿cómo puedes dibujar una forma de polilínea dentro del tanque VG Gracias por ver este video. 9. Tutorial de elementos de polígono de SVG: Oye, me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre el elemento polígono Veamos qué es el elemento poligonal y qué tipo de atributo necesitamos para crear este elemento Aquí puedes ver una forma de polígono y puedes dibujar múltiples líneas tanto como quieras Esta es una forma de polígono, pero también parecía forma de polígono Lo que cubrí en mi tutorial anterior. Pero hay una diferencia entre dos elementos, y voy a contarlo más adelante. Como ya sabes, a estos dos puntos de unión de líneas los llamamos, y si quieres iniciar estos puntos, necesitas valor Xs y valores YXS Si quieres iniciar este elemento poligonal desde el punto rojo, entonces necesitas proporcionar punto Xs rojo, punto YxspinfGreen rojo, necesitas proporcionar punto Xs verde, punto YX verde Pero la diferencia entre polilínea y elemento poligonal es que no es necesario proporcionar el punto final, para cerrar esta forma, elemento poligonal, completarlo Supongamos que voy a borrar este punto de yemas, algo así En el elemento polígono, no va a dibujar la última línea automáticamente Tenemos que proporcionar el punto para terminar esta última línea. Pero en el elemento polígono, automáticamente dibuja la línea Esta es la principal diferencia entre ellos. Comencemos la práctica como funciona. Aquí pueden ver, lado a lado, abro mi código de Visual Studio y mi navegador usando extensión de servidor ligero Ya creo un documento TML. Dentro del documento EstiML, creo un contenedor Dep plus, y especifico el color de fondo para este contenedor y configuro denoi alto También configuro borde a Dentro del contenedor, creo una etiqueta AVG, Al se puede ver el tamaño de la vista. Dentro del VGMage creo un gree para entender correctamente los atributos Dibujemos un elemento poligonal. Primero necesitamos etiqueta poligonal? Dentro de la etiqueta de polígono, nuestro primer atributo son los puntos Y quiero comenzar mi forma de polígono a partir de este punto. Voy a teclear 50 y nuestro YxS es 20, nuestro siguiente punto está aquí Es media 80, 30. Xxs es 80 y YxS es 30. Voy a proporcionar un espacio entre ellos, y voy a escribir XX es 80 y YXS 30 A continuación, voy a dibujar un punto aquí. Quiero decir XX es 50, YXS es 70. Voy a teclear espacio. Xs es 50 y YXS es 70 Entonces si configuro este archivo, ella puedes ver una forma de triángulo, y ahora quiero establecer un color de fondo a esta forma. Entonces voy a usar campo PaperTyfel igual a verde. Si configuro este archivo, puedes ver, ahora está abajo en color verde. Y para establecer un borde, necesitamos usar trazo Paperty. Golpe igual a la tasa. Si configuro este archivo, aquí puedes ver un trazo rojo. Si nota, puede ver quién acaba de proporcionar tres puntos, 50 20, 80 30, y 50 70, pero nosotros no proporcionamos el punto final. Para esta última línea, no hago nada. Es dibujar automáticamente la última línea, pero en nuestro tutorial anterior significa tutorial poliano Hay que mencionar la última línea. De lo contrario, no va a completar el objeto. Ahora quiero dibujar otro punto aquí. Es media XSS es 30 y Y Xs es 50. Voy a proporcionar 30 50. Si configuro este archivo, puedes verlo dibujar nuestra última línea automáticamente. Si quieres crear una gráfica, entonces la polilínea es genial para ti Si quieres crear formas, entonces te recomiendo usar el elemento poligonal Y si quieres que sea transparente, conoces el proceso, necesitas escribir ninguno en la sección de campo. Eso es. Ahora puedes ver que es totalmente transparente. Espero que entiendas el elemento polígono. Gracias por ver este video. 10. Tutorial de elementos de ruta de SVG: Oye, una vez más, estoy de vuelta con una nueva etiqueta, que es una etiqueta a tope. La etiqueta de ruta es una de las etiquetas más avanzadas en SRG. Puedes dibujar cualquier tipo de marco usando este elemento. Usando este elemento, puedes dibujar línea, círculo, rectángulo, forma de polígono y minim Veamos un ejemplo y tratemos de entender cómo podemos crear una forma usando el elemento Bth Aquí puedes ver dentro de mi vista para, creamos una forma básica usando BT y ya sabes cuando dos líneas se unen, llamamos a esa posición puntos. Supongamos que quieres comenzar esta forma desde el punto pin. Es necesario proporcionar las coordenadas medias Xxs e YxS que necesitamos para seguir el paso similar para punto verde, BluePoint y punto rojo F punto rojo a punto rosa, se puede ver una forma de curva. Para estos, necesitamos usar comando arc. Puedes dibujar cualquier forma muy fácilmente. Hay muchas formas, arco, polígono, círculo, línea, etcétera. Para estos, necesitamos usar diferentes comandos. Veamos los comandos. Aquí puedes ver los comandos relacionados con una ruta VG y dividimos en cuatro categorías Nuestro primer comando es comando de línea dentro del comando de línea, tenemos cuatro coman diferentes L, H, V y Z. en este tutorial, vamos a aprender el comando de línea, ahí vienen la curva V ser y las curvas más bajas cuadráticas Vamos a aprender sobre esta curva en nuestro siguiente tutorial y nuestro último comando es comando arc. Te voy a enseñar todos los comandos uno por uno. Empecemos con el comando de línea. Aquí pueden ver, ya creé el documento TML, y ya creo un contenedor deep plus Huracán ver, estilo así de profundo. Ya puse un color de fondo y dije altura y ancho, y también dije borde. Dentro de esta profundidad, ya llevo una etiqueta SVG, y también puse V box en esta profundidad. Temporalmente, creo una cuadrícula dentro de esta etiqueta SVG. Usando este grano, es muy fácil entender nuestros atributos Empecemos por lo práctico. Primero, voy a tomar Put tag. Poner para iniciar este parque, necesitamos una propiedad importante llamada D, D igual a dentro de los policías dobles. Tenemos que aportar los puntos. D significa dibujar. En cambio el paréntesis, primero, hay que tomar el mando y M debe ser mayúscula Utilizando, podemos definir el punto de partida de nuestro cursor. Ahora voy a tomar un punto desde donde quiero iniciar este camino. Quiero iniciar mi camino a partir de este punto. Hombre, x es 20, YX es 30. Voy a escribir, 20, YX es 30. Si quieres dibujar una línea simple, necesitas usar el comando L. Y quiero trazar una línea de este punto a este punto. Xs es 80 e Y xs es 30. Voy a pasar 18 30. También necesitamos proporcionar este tropo. De lo contrario, no podemos ver la línea. Nuestro color de trazo es rojo. Si configuro este archivo, aquí se puede ver una línea roja. En primer lugar, es necesario proporcionar el punto de partida usando comando. Con eso, necesitas proporcionar Xxs y YxS. Entonces necesitas proporcionar un espacio. Si quieres dibujar una línea, entonces necesitas usar comando, y también necesitas proporcionar Xxs y YxS Si quieres crear una línea recta solo usando dos puntos, puedes eliminar este comando. Si configuro este archivo, aquí pueden ver, nuestra línea también existe. Se puede ver que no hay cambios. También es trabajo. También es trabajo para cuando creamos una línea recta. Pero por ahora, voy a usar ommand. Y ahora quiero dibujar otra línea vertical. Voy a proporcionar un espacio, y voy a escribir X 80 y YX es 70 Si configuro este legado dibuja una línea Bdfaul es proporcionar el color negro en esta forma Si quieres cambiar el color, conoces el proceso. Es necesario utilizar la propiedad de campo. Y quiero llenar esta forma de color verde. Si configuro este archivo, puedes ver que está convertido en color verde, y ahora creo otra línea a este punto. Voy a proporcionar un espacio, y voy a usar el comando de línea A, valor X es 40 y el valor Y Xs es 80. Si configuro este archivo, se puede ver que dibuja una línea desde este punto hasta este punto. Se puede crear cualquier tipo de línea diagonal. No es obligatorio crear siempre una línea recta. Se puede pensar que es bastante similar al elemento de polilínea. De igual manera, para completar esta forma, es necesario proporcionar el último punto. Simplemente, si quiero terminar esta forma, solo necesito escribir 20 y 30. Si configuro este archivo, ahora puedes ver que está completa la forma. Si no desea proporcionar el punto final, puede usar Z. Si configuro este archivo, puede ver el resultado similar. No hay cambios. Si quieres terminar esta forma desde este punto, solo puedes eliminar los valores y establecer el archivo. Ahora puedes ver que está completa nuestra forma a partir de este punto. Z significa comando de ruta cruzada. Si quieres cerrar alguna ruta, podemos usar el comando Z. Ahora voy a presentarles nuevo comando H y V. H significa línea horizontal, V significa línea vertical. Aquí puedes ver la línea, necesitamos proporcionar dos coordenadas para crear la línea, Xxs e YxS Sabemos que solo necesitamos crear una línea recta. Para ello, no necesitamos aportar este último punto. Podemos usar solo punto horizontal. Voy a quitar el comando y reemplazarlo con el comando H. Si configuro este archivo, aquí puedes ver que no hay cambios. Se trata de crear una línea de 20 píxeles a 80 píxeles. Si aumento el valor, 90 píxeles y configuro el archivo, ahora puedes ver que es cambiar nuestra forma. El comando H solo funciona para el lado horizontal. Entonces voy a resetear esta forma, y ahora voy a mostrarte el comando V. Para ello, no necesitamos proporcionar Xxs que necesitamos proporcionar Yxs Déjame mostrarte Foster tipo V, y ahora quiero trazar una línea 30-90 punto Entonces voy a escribir V 90. Si configuro este archivo, ahora puedes ver, es aumentar el tamaño de la línea verticalmente, y ahora quiero crear una forma rectangular. Voy a proporcionar otro punto H punto Mint Xs, H 20. Si configuro este archivo, ahora puedes ver, es crear un rectángulo perfecto y nuestro comando ZT automáticamente completa automáticamente esta forma, y nuestro comando Zt siempre crea una línea recta. Z significa comando de ruta cerrada. Déjame explicarte todo esto una vez más. Primero, debes tomar la etiqueta Path. En lugar de la etiqueta de ruta, es necesario usar una propiedad especial, D. D significa dibujar. Dentro de esta D , primero, es necesario usar comando. Es necesario especificar el punto de inicio a partir de este comando N. Si no proporcionas comando, no va a dibujar nada para dibujar una línea, puedes usar comando. Después del comando, debe proporcionar el acceso X y el punto de acceso Y. De lo contrario, puede usar comando horizontal y comando vertical. Por último, necesitas usar el comando Z, el comando Mans close Path, yo voy a cerrar tu camino. Espero que ahora te quede claro. Gracias por ver este video. 11. Tutorial de elementos de ruta de SVG parte 2: Me alegro de verlos de vuelta chicos. Este es nuestro segundo elemento VG Path relacionado con el video En este tutorial, vamos a aprender sobre los comandos de curva. Como te dije antes, tenemos que decir cuatro tipos de comandos en el elemento path, Lane command, que completamos en nuestro video anterior. Y en este tutorial, vamos a aprender sobre cúbicas y las curvas más bajas cuadráticas. Para crear una curva de Vic, tenemos dos comandos, C y S. Y para curva cuadrática, tenemos también dos comandos, y T. Así que primero, intentemos entender podemos crear curvas cúbicas bezier Aquí puedes ver dentro de mi viewport, puedes ver un trazado curvo y tenemos dos curvas en este camino Una curva es de bajista y otra curva es de alcista Para crear una ruta, primero necesitamos dos puntos, partida y punto final. Supongamos que el rojo es nuestro punto de partida y lu es nuestro punto final. Creamos esta curva usando curvas cúbicas de bezier. Para estos, necesitamos dos puntos para crear esta curva. En nuestro primer punto verde, necesitamos proporcionar valor de acceso X y valor de Y xs. Además, en nuestro segundo punto verde, necesitamos proporcionar el valor de acceso X y el valor Y cess y reconocemos este punto con el comando C. S significa curvas Cub. Entonces, cuando creas un Punto, se crea automáticamente una curva. No va a probar el punto, sino que va a seguir el punto, y se puede controlar la profundidad de la curva usando el punto YXS Solo necesitas recordar entre el inicio y el punto final, necesitas proporcionar dos puntos de curva para crear un QV ser curvas, y tenemos que escribir un comando así Primero, necesitamos tomar medios de punto móvil, y necesitas definir el punto de partida usando XXs y YxS Aquí puedes ver nuestro XX es 15 y YxS es 50, y como puedes ver en color azul, este es nuestro punto final. 70 y 50 Entre el punto de inicio y el punto, necesitamos usar el comando C para usar QV ser, y creo nuestras primeras coordenadas verdes 0.20 70 Significa Xs es 20 e Y xs es 70. A continuación proporcionamos otro punto de bordillo. El exceso es 50 y el eje Y es 30, y necesitas dar espacio entre estas dos coordenadas de bordillos, y puedes crear ambos puntos al alza, de lo contrario a la baja Es totalmente depender de ti. Lo más importante es, es necesario crear dos puntos. Déjame mostrarte otro ejemplo de curvas cúbicas de bezier. Aquí puedes ver que creamos los bordillos molestos hasta el punto de partida Para ello, primero tenemos punto de partida y punto final, y necesitamos otros dos puntos para crear esta curva. Veamos lo práctico, ¿cómo podemos crear curvas cúbicas de bezier Aquí puedes ver lado a lado, abro mi Visual Studio Creator y mi navegador usando la extensión del servidor life, y ya creé el documento TML Dentro del documento EstiML, creo una imagen SVG y creo una estructura de cuadrícula para entender los atributos Primero, voy a crear una etiqueta Path, y quiero usar el campo Pbatynun Voy a escribir fiel igual a dentro de la cita monja. Quiero calificar trazo para mi camino. Voy a usar la propiedad de trazo, igual a la tasa y dentro del atributo D, y quiero comenzar mi trazado usando herramienta de movimiento, alabo AM. Nuestro valor XX es diez y nuestro valor Y xs es 60. Este es el punto de partida de nuestro camino y también necesitamos proporcionar el punto final. Doy espacio y voy a escribir 60 60. Si configuro este archivo, aquí puedes ver es dibujar una línea y déjame aumentar la línea en xxx. Quiero terminar esta línea en este punto. Entonces voy a incrementar el valor XXS 80. Si configuro este archivo, ahora puedes ver que aumenta el tamaño de la línea. Y ahora quiero tomar una curva entre estos dos puntos. Entonces, entre el punto inicial y el punto final, necesario tomar un comando que es C y C debe ser capital. Hasta C, necesitamos proporcionar el punto. Voy a usar 20 Xs y el punto Ys es 70. Si configuro este archivo, se puede ver que la línea se ha ido. Debido a que usamos la curva QV, por lo que necesitamos proporcionar dos puntos Entonces después del espacio, voy a crear otro punto, 50 y 30. Si configuro este archivo, ahora puedes ver la curva. Aquí, se puede ver que crea dos curvas en este punto y en este punto. Necesitamos aportar dos puntos para crear esta curva. Si aumento el valor de YxS 70 a 90 y configuro este archivo, ahora puedes ver que crea una curva mucho más profunda Si disminuimos la segunda curva, YX es valor, cero, cero y establecemos este archivo, como puedes ver, nuestra segunda curva es más profunda en la parte superior No sólo eso, podemos usar valores menos. Si utilizo el valor menos -40 y configuro este archivo, ahora puedes ver que va más profundo en la parte superior. Ahora está claro para ti crear una curva QV, necesitamos dos coordenadas No sólo eso, podemos crear una curva de un lado. Déjame mostrarte eso. Si utilizo YxS ten para nuestro primer punto, de manera similar, si uso YX diez para nuestro segundo punto y configuro este archivo, ahora puedes ver que tiene una curva de un lado Si quieres crear dos curvas usando una ruta, entonces necesitas usar otro comando, que es un comando y nuestro comando siempre funciona con nuestra curva cúbica. Comando Media C. Primero, déjame mostrarte el ejemplo. Aquí puedes ver una trayectoria curva. Aquí utilizo dos curvas bezier cúbicas en una sola trayectoria. Entonces, de manera similar, primero, tenemos un punto de partida y un punto final. Pero como se puede ver, hay otra curva. Pero como saben, para crear nuestra primera curva, necesitamos dos atributos, y necesitamos escribir command algo así. Después de crear esta curva, quiero crear otra curva usando el mismo camino. Para ello, necesitamos usar comando. Si usamos comando, no necesitamos proporcionar el punto de partida. Simplemente, necesitamos escribir las coordenadas finales, y no es necesario proporcionar dos coordenadas como el comando C. Simplemente, necesitas escribir las coordenadas del punto negro, y tenemos que escribir algo como este código. Después del comando C, necesita usar comando. Primero escribo comando final y entre S y Nommand, necesitamos proporcionar el punto de curva única Veamos la práctica cómo funciona. Una vez más, vuelvo a mi coordinador de Visual Studio. Primero, voy a cambiar los puntos del auto, C 20 y CyxS 18 Y en nuestro segundo punto, XX es 40 e Y xs es 80. Si configuro este archivo, puedes ver que se ha creado la curva a la baja Y si disminuyo el punto final de esta curva, 80 a 50 y pongo este archivo, ahora se puede ver la curva. Es crear una forma de arco perfecta. Como te dije, quiero crear una nueva curva con eso, así que voy a usar comando. Y para nuestra segunda curva, quiero crear punto aquí. Por lo tanto, el valor X es 70 y el valor de Y xs es 20. Voy a escribir 70 20. También necesitamos proporcionar el punto para esta curva. Voy a usar 90 60. Si configuro este archivo, ahora puedes ver la curva. Espero que ahora te quede claro, ¿ cómo podemos crear dos curvas cúvicas en un camino Si desea crear una curva cuv, solo unidad para usar el comando C. Si quieres crear dos curvas cuv, entonces necesitas usar comando Y nuestro comando solo funciona con curva QV, no curva cuadrática Simplemente, necesita proporcionar el punto final y entre ellos, debe proporcionar el punto de curva. Eso es. Entonces hablemos de curvas cuadráticas más baser. Este es el ejemplo de la curva cuadrática más baja. Primero, tenemos que proporcionar el punto de partida, luego tenemos que proporcionar el punto final. La principal diferencia entre la curva cuadrática y la curva QV está en la curva cuadrática, necesita proporcionar un punto de curva, algo así como este punto verde, y luego se va a doblar automáticamente de acuerdo con este Veamos el ejemplo práctico cómo funciona su trabajo. Tomemos un valor cuadrático arriba de esta línea. Voy a escribir XS es 20 e Y Xs es 30. Si configuro este archivo, aquí puedes ver que creó una curva cuadrática Si desea crear una curva más alta, entonces necesita disminuir el valor de YxS valor YX es diez. Si configuro este archivo, se puede ver más curva superior. Si desea crear una curva bajo esta línea de estado, solo unidad para aumentar el valor de Y xs 80. Si configuro este archivo, ahora puedes ver, es crear forma de arco debajo de la línea. Si quieres mover este punto de curva de este lado a este lado, solo unidad para aumentar el valor XXS 40 Si configuro este archivo, se puede ver que se mueve el punto de la curva. Esta es nuestra curva quadaty. Esta es nuestra curva cuadrática. Básicamente, es necesario proporcionar un punto entre el punto de inicio y el punto final, y necesita usar el comando Q para especificar este punto. Si desea crear dos curvas quadaty en una ruta, entonces necesita usar el comando T. Déjame mostrarte cómo funcionan los comandos T. Hercac en una sola trayectoria, creamos dos curvas cuadráticas Primero, necesitamos escribir un punto de partida y un punto final. Entre el punto inicial y el punto final, necesitamos escribir el punto Q para crear la primera curva y usted conoce el proceso. Si queremos crear nuestra segunda curva cuadrática, simplemente en un punto final y no necesitamos proporcionar ningún punto de curva Según el punto verde, va a crear la misma curva en sentido opuesto. El principal beneficio es que no necesitamos proporcionar el segundo punto de curva. Para el punto verde, necesitamos usar el comando Q y para el punto púrpura significa punto final, necesitamos usar el comando T. Veamos la práctica como funciona. Así que una vez más, vuelvo a mis visitas a tu editor de bacalao. Entonces primero, voy a cambiar las coordenadas Q 30 y 30. Si configuro este archivo, puedes ver que crea una forma de arco al revés. Entonces simplemente solo necesitamos usar el comando P porque necesitamos crear otra curva cuadrática Entonces después de T, necesitamos proporcionar el punto Xs y YXS. XXs voy a tomar 90 y de YxS voy a tomar 60 Yo puse este archivo, aquí se puede ver la curva. Se puede ver que crea automáticamente esta curva solo para tomar N punto, no punto de curva. Este comando D funciona con coordenadas de comando Q. Sin el comando Q, no va a funcionar. Es solo trabajo con curva cuadrática, no curva QV. Espero que ahora te quede claro qué es la curva QV y qué es la curva cuadrática En la curva QV, es necesario proporcionar dos puntos de coordenadas y en curva cuadrática, necesita proporcionar solo un punto de coordenadas Esta es la principal diferencia entre estas dos curvas. Gracias por ver este video, nos vemos en el siguiente tutorial. 12. Tutorial de elementos de ruta de SVG parte 3: Hola, chicos. Este es nuestro tercer tutorial sobre el elemento de ruta SVG. Y en este tutorial, vamos a aprender sobre el comando arc. Como te dije anteriormente en este tutorial, tenemos cuatro comandos diferentes en etiqueta de ruta SVG, y aprendimos comando de línea, y aprendimos comando de línea bezier cúbica y curva cuadrática de Bzier Entonces en este tutorial, vamos a cubrir arcommand. Para crear un arco, necesitamos usar un comando. Con eso, necesitamos usar algunas propiedades múltiples. Veamos las propiedades. Aquí puedes ver arco en nuestro cuadro de vista. Se ve como un círculo central. Para crear un arco, debe tener dos puntos punto de inicio y punto final, y necesitamos proporcionar el valor Xss y el valor YxS para definir su posición Entre el punto de inicio y el punto final, necesitamos usar el comando A. Un comando de arco medio. Con comando de arco, necesitamos proporcionar punto cess y punto YxS Este punto va a definir el radio de este arco significa profundidad del arco. Si movemos el punto del radio más al punto central, entonces va a crear la mayor profundidad al arco. Entonces veamos el comando. En primer lugar, hay que tomar el mando, significa mover el punto. Entonces necesitas proporcionar el valor de Xccess del punto de partida y el valor YXS y el valor de exceso de punto y el valor YX Entre estos dos puntos, necesitamos escribir el comando arc. Primero, necesitamos proporcionar el valor cess y el valor YXS para el punto de la curva, y luego debemos proporcionar los tres parámetros diferentes Entonces intentemos entender los parámetros. Aquí puedes ver con comando de arco otros tres parámetros. Llame al primer parámetro X exceso de rotación. Puede rotar nuestro círculo desde el punto X de exceso. Básicamente, no usamos este punto. La mayoría de las veces usamos valor cero, y tenemos que tener mucho cuidado con este punto. Nuestro siguiente parámetro es la bandera de arco grande. Con ese punto, podemos definir el tamaño del círculo. Por defecto, viene con cero significa arco pequeño y viene con dos valores, uno o cero. Si utilizo un valor, va a aumentar el tamaño del arco, y nuestro último parámetro es suit flag. Por defecto, su propiedad es una. Y también viene con dos valores, cero o uno. Uno quiere decir que se construirá donde queremos construir. Pero si usamos valor cero, algo así, entonces va a crear el arco en dirección opuesta. No es necesario cambiar el exceso de valor o valor x. Bhasically solo necesitas jugar con el parámetro S flat. Va a crear tu arco en dirección opuesta si jugamos con este parámetro. Veamos lo práctico e intentemos crear el arco en nuestro navegador. Aquí puedes ver, ya creé un documento Stal, y ya creé Dp que clases contenedor. Tomo un VGTag dentro de esta profundidad y ya puse vista box cien por cien Y también creamos un grano temporal para entender los atributos Dibujemos un arco. Como pueden ver, ya tomo un elemento path y dije color rojo para el trazo de trazado, y para color de campo, dije ninguno. Como saben, primero necesitamos usar t más profunda para trazar una línea. Primero, necesitamos proporcionar el punto móvil y el punto final. Y necesitamos usar AM para iniciar el punto de movimiento. XX es diez y YXS es 50, espacio, y ahora voy a proporcionar el punto final XXS es 90 y YXS es 50. Se va a crear una línea de este punto a este punto. Si configuro este archivo, aquí se puede ver la línea. Ahora voy a crear el arco entre punto de inicio y punto final. Para ello, necesitamos usar el comando A. Para crear un arco perfecto, necesitamos tomar punto medio. Básicamente, quiero decir que quiero crear un punto en esa posición. Es necesario proporcionar XXS 50 YXS 30. Si configuro este archivo usando nada en nuestra calificación, aquí solo proporcionamos un parámetro, necesitamos proporcionar otros tres parámetros. Primero, necesitamos proporcionar el parámetro de rotación X, y lo voy a poner a cero para el parámetro flag grande, voy a tomar cero, y para flag swift, voy a tomar uno. Si configuro este archivo, aquí puedes ver que crea un arco. Podemos cambiar la profundidad del arco usando el valor YXS. Si reduzco este valor, y voy a decir diez y configuro este archivo, aquí se puede ver que redujo la profundidad del arco. Si digo, YX es cero y establece este archivo, aquí lo puedes ver simplemente dibuja una línea Y si se quiere aumentar la profundidad, necesitamos aumentar el valor YS. Si lo configuro 50 y configuro este archivo, aquí se puede ver la profundidad del arco. Ahora vamos a aprender qué es el parámetro de bandera grande. Aquí puedes ver que nuestro valor de bandera grande es cero. Si lo configuro uno y configuro este archivo, se puede ver que el arco ha crecido. Solo necesitas recordar que cero significa arco más pequeño y uno significa arco más grande. De ahí viene el parámetro flag. Tiene dos valores, uno o cero. Puede cambiar la dirección del arco. Si lo pongo a cero y pongo este archivo, se puede ver el arco en dirección opuesta. Además, voy a cambiar este valor a cero. Si configuro este archivo, ahora puedes ver, si quieres mostrar el arco de dirección opuesta, entonces solo necesitas cambiar el valor de sweet plug. Por ahora, voy a configurarlo uno y voy a configurar este archivo. Ahora quiero crear otra línea con este arco. Quiero crear una forma de Pi usando este arco. Quiero crear un punto en esta posición. Después de este punto final, voy a dibujar una línea usando comando. Entonces para escribir, y voy a usar XXS 50 y yx es 80. Si configuro este archivo, aquí puedes ver que crea una línea, y ahora quiero unir la línea final al punto de partida. Para ello, voy a usar el comando Z. Como usted sabe, Z significa cerrar comando path. Si configuro este archivo, aquí puedes verlo cerrar nuestro camino, y quiero llenar esta forma de Y de color verde. Som al tipo se siente verde. Si configuro este archivo, aquí puedes ver la forma de Pi y ahora voy a jugar con estos parámetros. Si cambio el parámetro de bandera de barrido, cero y configuro este archivo, aquí puedes ver que crea forma como avión bombardero sigiloso Si cambiamos el valor de bandera grande uno y establecemos este archivo, aquí puedes ver que invierte la forma Pi Aumenta el tamaño del arco en dirección opuesta. Si cambias el valor de bandera de Sup uno y estableces este archivo, aquí puedes ver que ha crecido hacia arriba. Aquí puedes ver usando un comando, puedes crear diferentes tipos de forma, necesitas jugar con sus parámetros. Ahora voy a jugar con este parámetro, ces rotación. Pero antes, voy a disminuir el tamaño del arco. Voy a establecer este parámetro. Voy a poner este parámetro a cero. Ahora está de vuelta a su posición normal, y ahora voy a cambiar el valor de rotación XS. Entonces primero, voy a disminuir el valor del arco YX 30, y luego voy a aumentar el valor del parámetro de rotación 20 Si configuro este archivo, ahora puedes verlo rotar nuestro arco 20 grados. Si cambio este valor ocho T y configuro este archivo, es reaccionar muy diferente. Siempre establecemos el valor de rotación cero. Puedes jugar y experimentar con este parámetro. Espero que ahora te quede claro qué es el comando arc en la etiqueta Path. Gracias por ver este video, nos vemos en la siguiente tutoría 13. Tutorial de elementos de texto SVG: Hola, amigos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre un nuevo elemento, que es el texto. Si escribes algo en una etiqueta SVG, necesitas usar el elemento de texto. Entonces veamos cómo funciona. Aquí puedes ver este es nuestro punto de vista. Y dentro de este viewpoart, escribo un texto lowdown Para escribir este texto, necesitamos dos atributos XXs e YxS y el texto comienza desde la posición exacta de unión Comienza la parte inferior del texto, y hay que recordarlo. Entonces veamos la práctica cómo funciona. Aquí puedes ver, lado a lado, abro mi coitor de Visual Studio y mi navegador usando la extensión del servidor de labios, y ya creé el documento de estimación, y dentro del documento de estimación, creo un contenedor Deep plus, y dentro del contenedor, dibujo asg image viewport cien También creo una estructura arenosa para entender los atributos Ahora voy a crear nuestra etiqueta de texto. Voy a escribir texto. Entonces este es nuestro textag dentro del textag voy a escribir algún texto Lum tres Si usas Visual Studio Ceditor, ya estás familiarizado con esta racha, y ahora voy a proporcionar el atributo Xxs y YxS XX es igual a 30 y YX es igual a 50. Si configuro este archivo, aquí se puede ver el texto. Y si te das cuenta, puedes ver que el texto comienza desde la línea base YxS y también la línea base XX Sin YxS y xxx, tenemos otro atributo llamado text anchor Voy a llamar a este atributo, ancla de texto. Usando este atributo, podemos centrar nuestro texto horizontalmente. Si quieres alinear tu texto, entonces es jugar el papel vital. Tenemos tres tipos de Belo en este atributo de anclaje de texto. Inicio, medio y final. Déjame mostrarte. Si escribo medio, y configuro este archivo, aquí se puede ver, es texto de medios de acuerdo a este punto porque nuestra Xs es 30. Para entenderlo mejor, voy a quitar este texto. Si configuro este archivo, ahora se puede ver que alinea toma de acuerdo al valor X 30. Entonces es alinearse toma de acuerdo a este punto. Si utilizo alineación final, voy a escribir, y establecer este archivo, ahora se puede ver que hace tomas desde el punto de partida, media X 30 e Y 50. Si utilizo el valor por defecto solo iniciamos, y configuramos este archivo. Como se puede ver, se inicia desde el valor predeterminado. Si quieres colorear tu texto, puedes usar fill property. Déjame mostrarte. Llenar igual a la tasa. Si configuro este archivo, se puede ver que el color del texto es tasa y ahora voy a usar propiedad CSS con la etiqueta de texto. Quiero darle una clase a esta etiqueta, clase igual a texto. Voy a llamar a esta clase dentro de la etiqueta de estilo, punto, dentro del Cariss y ahora quiero darle un trazo a las tomas Voy a usar la propiedad de trazo. Azul. Un trazo es azul. Si configuro este archivo, se puede ver el trazo azul. No solo eso, podemos usar esta propiedad de campo dentro de esta sección de estilo. Quiero cortar esta propiedad, y voy a usar pelo. Si configuro el archivo, se puede ver el mismo resultado. Si quieres que el color del campo sea transparente, solo tienes que escribir ninguno aquí. Y establecer el archivo. Ahora se puede ver en el trazo en el texto y su color de campo es transparente. Por ahora, voy a usar color de campo negro, y no quiero ningún trazo, así que voy a escribir ninguno. Ahora voy a usar otro texto relacionado con la propiedad CSS. Al igual que el tamaño de la fuente, déjame mostrarte. El tamaño de la fuente es de diez píxeles. Si configuro este archivo, se puede ver el tamaño de la fuente. Se ha reducido nuestro tamaño de texto. Si quieres usar una familia de fuentes diferente, sí, podemos. Déjame mostrarte. Y voy a usar la familia de fuentes Impact. Im EAC t. Si configuro este archivo, se puede ver el estilo de fuente. Supongamos que tenemos un texto diferente, así que quiero cambiar el texto, y voy a insertar un nombre. Agrega uno Mío. Ahora se puede ver que tenemos que dos palabras, anuncio uno y Minh ahora quiero romper esta línea. Quiero Mina palabra a continuación que agregar uno. Para estos, no podemos usar la etiqueta break como CSS. Necesitamos usar una etiqueta diferente llamada T span. Déjame mostrarte. Voy a escribir después de agregar un Tspan voy a mover esta palabra Minh dentro de esta etiqueta Si configuro este archivo, se puede ver que no hay diferente. Ahora quiero alinear a este Minh. Para ello, tenemos a dos propiedades, DX y DY. Entonces primero, voy a usar la etiqueta DY. La etiqueta DY trabaja en vertical. Podemos alinear verticalmente el texto usando la etiqueta DY. Como pueden ver, nuestro valor Y es 50, así que voy a teclear 30 aquí. Ahora se puede adivinar que el Minjuor podría estar moviéndose hacia arriba desde la línea de base, algo aquí, pero no va a funcionar así Si configuro este archivo, puede ver, se mueve hacia abajo. No va a contar este valor desde el área de la ventana gráfica. Se va a contar el valor desde la línea base del texto. Mín. 50 píxeles. Entonces movamos 30 píxeles de la línea base, diez, 20 y 30. Voy a sustituir el valor con diez píxeles. Si configuro este archivo, ahora puedes ver el resultado. El atributo DI trabaja relativamente desde la posición basal, y de manera similar, trabajo de valor Dx. Déjame mostrarte. Dx igual a 20. Si configuro este archivo, puedes ver el resultado. Se mueve 20 píxeles a la derecha de su lugar porque su posición exacta está aquí. A partir de este punto, movió 20 píxeles a la derecha. Si quieres alinear esta palabra de acuerdo con esta palabra, necesitas usar el valor menos. Déjame mostrarte. Si utilizo -25, y configuro el archivo, se puede ver la alineación Ahora es perfectamente medalla alineada. Si quieres controlar la alineación de subtexto, necesitas usar los atributos DY y Dx con el pentag, no solo eso, puedes establecer clase aquí Voy a ponerle clase. Clase Minh. Ahora voy a llamar a esta clase dentro esta etiqueta de estilo, Minh. Dentro de la resistencia Cali, primero, voy a cambiar el color del relleno. Azul. Si configuro este archivo, se puede ver el color. Podemos usar diferentes propiedades CSS para la etiqueta de subtexto. No podemos usar la etiqueta VA para dividir esta línea. Y si quieres usar posición absoluta para este texto, sí, puedes. Déjame mostrarte. Apenas en para quitar D. Como voy a cambiar el X v. Si configuro este archivo, se puede ver el texto. Yx es diez, según la posición absoluta, significa la posición Ve Vox X es 25. Si aumento el valor YXS, 30 y luego configuro el archivo Ahora está claro para ti, cómo funciona. Si utilizo simplemente el atributo SS y YSS con T span, entonces es trabajo como posición absoluta CSS Si quieres usar el valor DI y DX, entonces funciona como posición relativa CSS. Podemos usar múltiples propiedades CSS con eso como espacio posterior, fuente a ella, etcétera Ahora te queda claro qué es DTC en SVG y cómo podemos usarlo. Gracias por ver este video. 14. Tutorial de elementos de imagen SVG: Hola amigos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre el elemento imagen, ya que usamos la etiqueta IMG en SDM para insertar una Del mismo modo, utilizamos etiqueta de imagen en SVG para insertar una imagen. Veamos qué atributo necesitamos para mostrar una imagen dentro de la etiqueta SVG. Supongamos que este es nuestro punto de vista, y quiero mostrar esta imagen de tigre dentro de este mirador. Primero necesitamos punto XS y luego necesitamos YXsPoint luego necesitamos ancho de imagen y alto de imagen Si no proporcionamos XX Zulu y YX Zu por defecto, se inicia con punto cero Del mismo modo, si no proporcionamos altura y anchura, por defecto, se apilan cero. Entonces no podemos ver la imagen. La propiedad de aumentar el ancho es muy importante en la imagen SDG. Empecemos la práctica y veamos cómo funciona. Aquí, puedes ver, lado a lado, abro mi codtor de visual studio y mi navegador usando la extensión de servidor if, y ya creo un documento de EstiML Dentro del documento EstiML, creo un contenedor profundo plus, y dentro de este profundo, tomo una etiqueta de peluca con caja de vista 100 por cien Para entender los atributos, creo una estructura de cuadrícula. Primero, voy a tomar etiqueta de imagen. Después dentro de la etiqueta de imagen, y ahora voy a usar la propiedad hide and width para esta imagen. Con igual a 100 altura igual a 100 y ahora necesitamos proporcionar el baño de imagen. Para ello, tenemos un atributo especial Xink HRDF. Déjame mostrarte. Primero, necesitamos escribir pequeño enlace X, luego dos puntos HRDF igual a dentro de los códigos dobles, necesitamos proporcionar la ruta como etiqueta de imagen DML Aquí se puede ver en mi directorio de trabajo actual, imagen punto JPG. Voy a usar esta imagen. Entonces, para escribir imagen. Dot JPG. Si configuro este archivo, aquí puedes ver la imagen dentro de mi viewbox Establecí esta imagen de acuerdo a la vista boox mayor ancho. Si reduzco el ancho, algo 70 y configuro este archivo, se puede ver el resultado. Se necesitan 70 píxeles de ancho. Si notas, puedes ver, según su tamaño, también es cambiar nuestra altura. Voy a usar 30 píxeles de ancho. Establezca este archivo. Ahora puedes verlo escalar nuestra imagen. Si quieres cambiar la posición de la imagen usando XXs y YxS, sí, puedes. Déjame mostrarte. Voy a usar XX propiedad, X igual a 30 Si configuro este archivo, aquí se puede ver la imagen comenzar desde X 30 píxeles. Esta posición de imagen se trabaja relativamente, no absolutamente. Déjame mostrarte. Si uso YxS YX es igual a diez y configuro este archivo, aquí se puede ver, está relativamente movido diez píxeles en YXS W esta etiqueta de imagen, podemos usar etiqueta a tope, círculo, rectángulo, etcétera Déjame mostrarte. Ahora quiero trazar una línea sobre la imagen de este punto a este punto. Para esto, voy a usar una etiqueta de culata. Voy a usar el atributo draw, D, D igual dos dentro de los códigos dobles, diez, diez píxeles, coma, 60 píxeles Es decir este punto, quiero dibujar una línea de este punto a este punto, nuestro valor de punto X final es de 90 píxeles y nuestro valor de punto i es de 60 píxeles, y también necesitamos proporcionar un color de trazo a esta ruta. De lo contrario, no podemos ver el camino. Voy a usar la propiedad de trazo. Trazo igual al rojo. Si configuro este lado, se puede ver la línea se superpone a la imagen. Puedes usar cualquier etiqueta con eso. Espero que te guste este video, y te quede claro cómo podemos usar la imagen en BG. Gracias por ver este video. 15. Tutorial de propiedades de trazos de SVG: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre las propiedades del trazo. Entonces, sin perder el tiempo, veamos todas las propiedades del trazo. Aquí puede ver, en general, tenemos siete propiedades totales, trazo, ancho de trazo, opacidad de trazo, brecha de línea de trazo, unión de línea de trazo, matriz de trazos trazo y trazo opuesto Entonces en este tutorial, vamos a aprender estas siete propiedades. Entonces comencemos la práctica y tratemos de entender cómo funciona. Entonces, finalmente, estoy de vuelta a la pantalla de mi computadora. Aquí se puede ver lado a lado, abro mi Visual Studio Creator y mi navegador usando la extensión de servidor if, y ya creé documento TML Y dentro de mi etiqueta SVG, ya creé una forma rectangular sin trazo. Como puedes ver, su color de campo es verde. Así que comencemos el uso de propiedades. Nuestra primera propiedad es el accidente cerebrovascular. Entonces voy a usar esta propiedad. Trazo y nuestro color de trazo es rojo. Si configuro este archivo, aquí puedes ver un trazo rojo. Usando nombre de color, podemos asignar un color de trazo. No sólo eso, podemos usar hexa Valu RGvvalu déjame mostrarte. Ahora voy a abrir una nueva pestaña y voy a buscar color xa Valu. Aquí puedes ver un sitio web, curso de color TL. Voy a hacer click en este sitio web y aquí puedes ver muchos colores. Si doy click en esta sección de gráfico, aquí puedes ver muchos colores con su xa Valu y voy a usar algo así como este color naranja. Si hago clic en este color, es redireccionar a una página, y aquí puedes ver el valor hexa Si copio este valor y lo uso aquí y si configuro este archivo y te muestro mi página estimal, aquí puedes ver el color de trazo naranja De manera similar, podemos usar valor RGV para nuestra propiedad de trazo Déjame mostrarte. Si vuelvo a mi página de color estimable, aquí puedes ver algunos colores. Voy a usar esta variante de color azul para mi trazo. Voy a copiar este valor, y voy a empatar R GB. Entonces voy a sustituir este valor. Y si guardo este archivo y te muestro mi navegador, ahora puedes ver el trazo azul. Lo siento, no es visible correctamente. Entonces hagámoslo más visible. Entonces voy a usar variante más profunda de este color. Y si guardo este archivo, ahora se puede ver el trazo azul profundo. Solo quiero decir que podemos usar tres tipos de valores, RGV, código hexa y nombre de color Y ahora les voy a mostrar nuestra próxima propiedad, que es la hierba de trazo. Voy a teclear trazo Nosotros. Usando esta propiedad, podemos controlar el grosor de este trazo. Aquí, voy a teclear tres. Si configuro este archivo, se puede ver el grosor del trazo. Si aumento el valor, aumenta nuestro grosor de trazo. No sólo eso, podemos usar valor decimal, 0.3. Si configuro este archivo, ahora puedes ver el grosor del trazo. Ahora se ve muy delgada. Por ahora, voy a usar dos valores. Y a continuación nuestra tercera propiedad es la opacidad de trazo. Tipo de suma, opacidad de trazo. Con esta propiedad, podemos controlar la transparencia de nuestro trazo. Si uso valor cero y configuro este archivo, ahora es completamente transparente. Si utilizo un valor, ahora es completamente visible. 0-1, podemos usar cualquier valor dh. Déjame mostrarte raíz sonora 0.5. Si configuro este archivo, ahora puedes ver que es semitransparente. Ahora puedes ver el fondo de color verde a través del trazo porque es 50% transparente. Por ahora, voy a usar un valor. Ahora nuestra siguiente propiedad es la brecha de línea de trazo. Para este ejemplo, necesitamos crear una línea. Vamos a crear una línea usando la etiqueta de línea. Línea. Voy a dar una clase a esta línea, línea de clase. Ya aprendimos en nuestros videos anteriores cómo podemos trazar una línea. Necesitamos usar X un valor. Primero, necesitamos proporcionar el valor X uno X uno igual a 20 e Y uno, igual a 20. Voy a iniciar esta línea desde este punto, y ahora necesitamos proporcionar el punto final de esta línea. Voy a escribir X dos igual a 80 e Y dos igual a 20. Ahora voy a usar esta clase de línea. Voy a copiar el nombre de esta clase y voy a llamarlo aquí línea de puntos. Dentro de las calibraciones, nuestra primera propiedad es cierta. Y nuestro color de trazo es el rojo. Si pongo este suelo, se puede ver la línea. Ahora quiero aumentar el grosor del trazo, así que voy a usar la propiedad de peso de trazo. Voy a usar dos para este trazo. Ahora puedes ver este grosor de trazo. Ahora voy a usar nuestra siguiente propiedad, que es el límite de línea de trazo, algún tipo, trazo, límite de línea. Básicamente, el límite de línea de trazo tiene tres valores, pero cuadrado y redondo, pero es el valor predeterminado del trazo. Si configuro este archivo, aquí puedes ver que no hay cambios. Pero si utilizo valor cuadrado y configuro este archivo, ahora puedes ver que ha cambiado el trazo con un poco. Básicamente, se ha incrementado el ancho de línea. Déjame explicarte lo que pasa aquí. Aquí puedes ver una línea de trazo usando la propiedad de tope. Supongamos que nuestro ancho de trazo es cuatro, puedes ver la línea base en color negro, nuestro trazo, dos píxeles por encima de la línea negra y dos píxeles abajo de la línea negra. Pero si uso propiedad cuadrada, aquí se pueden ver dos píxeles arriba y dos píxeles hacia abajo. Con eso, agrega dos píxeles ambos del lado. Es en general aumentar la línea con cuatro píxeles, dos píxeles en el lado iluminado y dos píxeles en el lado derecho. Pero si uso pero propiedad, no le agrego trazo tanto del lado. Esta es la diferencia básica entre propiedad a tope y cuadrada, y nuestra última propiedad es redonda. Si utilizo esta propiedad y guardo este archivo, ahora puedes ver la esquina del trazo, esta redondeada. Está claro para ti. Básicamente, la propiedad del paisaje trabaja en los bordes. Hablemos de nuestra siguiente propiedad, que es la combinación de líneas de trazo. Las combinaciones de líneas significan donde ambas líneas se unen entre sí. Podemos usar diferente tipo de efecto en esta unión. Vamos a usar la propiedad. Entonces para escribir, trazo, Unión de líneas. Básicamente, tenemos un valor total de tres para esta propiedad. Mire redondo o Biblia. Primero, voy a usar mitra. Si configuro este archivo, aquí puedes ver que no hay cambios porque es el valor predeterminado. Pero si utilizo valor redondo y configuro este archivo, y ahora puedes ver el efecto redondo en cada esquina nuestro tercer valor es Bb. Déjame mostrarte. Si configuro este archivo, ahora se puede ver que hay un pequeño corte en sus esquinas. Si utilizo este Zell, va a cortar los bordes de unión. Podemos usar esta propiedad solo en juntas, no en los bordes de línea. Ahora voy a usar nuestra propiedad six, que es strobe array Así que para escribir matriz estroboscópica. Si recuerdas este estilo SS boers como punteado, dst, etcétera. Del mismo modo, el trabajo de propiedad de matriz de escritorio de trazo. Podemos crear el efecto escritorio, usar esta propiedad. Déjame mostrarte. Supongamos que creo un dst de dos píxeles y luego necesitamos proporcionar el tamaño de la brecha y nuestro tamaño de brecha es supongamos tres píxeles. Si configuro este archivo, ahora se puede ver el des throw. Supongamos que todos los puntos son de dos píxeles y todos los huecos son de tres píxeles. Y ahora quiero aumentar el tamaño de la brecha. Quiero incrementar este valor siete. Si configuro este archivo, ahora se puede ver la distancia entre estos píxeles. También quiero aumentar el tamaño de píxel, cinco píxeles. Si configuro este archivo, ahora puedes ver el tamaño das. Supongamos que ahora quieres dos píxeles de tamaño dak y dos píxeles de tamaño de hueco. Para estos, podemos escribir este valor de esta manera, tipo dos. Si configuro este archivo, ahora se puede ver que el tamaño de píxel es de dos, también el tamaño de la brecha es de dos. De igual manera, si uso un píxel y configuro este archivo, ahora el tamaño de píxel es uno, también el tamaño de hueco es uno. No sólo eso, podemos usar el valor decimal para esta matriz d. Déjame mostrarte. Voy a usar 0.6. Si configuro este archivo, ahora se puede ver el tamaño del escritorio. Hagámoslo poco por adelantado. Por ahora, nuestro tamaño des es cinco y nuestro tamaño de brecha es dos. Una vez más, el tamaño de nuestro escritorio es de tres. Si configuro este archivo, ahora se puede ver este trazo entonces le doy otro espacio dos. Si configuro este archivo, ahora se puede ver que se ve bastante avanzado. Aquí puede ver nuestro primer tamaño de escritorio es cinco y nuestro tamaño de espacio es dos, luego nuestro segundo desize es tres y el tamaño del espacio es dos Ahora está claro para usted, cómo podemos usar esta propiedad para crear diferentes efectos de trazo. De ahí viene nuestra última propiedad, que es stroke dash ose Así que para escribir, stro dash Oset. Stroke dash oste significa que puedes mover los puntos de guión un poco hacia el lado izquierdo De lo contrario, lado derecho. Déjame mostrarte. Solo enfoque de la esquina de este rectángulo. Voy a usar una propiedad. Si configuro este archivo, ahora se pueden ver las esquinas. Es un poco de movimiento. Y ahora quiero mover este guión de tres píxeles. Si configuro este archivo, ahora se puede ver, guión y se mueve, tres píxeles de elevación. Entonces estas son nuestras propiedades de siete trazos. Nuestra primera propiedad es el accidente cerebrovascular. Podemos establecer cualquier color usando esta propiedad, y nuestra segunda propiedad es ancho. Usando esta propiedad, podemos controlar el grosor del trazo, y nuestra tercera propiedad es la opacidad del trazo Usando esta propiedad, podemos controlar la transparencia del trazo. Y usando la propiedad line join, podemos controlar los efectos de unión. Podemos usar el efecto redondo, podemos usar el efecto de corte, etcétera Y usando la propiedad de matriz de trazos, podemos crear guión en nuestro trazo, y usando la propiedad dash trastornado, podemos mover el guión. Y nuestra última propiedad es la brecha de línea de trazo. Podemos usar esta propiedad de límite de línea básicamente en líneas, no en las formas. Ahora está claro para ti, ¿cuáles son estas propiedades de trazo? Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 16. Tutorial de propiedades de relleno de SVG: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre las propiedades de campo. Veamos las propiedades. Tenemos un total de tres propiedades relacionadas con campo, relleno, filoposidad y Tratemos de explorarlo prácticamente cómo ha funcionado. Aquí puedes ver, lado a lado, abro mi coor de Visual Studio y mi navegador usando la extensión Live Server Como pueden ver, ya creo un documento TML, punto índice TML Dentro del documento EstiML, creo un contenedor D plus Dentro de este contenedor, creo una Wigtag con caja de vista de cien por cien Dentro de este igag creo una grilla para entender los atributos Entonces creo una forma de polígono. Aquí puedes ver la forma. Parecía un señor y también le doy a esta forma de polígono una clase, que es forma, y aquí se puede ver usando esta clase, le damos estilo a esta forma, trazo, color rojo, relleno de monja Si no utilizo ningún color de campo, si elimino esta palabra clave no y configuro este archivo, aquí puedes verlo llenar nuestro color de forma con negro. Esta es nuestra primera propiedad, que es llenar. Aquí podemos usar cualquier tipo de valor, valor RGV, valor hexa, nombre de otro color Por ahora, voy a usar un nombre de color, que es verde. Si configuro este archivo, aquí puedes ver, es llenar nuestra forma de color verde, y ahora voy a usar RGV Value y voy a usar color amarillo Si configuro este archivo, aquí se puede ver que llena la forma de color amarillo. Aquí proporcionamos valor RGV. De manera similar, el hexav funciona. Déjame mostrarte. Ahora voy a usar hexavalu Entonces primero, necesitamos usar has, y quiero llenar el color inicial con azul, tipo Sumo, 0000 FF. Si configuro este archivo, aquí se puede ver al chef rellenar de color azul. Hablemos de nuestra siguiente propiedad, que es la opacidad de relleno, summoTypeFll, la opacidad Podemos controlar la transparencia usando esta propiedad. Si pongo cero y pongo este archivo, aquí usted canc es completamente transparente Y si configuro uno y luego configuro el archivo, aquí se puede ver, ahora es completamente visible. 1-0, necesitamos usar puntos decimales para controlar la transparencia. Déjame mostrarte. Si uso 0.5 y configuro este archivo, ahora es semitransparente. Si quieres reducir más esta transparente, que solo teclee 0.2 y configura el archivo. Ahora es menos transparente que la anterior. De igual manera, si quieres aumentar la transparencia, solo tienes que escribir 0.9 y establecer el archivo. Puedes controlar todo lo que quieras y nuestra última y tercera propiedad es regla de llenado. Déjame mostrarte. Esta propiedad trabaja solo en diseño complejo. Quiero decir que cuando las formas se superponen entre sí funcionan. Dibujo esta compleja forma de estrella usando un solo elemento poligonal Aquí se puede ver un total de cinco picos. Pero entre toda la espiga, aquí se puede ver una forma diferente. Podemos controlar este color de forma. Podemos transparentarlo. Déjame mostrarte. Esta propiedad filual viene con dos valor, no cero Entonces primero voy a usar este valor, no cero. Si configuro este archivo, aquí puedes ver que no hay cambios porque es el valor predeterminado de la regla de campo, pero hay otro valor, que es par impar. Déjame mostrarte. Si configuro este archivo, ahora se puede ver transparente nuestra forma medial, pero no quitó todos los colores de la forma. Este es un caso de uso de la propiedad de reglas de campo. Espero que ahora te quede claro. Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 17. Tutorial de elementos de agrupación de SVG: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender elemento de agrupación. Entonces comencemos lo práctico y tratemos de entender qué es. Aquí puedes ver, ya creo un documento STML. Y aquí se puede ver un contenedor clase D. Y dentro del contenedor, creo una etiqueta SVG, y dentro del VGTag ya creo dos forma de rectángulo Nuestro primer color rectangular es verde, y nuestro segundo color rectangular es el Uulu Como pueden ver, se superponen entre sí. Y ahora quiero rotar ambos rectángulos. Para estos, voy a asignar una clase. Para nuestro primer rectángulo, nuestro nombre de clase es verde, y para nuestro segundo rectángulo, nuestro nombre de clase es amarillo. En nuestra selección de estilo, voy a crear el selector. Voy a crear el selector, punto verde. Primero, quiero rotar el rectángulo verde. Para ello, voy a usar transform property. Transformar y aquí voy a usar el valor de rotación, y quiero rotar este rectángulo 20 grados. Si configuro este archivo, aquí puedes ver que es rotar el rectángulo verde. De manera similar para rotar este rectángulo amarillo, necesitamos crear otro selector, punto yollow También voy a usar esta propiedad transform. Girar 20 grados. Si configuro este archivo, ahora puedes ver el resultado. Pero el problema es que tenemos que hacer un trabajo extra para esto. Primero, necesitamos rotar el rectángulo verde, y luego tenemos que rotar el rectángulo amarillo. Pero para resolver este problema, podemos usar el elemento de agrupación. Podemos crear tanto del rectángulo un grupo. Por ahora, voy a cortar este rectángulo y voy a usar la etiqueta de agrupación, que es la etiqueta G, G. Dentro de esta etiqueta G, voy a pegar estos rectángulos Eso es. También, voy a tomar una clase para este grupo, que es grupo. Entonces ahora es crear un grupo. No necesito escribir CSS diferente para eso. Voy a quitar un CSS, y voy a reemplazar este nombre seleccionado con grupo. Si configuro este archivo, aquí se puede ver, no hay diferente. Si cambio el grado de rotación, 30 grados y configuro el archivo, aquí se puede ver, es mover para reaccionar elemento juntos. Ahora voy a usar otra propiedad que es transform ausin Transformar asin enviado Si configuro este archivo, ahora puedes ver, es rotar nuestra forma rectangular a mitad de la página. Podemos controlar la rotación tanto como queramos. 50 grados aquí podemos ver el resultado. Del mismo modo, podemos usar la propiedad de trazo a la vez. Accidente cerebrovascular, comió. Si configuro este archivo, ahora se puede ver trazo rojo, ambos del elemento t. Si uso la clase de grupo, va a afectar a cada elemento dentro del grupo. Ahora se puede entender cuál es el beneficio de agrupar. Espero que ahora la etiqueta de grupo sea clara para ti. Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 18. Defs, símbolos y elementos de uso de SVG: Hola, chicos. Me alegro de verte de vuelta. En este curso, vamos a aprender los elementos de uso de símbolos de SVG Dips Sin perder el tiempo, comencemos la práctica. Aquí puedes ver, lado a lado, abro mi visual studio cod eator y mi navegador usando la extensión del servidor life, y abro un documento SDML el cual creo en nuestro tutorial anterior Aquí puedes ver, creo un grupo dentro de la etiqueta SVG. Y dentro de esta etiqueta de grupo, creo dos rectángulos diferentes. Ahora la situación es, quiero volver a usar grupo de objetos sin escribir la misma cantidad de código. Básicamente, quiero usar este grupo de formas múltiples veces en nuestra área de puerto de visión. Para esto, necesitamos asignar un ID a esta etiqueta de grupo, ID igual a, y nuestro Dnm es formas Después después de la etiqueta G, voy a llamar a Utag. Déjame mostrarte. Dentro del Ciervo, nuestro primer atributo es link, colon HREF. Usando esta propiedad, podemos asignar el grupo y necesitamos pasar este ID para asignarlo. Copiar y pegar. Va a replicar esta forma en este libro de vista. Como puedes ver, utilizamos una identificación, por lo que debes proporcionar tiene etiqueta. Ahora necesitamos pasar dos atributos, atributo X y el atributo Y. Usando este atributo, podemos definir nueva posición a estas formas. Déjame mostrarte. X igual a 30, Y igual a 20. Si configuro este archivo, aquí puedes ver que es crear otro afeitado exacto similar a esta forma, y podemos colocar este afeitado en cualquier lugar de este cuadro de vista De igual manera, si quiero crear otra forma, voy a duplicar esta línea y voy a cambiar las coordenadas -30 -20 Si configuro este archivo, aquí puedes ver que es crear otra forma en dirección opuesta. Recuerda, esto coordina nuestro trabajo relativamente a esta etiqueta grupal. Si quieres peinarle dos afeitadas de manera diferente, no es posible con la etiqueta G. Para ello, necesitamos usar otra etiqueta, que es deep tag. Primero, necesitamos mover esta etiqueta G dentro de la etiqueta profunda. Déjame mostrarte. Voy a atar profundo aquí. Voy a mover esta etiqueta G dentro de la etiqueta profunda. Y no necesitas cambiar nada dentro esta etiqueta G. Sigue siendo lo mismo. Pero si guardo este archivo, alguna cosa extraña va a pasar. Déjame mostrarte. Aquí puedes ver que nuestro grupo exacto de formas se ha desvanecido Ahora no podemos usar esta forma directamente. Para ello, necesitamos usarnos tag, y ahora podemos darle estilo a estas formas de manera diferente. Déjame mostrarte. Recuerda, no necesitamos cambiar nada a esta etiqueta de grupo, por ahora voy a asignar clases en nuestra etiqueta de uso. Clase A, Clase B. Ahora voy a crear este selector dentro esta sección de estilo A, dentro de este cols, voy a usar una propiedad llamada stroke dash array. Aquí voy a pasar también. Si configuro este archivo, se puede ver la diferencia entre dos formas. Una forma viene con borde sólido y otra forma viene con borde de tablero. Del mismo modo, si quiero cambiar el color del trazo, sí, podemos. Trazo Azul. Pero antes de establecer este archivo, tenemos que eliminar trazo de la forma de origen significa forma de grupo. Si configuro este archivo, ahora puedes ver Trazo azul en formas de objeto clase A. De la misma manera, puedes darle estilo a formas de clase B. Déjame mostrarte. Duplico este archivo y voy a cambiar el nombre de clase B. Para clase B, voy a usar trazo rojo. Voy a cambiar de golpe un hueco. Cinco. Si configuro este archivo, aquí puedes ver la diferencia entre dos formas. Vamos a saltar a nuestra última etiqueta, que es símbolo. Podemos usar la etiqueta de símbolo como etiqueta de grupo. Déjame mostrarte. Voy a sustituir esta etiqueta de grupo con símbolo. Hay una diferencia entre la etiqueta de grupo y la etiqueta de símbolo. Básicamente, el símbolo puede crear una caja de vista diferente. Déjame mostrarte. Voy a duplicar este símbolo y también voy a cambiar el ID de forma dos. Si configuro este archivo, aquí puede ver cualquier estilo que apliquemos en nuestra clase grupal, ahora estos son todos inaplicables Ahora voy a cambiar la vista boox. Déjame mostrarte. Voy a usar view BooXpperty Igual al interior de los códigos dobles, cero, cero, 50, 50. Básicamente, va a escalar nuestra forma. Si configuro este archivo, ella se puede ver la diferencia. Esta es la diferencia básica entre símbolo y grupo. Podemos cambiar viewx si usamos tanque de símbolo. Si te das cuenta, aquí puedes ver que cometí algún pequeño error. No utilizamos ID forma dos en esta sección. Voy a llamar a esta identificación forma dos. Si utilizo este archivo, ahora puedes ver que esta propiedad viewox solo funciona en formas de ID, no a las formas dos Cambiemos el viewbox una vez más 150 por 150. Si configuro este archivo, ahora puedes ver el resultado. Rebajó nuestro objeto símbolo. Podemos cambiar el viewbox de manera diferente. Déjame mostrarte. Copo la propiedad viewbox y la pego aquí, y aquí voy a cambiar 50, 50 Si configuro este archivo, ahora puedes ver la diferencia entre view boox Y si quieres alejar esta vista boox, solo aumenta el valor de esta vista boox 200 por 200 Si configuro este archivo, aquí puedes ver el objeto view boox Espero que ahora te quede claro, gracias por ver este video. Estén atentos para nuestro próximo tutorial. 19. Tutorial de elementos de SVG TextPath: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre el elemento de ruta de texto. Si recuerdas, aprendemos elemento de texto y elemento de ruta en nuestros tutoriales anteriores. Y si quieres crear algún objeto usando texto y PAT, y luego necesitamos usar una nueva etiqueta, que es ruta de texto. Entonces, sin perder el tiempo, comencemos la práctica. Aquí puedes ver lado a lado, abro mi visual studio coritor y mi navegador usando la extensión del servidor lip, y ya creo un documento TML Y dentro de este documento TML, creo una etiqueta bg Y dentro de esta etiqueta SVG, puse un cuadro de vista cien por cien. Entonces al principio, voy a crear un camino. Déjame mostrarte. Como ustedes saben, necesitamos iniciar ruta con atributo D. Entonces voy a escribir D igual a C, luego dentro de los códigos dobles, necesitamos proporcionar el comando. A continuación, necesitamos proporcionar Xxs y YxS que es 20 YX es 20 YX Este es nuestro punto de partida. Además, voy a tomar punto final para este camino. Déjame mostrarte. Nuestro punto final es 90 50. También voy a usar la propiedad de ictus. Golpe igual a la tasa. Si configuro este archivo, aquí se puede ver una línea, y ahora voy a darle arco a este trazo. Para ello, necesitamos usar un comando. A, y luego voy a proporcionar las coordenadas 30 y también YxS es 30, y luego necesitamos proporcionar el valor de rotación X Por ahora, voy a ponerla a cero. Además, nuestro gran valor de arco es cero, y luego necesitamos proporcionar un valor de bandera de traje , que es uno. Ya te dije en nuestros videos anteriores cómo podemos crear arco usando estos atributos. Si configuro este archivo, aquí se puede ver arco. Por ahora, no quiero ningún color, así que voy a decir sentir color monja, sentirme igual a ninguno Por último, creamos la forma de arco, y ahora voy a usar la etiqueta Text, déjame mostrarte. Dentro de esta etiqueta Text, necesitamos usar otra etiqueta especial, que es texto Bath. Déjame mostrarte. Dentro de este texto Bath, voy a escribir un nombre, agregar uno Minch Si configuro este archivo, no se puede ver nada en nuestro cuadro de vista. Porque no adjuntamos este texto con este camino. Primero, necesitamos darle un ID a esta ruta, ID igual al arco ARC. Ahora podemos usar este ID y ahora podemos asignar este ID en nuestra ruta de texto. Déjame mostrarte para el pontruse xlink HRDF X link colon HREF igual dentro de los códigos dobles, y dentro de los códigos dobles, necesitamos proporcionar el ID de ruta, hastag ARC Si configuro este archivo, aquí puedes ver el texto, agregar uno MNuestro texto se mueve de acuerdo a esta curva No solo eso, podemos usar la propiedad CSS con este texto. Para ello, necesitamos usar clase igual a texto. Ahora voy a crear el selector de este texto, texto punto. Dentro de los surge, primero, quiero cambiar el tamaño de la fuente. Tamaño de fuente 12 píxeles. Si configuro este archivo, aquí puedes ver el resultado. Reduzca el tamaño del texto. Y si no quieres mostrar este camino, solo quieres mostrar este texto. En ese caso, es necesario usar la etiqueta dip. Déjame mostrarte los dips. Si muevo esta ruta y si muevo esta ruta dentro de esta etiqueta de inmerencias y configuro este archivo, ahora no puedes ver el trazo, puedes ver todo lo que se necesita, si quieres cambiar la posición del arco en dirección opuesta, solo necesitas cambiar el valor del conector Swift uno, dos, cero, y luego establecer los cinco Ahora se puede ver que movemos este arco en sentido contrario. Por ahora, voy a usar un Vale. Y establecer el archivo. Si juegas con las coordenadas X o las coordenadas Y con R, déjame mostrarte. Voy a usar 40. Si configuro este archivo, ahora se puede ver diferente curva, y ya nos enteramos de ello en nuestros videos anteriores. Si cambiamos esta forma, según forma, nuestro texto va a cambiar esta posición. Entonces, si quieres vincular esta ruta con esta ruta de texto, necesitas ID, y luego necesitas usar atributo Ling HID para vincular esta ruta con texto. Espero que ahora texto Elemento de baño sea claro para ti. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 20. Degradados lineales de SVG: Hola, chicos. Encantado de verte de vuelta. En este tutorial, vamos a aprender sobre gradientes. Veamos cuántos tipos de gradientes tenemos. Aquí puedes ver que tenemos dos tipos de gradientes en SVG, gradiente lineal y gradiente radial Como puedes ver, el gradiente lineal es direccional, tal vez va de vuelta a derecha, arriba a abajo, o tal vez diagonal, pero nuestro gradiente radial viene con circular de. Empecemos lo práctico y en este tutorial, vamos a aprender gradiente lineal. Aquí se puede ver lado a lado, abro mi código de Visual Studio y mi navegador usando la extensión del servidor lip Ya creo un documento HTML, index dot HTML, y ya uso wisitag view Wox cien cien y aquí se puede ver una Es muy útil entender las coordenadas. Primero, voy a crear una forma rectangular. Voy a usar la etiqueta Rec. Para el punto de partida, necesitamos proporcionar XXs e YxS X iguales a diez e YxS iguales a 30, entonces necesitamos tomar dentro de la W 80 y altura igual a 60. Si configuro este archivo, aquí puedes ver una forma de rectángulo y ahora voy a darle un trazo a este rectángulo. Voy a escribir trazo, igual a tasa. Ahora puedes ver este trazo en nuestro rectángulo. Por ahora, no quiero ningún color, así que voy a escribir me siento igual a ninguno. Ahora quiero rellenar este rectángulo con color degradado. Es decir más de un color. Para ello, necesitamos usar etiquetas de profundidad de medias de etiqueta de definición. Dentro de esta etiqueta de profundidad, voy a usar una nueva etiqueta, que es gradiente lineal. Déjame mostrarte. Además, voy a tomar una identificación para esta etiqueta, ID igual a dentro de los códigos dobles, L, bajo scoe G, significa gradiente lineal Dentro de esta etiqueta de degradado lineal, voy a usar otra etiqueta que es stop. Es necesario cerrar esta etiqueta de esa manera. Dentro de esta etiqueta, declaramos nuestro color. Pero primero, tenemos que tomar atributo llamado opuesto. Aquí declaramos desde donde nuestro color va a comenzar y quiero comenzar el color degradado desde 0%. Para el color, necesitamos usar otra propiedad que se deje de colorear. Voy a usar el color verde. Entonces voy a duplicar esta línea, y voy a cambiar el 100% opuesto. También voy a cambiar el color azul. Su principal, inicia desde la posición cero y termina a la posición cien. En nuestra posición cero, comienza con el color verde. Pero en la posición 100 , termina con color azul. Ahora quiero ver el efecto degradado en nuestro rectángulo. Pero primero, voy a asignar una clase a esta forma rect elementos Ahora voy a crear un selector en nuestra sección de estilo forma de punto. Dentro del carlirass voy a usar una propiedad Y entonces necesitamos usar la función URL. Y aquí necesitamos proporcionar el ID del efecto de gradiente, que es undersCoG. Quiero copiar este identificador, hastag underCog también necesito quitar propiedad de campo de Si configuro este archivo, aquí se puede ver un degradado. Aquí lo puedes ver comenzando con color verde y terminando con el color azul. Si juego con el valor Offsite, déjame mostrarte el 80% y establecer este archivo Aquí se puede ver 80% de área llena de color azul. Entonces de esa manera, es w. Por ahora, voy a usar a 100 personas. A continuación, tenemos otra propiedad que es la opacidad stop. Déjame mostrarte. Si utilizo esta propiedad, usando esta propiedad, puede proporcionar transparencia en este color. Si utilizo valor cero y luego configuro el archivo, aquí se puede ver que es completamente transparente. Si utilizo un valor, aquí se puede ver a todo color. Podemos usar el valor 0-1. Voy a usar 0.6. Si configuro este archivo, aquí pueden ver, ahora es semitransparente. Ahora el color azul es 60% transparente. Pero por ahora, voy a usar un valor. Ahora se puede ver lleno de color sólido. Ahora hablemos de la dirección del gradiente. Aquí puedes ver nuestro color yendo de izquierda a derecha, pero quiero este color de arriba a abajo. Para ello, necesitamos pasar Xx Zu y YxSvuhe. Aquí necesitamos usar dos tipos de xs y YxS X uno, Y uno, X dos, Y dos Déjame mostrarte X uno igual a, pero no necesitas códigos dobles. Voy a pasar cero persona por Y uno, también voy a usar cero persona. Y para N coordenadas, X a valor es 100% e Y dos valor es 0%. Si configuro este archivo, aquí podemos ver que no hay cambios porque creo la misma dirección de este color degradado, y ahora voy a cambiar X a valor, cero e Y a valor 100. Si configuro este archivo, aquí pueden ver que cambió la dirección. Ahora va de arriba a abajo. Y si quieres color azul en la parte superior para eso, necesitamos cambiar los valores, cero persona e Y uno es 100%. Si configuro este archivo, ahora puedes ver el color azul venir primero y luego el color verde. Si quieres mostrar el color en diagonal, para ello, necesitamos cambiar el valor Y uno es cero, Y dos, 100%, X dos, 100%, Y dos, también 100%. Si digo este archivo, ahora puedes ver que nuestros colores degradados funcionan diagonalmente En labio y esquina superior, se puede ver el color verde y se puede ver la esquina inferior derecha, color azul. Ahora te queda claro cómo podemos crear un color degradado lineal. Para ello, primero, es necesario crear el efecto. Y luego hay que asignar una identificación a este efecto. Puede utilizar este ID en el valor de la propiedad de campo. Se puede aplicar este degradado en cualquier tipo de formas. No sólo eso, podemos usar múltiples colores en este degradado. Quiero duplicar esta línea. Ahora quiero usar el color naranja. Y quiero sentir este color en posición del 50%. Si configuro este archivo, aquí se puede ver el efecto. Aquí se puede ver que comienza con verde, luego viene naranja, y luego viene de color azul. Se puede utilizar cualquier color en cualquier porcentaje. Si quieres decir opacidad en este color, puedes usar detener la propiedad de opacidad Esto es para este tutorial. En el siguiente tutorial, vamos a aprender gradiente radial. Gracias por ver este video. 21. Degradados radiales de SVG: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre el gradiente radial. En nuestro tutorial de prefieres, ya aprendemos gradiente lineal. Vamos a saltar al código de Visual Studio y comenzar la práctica. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión de servidor en vivo, y ya creé un documento SML, nombre parte dos punto es TML Y como puedes ver, aquí ya creamos forma de rectángulo. Ahora quiero aplicar color degradado en esta forma usando su nombre ID. Quiero llenar esta forma de reacción con color degradado radial. Para eso, como saben, necesitamos llenarlo con nombre de identificación, RG Para eso, ya llené esta forma de reacción con este ID, RG Rg significa gradiente radial, y luego voy a crear el gradiente radial dentro de la etiqueta profunda Déjame mostrarte cómo. Dentro de esta etiqueta profunda, voy a escribir gradiente radial. Creo que hice algún error ortográfico DI ENT. Ahora en este gradiente radial, necesitamos asignar este ID, el ID de campo, gradiente radial RG ID de tipo hemo igual a gradiente radial RG. Ahora dentro de este gradiente radial, voy a asignar el primer color. Aquí, voy a usar la etiqueta stop. Entonces hay que mencionar la posición opuesta. Voy a usar el atributo Opsete. Opuesto en Es las comillas dobles, 0% en posición 0%, quiero aplicar color stop. Detener el color. Detener el color igual a, y quiero aplicar el color verde. Entonces voy a duplicar esta línea. En posición al 100%, quiero aplicar color rojo. Si configuro este archivo, puedes ver el resultado. Ahora, en conjunto esta etiqueta de reacción, se puede ver que tenemos color degradado radial. Es comenzar con el color verde y terminar con el color rojo, y nuestros colores verdes comienzan desde el centro. Vamos a establecer otro color en la posición del 50%. Voy a duplicar esta línea, y en la posición del 50%, quiero aplicar el color azul. Si configuro este archivo, puedes ver el resultado. Entonces así es como puedes agregar tanto color como quieras. Y si quieres cambiar la posición del degradado, sí, puedes. No quiero pegar este centro de degradado. Quiero moverlo en esa posición. Para mover el punto central del gradiente, necesitamos usar los atributos Cx y Cy. Entonces Hemotipo ch igual a 30%. Y luego voy a proporcionar el puesto de CY. CY igual al 40%. Si configuro este archivo, puedes ver el resultado. Movemos con éxito la posición del gradiente. Podemos colocar el punto central del gradiente en cualquier lugar de nuestra etiqueta de reacción. Y si inicia su gradiente desde la esquina exacta de la computadora portátil, solo pasa 0% valor XX y 0% valor YxS, y luego establece este archivo, puede ver el resultado No sólo eso, también se puede controlar el radio de gradiente. Entonces primero, voy a moverlo en 50% posición, YXS y 50% posición XXs Entonces voy a usar otro atributo llamado R, R significa radio R igual a, quiero hacer radio de gradiente 20%. Básicamente, voy a reducir el área de gradiente. Upsst este archivo, se puede ver el resultado. Si quieres extender tu radio de degradado para eso, solo necesitas pasar más del 50% de valor, supongamos que voy a pasar el 90%. Después de configurar este archivo, se puede ver el resultado. Por ahora, voy a usar el 20%. Como voy a cambiar el color inicial del degradado. Quiero sustituir el verde por el blanco. Después de sofocar, se puede ver el resultado. Ahora vamos a jugar con el valor del punto de enfoque. Quiero cambiar el foco de este gradiente radial. Para eso, necesitamos usar un atributo llamado H A X porque quiero cambiar el enfoque de x deducción, igual a y quiero aplicar 10% Arriba para configurar esta pila, puedes ver el resultado. Esto es lo que crea un cambio el foco 10% en exceso de dirección. Aún así, es un gradiente radial, pero solo cambiamos el punto de enfoque. Ahora parece un rayo de linterna, y para crear un efecto de degradado diferente, necesitas jugar con estos valores. Supongamos que voy a hacer radio 40%. Además, voy a cambiar el valor ex, y voy a fijarlo 20%. Si configuro este archivo, se puede ver el resultado y similar a la posición Fx, también tenemos posición FY. Voy a empatar atributo FY igual a, y voy a hacerlo 40%. Después de establecer este archivo, se puede ver que se mueve sobre el punto de enfoque hacia arriba. Ahora, hablemos del último atributo girado gradiente radial, que es el método spread. Para eso, voy a duplgar esta línea y cont out línea Al principio, voy a eliminar el atributo AX y AY. Entonces también, voy a quitar el valor del radio. Entonces voy a volver a configurar este archivo. Entonces voy a llamar a este atributo método rociado. Aerosol hemotida. Este atributo viene con el valor total de C, pad, reflect y repeat. Si uso pad, es un valor por defecto, tipo pad Sonu. Después de usar este valor, si configuro este archivo, como pueden ver, no hay cambios, y luego voy a usar el siguiente valor llamado repeat. Si configuro este archivo, puedes ver el resultado. Si reduzco el radio de degradado, déjame mostrarte R igual al 20% y esto establece este archivo, ahora te queda más claro cómo funciona. Ahora llena el contenedor con colores degradados repetibles Aquí puedes notar la capa de degradado repetido. Ahora vamos a aplicar el último método V de spread, que es plano. Voy a sustituir la repetición por plana. Urate este archivo, esto es lo que crea. Ahora es crear un patrón de degradado reflectante en toda la caja rectangular. Me gustaría sugerirle que pruebe esta combinación diferente y cree un efecto de degradado diferente. Si juegas con este valor cada vez, va a devolver un resultado diferente. Esto es para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 22. Adobe Illustrator para svg: Hola, chicos. Me alegro de verte. En este tutorial, vamos a aprender, cómo podemos dibujar cualquier forma compleja sin usar ASV Para estos, necesitamos usar cualquier aplicación vectorgráfica. Al igual que Adobe Illustrator, dibujo oral, de lo contrario, se puede utilizar cualquier otra aplicación vectográfica Y en este tutorial, vamos a usar Ado V Illustrator. Usando Adobe Illustrator, podemos crear formas geométricas complejas, y luego podemos convertir esta forma en docomin ASVG Así que saltemos al software Adobe Illustrator. Por último, abro la aplicación Adobe Illustrator. Entonces necesitamos crear un nuevo archivo. Para crear un nuevo archivo, es necesario ir Archivo Mino y hacer clic en Nuevo Entonces puedes ver mucha opción. Vamos a crear archivo con fines de desarrollo web, así que vamos a seleccionar web. Entonces aquí se puede ver mucha resolución. Todas estas son resoluciones de páginas web, pero voy a crear mi propia resolución. Voy a crear 200 por 200. Esta es nuestra zona de Vwvox. Si Tacon, crear opción, como se puede ver, se crea un área de Vevox por 200 por 200 píxeles Esta es nuestra zona de vista boox. En esta vista boox podemos dibujar cualquier tipo de forma. Para dibujar una forma, al principio, voy a seleccionar esta herramienta. Es herramienta pin. Usando esta herramienta de dolor, podemos crear una línea de trazo. Déjame mostrarte. Supongamos que en esa posición, quiero crear nuestro primer punto. Este es nuestro punto de partida y en esa posición, voy a crear otro punto. Este es nuestro punto final. Como puedes ver, crea línea recta. En ese caso, nuestra herramienta de dolor funciona como una etiqueta de línea. Y recuerden, esta es nuestra dirección sobrante, y esta es la dirección YxS Además, usando Pentool, podemos crear línea bezier cúbica. Déjame mostrarte. Entonces nuestro punto de partida de línea sier cúbico es este punto y nuestro punto final cúbico más ocupado es ese punto En ese punto, si hago clic en él y arrastro mi mouse, como pueden ver, se crea una línea bezier Esta es la línea Cubic Bzial. Ahora bien, según estos tableros de vista, nuestro primer tag es line tag y nuestro segundo tag es put tag. Como sabes, usando la etiqueta Put, podemos crear cualquier forma compleja. Déjame mostrarte. Ahora voy a dibujar forma compleja. Vamos a empezar en esa posición. Entonces creo algunos puntos y encubro este punto y me uno a este punto Ahora puedes ver aquí creamos una forma geométrica compleja. Ahora quiero llenar esta compleja forma con un color. Para eso, primero tenemos que seleccionar la opción de flecha, luego necesitamos seleccionar esta forma geométrica. Después de eso, desde aquí, podemos seleccionar cualquier color. Supongamos que quiero rellenar de color verde. Como puedes ver, ahora nuestra forma compleja se rellena de color verde. Si quieres cambiar el color del trazo de esta forma compleja, sí, puedes. Simplemente seleccione la forma compleja. Entonces necesitas ir opción. Esta vez, es necesario seleccionar la opción de trazo. Ahora puedes ver que nuestro trazo está seleccionado y quiero asignarle al trazo color rojo. Después de seleccionar el color, podrás ver el resultado. En VG, podemos dibujar esta forma usando la herramienta Trazado, de lo contrario, la herramienta polígono. Eso ya lo sabemos. Y ahora te voy a mostrar cómo puedes crear una forma rectangular. Para eso, es necesario seleccionar esta opción, esta herramienta, rectángulo. Entonces necesitas seleccionar la posición inicial y escogerla y arrastrar el mouse. Después de arrastrar el ratón, como puedes ver, crea una forma rectangular con color de campo verde. De nuevo, quiero cambiar el color del campo. Para eso, primero, hay que seleccionar la opción de campo, después voy a rellenar de color azul. Así es como podemos crear forma de rectángulo, lo contrario forma cuadrada. Si quieres crear una forma ellip, para eso, necesitas seleccionar el EllipeTol Usando Elliptol primero, debes seleccionar el punto de partida, luego puedes arrastrar el mouse y crear Elipshape Y para esta Elipshape, voy a usar el color de campo amarillo Ahora, me gustaría convertir esta imagen, convertir esta imagen Adovillustrator Para ello, es necesario seleccionar la opción de archivo. Después debes seleccionar Guardar como. Opción de ahorradores superiores, primero, debe proporcionar en qué carpeta desea guardar su Esta es la carpeta, quiero guardar mi archivo, y luego hay que seleccionar en qué formato desea guardar el archivo. Aquí puedes ver opción, guardar como tipo. Desde aquí, puedes guardarlo como Illustrator como archivo PDF. Como puedes guardarlo como archivo svg. Voy a usar esta opción, VG. Entonces voy a usar la placa Rd, usar el área de arranque R. Si no usamos el área de Abood, entonces vas a tomar área gris como mesa Voy a usar solo tablero Rd. Después voy a hacer clic en la opción Guardar. Después de seleccionar la opción Guardar, aquí puedes ver mucha opción. No necesitas cambiar nada, necesitas seleccionar más opción, y de la configuración de más opciones, necesitas ir a la opción Avanzar. Y aquí puedes ver una opción importante llamada propiedades CSS. Y si abro este menú desplegable, aquí puedes ver el atributo de presentación, atributo estilo y elementos de estilo Por ahora, me gustaría guardar este archivo usando elementos de estilo. Y luego voy a presionar a Fok. Y y si te muestro mi directorio de trabajo actual, como puedes ver en mi directorio de trabajo actual, hay un Igifle llamado Untitle 01, y ahora voy a establecer el mismo archivo en diferente Déjame mostrarte. De nuevo, voy a dar click en Archivo Menú, después voy a alabar a Sabas, y voy a seleccionar el área de Atwood, y voy a renombrar el archivo Imagen dos Imagen dos. Después selecciono la opción Sab. Pero esta vez, no voy a seleccionar elemento de estilo. Esta vez voy a usar atributos de estilo, y voy a configurar este archivo. Y ahora si te muestro mi directorio de trabajo actual, como puedes ver ahora tienes que platicar con imagen AWG. Para mi primera imagen, aquí utilizo propiedades de elementos de estilo. Y para la segunda imagen, utilizo atributos de estilo. Y ahora voy a abrir Guerra de mi imagen usando mi navegador. Entonces aquí voy a abrir navegador Chrome y dentro de este navegador Chrome, voy a abrir esta imagen. Como pueden ver, se puede ver la imagen exacta, lo que creo en mi Atov listada softare y se puede ver la extensión Es una imagen AWG. Y ahora te voy a mostrar el código fuente y puedes entender cuál es la diferencia entre estas dos imágenes. Tanto la imagen va a devolver el mismo resultado. No hay cambios, pero si abro tanto la imagen en mi editor de código, déjame mostrarte primero, voy a abrir y titulo punto uno es wiGi entonces voy a abrir imagen dos punto uno es Vigi wiGi entonces voy a abrir imagen dos punto uno es Vigi Como ya sabéis, para peluca dos imagen, Imagen dos, utilizamos atributos de estilo. En esta imagen, como puedes ver, primero usa vBox stag, como te dije, creamos una vista boox 200 por 200 Luego creamos una etiqueta de línea. Después creamos una etiqueta put y usando put tag, creamos una línea curva. Luego usamos una etiqueta poligonal para crear la forma geométrica compleja, y luego usamos una etiqueta react Por fin usamos etiqueta circular. Recuerde, cuando establecemos este archivo, usamos atributo style. Por eso utiliza el método de estilismo interior. Pero si te muestro mi primera imagen, donde uso el elemento style, como puedes ver, usaba la misma etiqueta, pero no utilizo el método de estilo inland. Utiliza elemento de línea, etiqueta a tope, etiqueta poligonal, etiqueta reacción, etiqueta circular Todas las etiquetas son iguales, pero para el estilo, usa elementos de estilo. Usó el nombre de la clase para estilizar los elementos, y no sigue el método de estilo Inland. Esa es la diferencia entre dos archivos, pero tanto el archivo va a devolver el mismo resultado. Recuerda, si usamos color de relleno similar y un color de trazo similar, en ese caso, va a usar el mismo nombre de clase. Se va a asignar el mismo nombre de clase tanto al elemento. Pero si cambiamos una de las propiedades, de lo contrario el color de relleno, lo contrario el color del trazo, entonces va a usar diferente nombre de clase. En ese caso, como pueden ver, es a la una. Y todos los atributos y puntos que puedes notar en estas etiquetas, ya estás familiarizado con eso. Ya sabes X un punto X Y un punto, X dos puntos y un y dos puntos. Este es nuestro punto de partida y éste es el punto final. Usted está familiarizado con los puntos, altura anchura, radio, círculo Y y círculo X, etcétera No voy a explicarlo aquí. Esto depende de ti qué tipo de formato vas a elegir atributo CSS, de lo contrario, elemento CSS. Pero personalmente, recomendaré usar elemento CSS porque es más organizado y muy fácil de comerlo. Entonces en este tutorial, físicamente, trato de enseñarte cómo podemos convertir forma ctrográfica en una imagen SVG De lo contrario, el software Adobe Illustrator es un tema enorme. No podemos cubrir este tema en un solo video. Si recuerdas esta estructura gris que utilicé en cada tutorial para calcular los puntos, creo esta estructura de cuadrícula usando AdovilLustrator, y solo extraigo el código SVG y lo Entonces esta es la simple introducción del sofá adv Illustrator, y hay otro software y herramienta en línea Eso puede convertir victor graphic en una imagen SVG. Aquí puedes crear imágenes complejas usando Ado Illustrator Softa y puedes convertirla en una imagen SVG En nuestro próximo tutorial, vamos a crear una imagen compleja usando el software AdovillStrator Entonces esto es para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 23. Svg ClipPath animación: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender qué es la etiqueta Kipput en Tratemos de entender qué es la etiqueta Kipp. Vuelvo a mi Adobe Illustrator Softare. Aquí puedes ver dos formas. Como puedes ver, nuestro primer chef tiene forma de corazón y nuestro segundo chef tiene forma de círculo. Si superpongo la forma y selecciono tanto la forma, y luego presiono aquí mismo puedes ver opción, hacer máscara de recorte Si presiono, aquí se puede ver que corta el área superpuesta según la forma del corazón. Ahora la forma del círculo es visible solo dentro de la forma del corazón. Si muevo la forma de círculo dentro de la forma de corazón, aquí puedes ver diferentes resultados. Podemos mover la forma de círculo dentro la forma de corazón, algo así. No sólo eso, podemos escalarlo y animarlo. De igual manera, hemos mantenido la etiqueta en VIG. Antes de comenzar la práctica, déjame mostrarte una cosa. Aquí puedes ver una forma dura dentro de la vista boox y ya extraigo el código de Peluca de esta imagen Como sabes, necesitamos usar la etiqueta Put para crear esta forma. Vamos a saltar al editor de código de Visual Studio y tratar de entender cómo funciona. Aquí se puede ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión de servidor ligero y ya creo un documento STML Esta es nuestra dificultad que es creada por esta etiqueta de culata, y ya le asigno ID a esta etiqueta de trasero, lo cual es difícil Primero, voy a crear un círculo antes de la etiqueta a tope. Voy a atar círculo. Como saben, para crear un círculo, necesitamos usar tres atributos. Nuestro primer atributo es Cx, CX igual a 40. Nuestro siguiente atributo es CY, CY igual a 35, y nuestro último atributo es atributo de radio. Para el atributo radius, necesitamos usar R, R igual a por ahora, voy a usar 35. Si configuro este archivo, aquí pueden ver este círculo. Por defecto, viene con color negro y ya lo sabes. Ahora voy a mover este círculo dentro de la etiqueta cliput. Voy a escribir clip PT. Voy a mover este círculo dentro de la etiqueta clipper. Voy a establecer ID a esta etiqueta clipper. Déjame mostrarte una identificación igual a mi clip. Si pongo este archivo, ahora se puede ver que nuestro círculo es desaparecer, y ahora quiero mostrar este círculo en el interior la forma del corazón, no fuera de la forma del corazón. Para eso, necesitamos usar una etiqueta, que es el uso. Voy a atar uso. Y luego necesitamos usar algunos atributos para crear esta máscara. Nuestro primer atributo nuestro primer atributo es ruta de clip, igual a dentro de los códigos dobles, URL. Entonces dentro de este paréntesis, necesitamos proporcionar el ID de etiqueta ClipPT, tiene etiqueta, mi Ahora necesitamos vincular esta ruta de clip con esta dificultad. Para ello, necesitamos usar otro atributo, y ya lo sabes, que es xlink HRD. Déjame mostrarte. Colon HRDF igual a dentro de los códigos hacia abajo. Necesitamos proporcionar esto pero tech ID, lo cual es difícil. Voy a escribir tiene etiqueta dura y además voy a proporcionar un color de campo, que es rojo. Si configuro este archivo, aquí puedes ver el resultado. Engrana la forma del círculo según la forma del corazón. Este es el caso de uso principal de clip pero etiqueta. Podemos agrupar el círculo dentro de esta forma de corazón. Podemos animar el círculo dentro de esta forma de corazón y muchas más Animemos la forma del círculo dentro de esta forma de corazón, y ya escribo algún código CSS para eso. Déjame mostrarte. Aquí puedes ver, creo un nombre de marcos clave abre tu corazón. Dentro de este fotograma clave, nuestro corazón va a comenzar desde radio cero y su escala hasta el radio de 60 píxeles Y aquí seleccionamos nuestra forma de círculo usando selectores CSS. Aquí puedes ver dentro de MyCLP ID, tenemos una etiqueta circular. Por eso primero uso My Clif, y luego uso etiqueta circular Y entonces llamo a nuestra animación, que es abrir tu corazón, quiero ejecutar esta animación por cinco segundos de duración, y quiero reproducir esta animación por tiempo infinito. Por eso uso el valor infinito. Espero que ya tengas conocimientos básicos sobre la animación SASS Si configuro este archivo, aquí puedes ver la animación. Cada cinco segundos de duración, se ejecuta nuestra animación. Espero que ahora entiendas cuál es el uso de flip tag. Gracias por ver este video, estad atentos y estad atentos para nuestro próximo tutorial. 24. Agregar JavaScript a una imagen svg: Hola chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender cómo podemos agregar scripting en Vigiimage Supongamos que si quieres cambiar el tamaño del objeto y su ruta, solo usando una camarilla, entonces necesitamos usar JavaScript para eso Aquí, puedes ver dentro de nuestro cuadro de vista, tenemos forma de rectángulo, y también puedes ver un botón debajo de la vista boox Y ahora quiero escalar este tamaño de rectángulo haciendo clic en este botón, algo así. Para ello, necesitamos usar JavaScript. Vamos a saltar al visual studio coordtor y tratar de entender cómo podemos agregar JavaScript en la imagen wigi. Aquí se puede ver lado a lado, abro mis visuales a codaor y mi navegador usando b Como pueden ver, ya creo un documento externo y dentro de este documento EML, creo un contenedor de clase Dentro de esta profundidad, creo una imagen SVG. También se puede ver una forma rectangular dentro de esta imagen VG. Qué ID es g. Luego fuera de este contenedor profundo, creamos otro centro de clases. Dentro de esta profundidad, creo un botón. Qué ID es botón. También puedes ver este botón en mi navegador. Y ahora quiero escalar mi forma de rectángulo cuando tome este botón. Para estos, necesitamos usar JavaScript. Como sabes, necesitamos usar la etiqueta Script para eso. Déjame mostrarte. Chatarra. Dentro de esta etiqueta script, voy a crear una función y nuestro nombre de función es scale size. Primero, voy a usar la palabra clave function y nuestro nombre de función es scale size. Dentro del paréntesis, por ahora, no quiero pasar ningún parámetro Luego dentro de los talladores, necesitamos seleccionar el ID de este rectángulo Documentar, punto, obtener elemento por ID, dentro del paréntesis y dentro del doble curso o nombre de ID, que es a y ahora quiero escalar el ancho de este rectángulo Necesitamos escalar esto con atributo. Voy a usar una función, punto, set, atributo. En cambio el paréntesis, en cambio los códigos dole, primero, necesitamos pasar el nombre del atributo y nuestro nombre de atributo es con Coma y luego tenemos que pasar el valor y quiero escalar hasta 50 píxeles, así que voy a pasar 50, luego semicolum para terminar De igual manera, quiero escalar la altura de este rectángulo, así que voy a duplicar esta línea y esta vez nuestro nombre de atributo es height. Entonces voy a reemplazar con altura altura igual a 40 píxeles. Así que cada vez que hago clic en este botón, quiero ejecutar esta función. Para ello, necesitamos usar otro atributo, que es n click. Y dentro de estos códigos dobles, necesitamos pasar el nombre de la función, que es el tamaño de escala. Entonces quiero copiar el nombre de la función y pegarlo aquí. Y ahora voy a configurar este archivo y ejecutar este código. Aquí puedes ver el resultado. Escala perfectamente nuestro rectángulo. Déjame mostrarte una vez más. Si vuelvo a cargar mi navegador, ahí puedes ver ahora nuestro rectángulo con este 30 BiiXL y la altura es Cada vez que hago clic en este botón, escala el rectángulo. Ahora es Ws este 50 pixel y la altura es 40 pixel. Usando JavaScript, podemos animar nuestra forma, podemos mover nuestra forma Puedes hacer lo que quieras. Con escalado, ahora quiero mover la forma en YxS. O que necesitas cambiar el valor de YXS. Déjame mostrarte. Voy a duplicar esta línea una vez más. Pero esta vez, voy a seleccionar el atributo Y aquí. Y. quiero mover este rectángulo 30 Mixel en dirección YxS Si configuro este archivo y luego hago clic en este botón, aquí podemos ver primero que escala nuestro rectángulo y luego es mover nuestro rectángulo en dirección YxS Espero que ahora te quede claro cómo podemos usar JavaScript con XVGImages Usando JavaScript con CSS y usando JavaScript con VIG, son procesos similares Gracias por ver este video. Estén atentos a nuestro próximo tutorial, y luego comenzaremos nuestros emocionantes ejercicios y proyectos. 25. Animación de automóviles en movimiento: Hola, chicos. Me alegro de verte de vuelta. A partir de este tutorial, vamos a iniciar nuestro proyecto. Este es nuestro primer proyecto, y nuestro nombre de proyecto es mover auto. Aquí puedes ver un auto. Es una imagen SVG completa. Esta no es la página TML, y la puedes ver en mi archivo SVG de punto de barra URL Entonces recarguemos mi navegador y veamos qué pasó. Aquí puedes ver nuestro carro moverse de derecha a izquierda dirección. Y si notas puedes ver cuando nuestro auto se detuvo, también es parar nuestras ruedas. Entonces esta es la animación muy emocionante. Entonces veamos cómo podemos crear esta animación. Entonces aquí puedes ver, lado a lado, abro mi directorio de trabajo actual y mi navegador. Como pueden ver, dentro de mi directorio de trabajo actual, hay un archivo Viz, el nombre fino es Jeb Cabrio abro este nombre como archivo VG en mi navegador, y aquí puedes Ahora voy a saltar al software Adoviillstrator. Déjame mostrarte. Aquí puedes ver, también abro la misma imagen SVG en AdovilLustrator Ahora voy a crear un nuevo archivo SVG. Para eso, primero necesitamos crear un nuevo archivo AI. Voy a dar click en esta sección de archivos, y después hago clic en Nuevo. Quiero crear nuestra área de viewport con resolución SG completa Por eso voy a usar 19 20.080 de resolución. Esta es nuestra vista del área de Wok. Ahora voy a arrastrar este auto en este espacio. Voy a escalar un poco esta imagen SVG. Y ahora voy a configurar este archivo como es un AVG. Para ello, voy a dar click en la sección de archivo, y después presiono Guardar como. Voy a poner este archivo en mi directorio de trabajo actual, y también voy a cambiar el nombre fino, que es mover coche subrayado coche Ahora voy a seleccionar el tipo de archivo, que es VG. Después selecciono la opción Nosotros Mesa de trabajo, y después presiono Guardar Me gustaría ir con propiedades de elementos de estilo. Voy a presionar Bien. Aquí puedes ver en mi directorio de trabajo actual, hay otra imagen VG, que se está moviendo subrayado coche 01 Si abro esta imagen en mi navegador, aquí puedes ver la imagen. En este ejercicio, no quiero trabajar con la página TML. Trabajo directamente con imagen SVG. Saltemos al coordinador del estudio visual e intentemos crear la animación. Así que finalmente, estoy de vuelta a mi codificador de estudio visual también abro archivo SVG de coche en movimiento Y aquí se puede ver que tenemos un total de tres put tag. Nuestra primera etiqueta de culata es para nuestra carrocería. Nuestra segunda etiqueta de tope es para la rueda delantera del automóvil y nuestra tercera etiqueta de tope es para la rueda trasera del automóvil. Primero, voy a asignar un nombre de clase a nuestra carrocería, clase igual a carrocería underscoe de auto Voy a crear un selector usando este nombre de clase. Voy a copiar este nombre, y aquí voy a usar etiqueta de estilo. Es esta etiqueta de estilo, punto, nuestro nombre de clase. Es el calibreSi quiero cambiar el color de la carrocería del auto. Para eso, voy a usar propiedad de campo. Para el color del cuerpo, voy a usar el color rojo. Si configuro este archivo y vuelvo a cargar mi navegador, aquí puedes ver, cambiamos con éxito el color de la carrocería del auto Nuestra siguiente tarea es que necesitamos rotar las ruedas a 360 grados. Para eso, necesitamos usar la etiqueta de transformación animada. Déjame mostrarte. Necesitamos usar la etiqueta de transformación animada dentro de la etiqueta pt Para eso, necesitamos usar la etiqueta de cierre a tope. P. Primero, voy a escribir el nombre de la etiqueta, que es animar transformar También necesitamos terminar la etiqueta, y luego necesitamos usar algunas propiedades. Nuestro primer nombre de propiedad es nombre de atributo. Déjame mostrarte. Nuestro nombre de atributo es transform. Si estás familiarizado con la animación CSS, entonces escuchas este sonido muchas veces. Nuestro siguiente nombre de propiedad es el tipo de atributo. Y nuestro tipo de atributo es XML. Ya sabemos que nuestra imagen SVG está hecha con etiquetas XML. Es por eso que nuestro tipo de atributo es XML, y luego necesitamos proporcionar el tipo de animación, tipo igual a, y nuestro tipo de animación es rotar. Voy a escribir rotar. Y entonces tenemos que pasar de valor y dos valor de 360 grados y en nuestros dos valor a cero grado. Entonces tenemos que proporcionar el tiempo de duración DUR igual a, y quiero ejecutar esta animación durante tres segundos tres es, entonces tenemos que proporcionar el tiempo de repetición de esta animación. Para ello, necesitamos usar otra propiedad que es repeat coum Igual a, y quiero repetir esta animación por 1.35 tiempo Esto es totalmente depender de ti. ¿Cuánto tiempo quieres repetir tu animación? Si configuro este archivo, va a girar nuestra rueda, pero no proporcionamos el punto de buje de esta rueda. Por eso va a retener un resultado diferente. Déjame mostrarte. Si vuelvo a cargar este archivo, aquí puedes ver la imagen Es girar nuestra rueda de acuerdo al punto cero X xs. Necesitamos pasar las coordenadas exactas de este buje de rueda para obtener este valor exacto de este punto de buje, necesitamos volver a la aplicación Adovillstrator Así que una vez más, vuelvo a mi aplicación AdovillsTror. Ahora necesitamos encontrar el punto exacto del buje de esta rueda. Voy a seleccionar esta rueda. Y aquí se puede ver el punto Xs de esta rueda y el punto YxS de esta rueda Voy a copiar el XXSPoint. Si notas puedes ver arriba el punto decimal, empieza con siete. Es media por encima de la 0.5. Podemos usar 753 punto para eso. Como puedes ver nuestro punto Y xs es 500. Volvamos al codaor de visual studio y asignemos el punto XS y el punto YXS Por lo que necesitamos brindar el punto XXS en este lugar. 753 y nuestro punto XS es 500 y también necesitamos asignar el mismo valor en esa posición Si configuro este archivo y luego vuelvo a cargar mi navegador, ahora puedes verlo girar nuestra rueda en el lugar exacto y ejecuta nuestra animación durante tres segundos, necesitamos seguir el mismo procedimiento para nuestra rueda trasera Primero, voy a cerrar la etiqueta P. Y luego voy a copiar el mismo código de animación, y lo voy a pegar aquí. Y una vez más, necesitamos proporcionar el punto exacto para nuestra rueda trasera. Ahora, una vez más, necesitamos volver al software Adobe Illustrator. Esta vez, voy a dar click en rueda trasera y aquí se puede ver la posición, 970 Xxs y 500 YxS Volvamos al códitor. Nuestra coordenada XXS es 917 y nuestra coordenada YXS es 500. También necesitamos reemplazar en dos posiciones. Si configuro este archivo y luego vuelvo a cargar este navegador, aquí se puede ver que gira nuestras dos ruedas en la misma dirección Si quieres cambiar esta dirección, y luego necesitas comenzar desde cero y 2360 grados Solo hay que revertir a los coordinadores, eso es todo. Logramos con éxito nuestro eje del trabajo, y ahora necesitamos mover todo el auto de derecha a izquierda. ¿Cómo es posible? Aquí puedes ver una etiqueta de grupo significa etiqueta G, y nuestra etiqueta G contiene las tres etiquetas put. Necesitamos mover la etiqueta G de la dirección derecha a la izquierda. Una vez más, voy a copiar la etiqueta de animación. Entonces pon etiqueta, y antes la etiqueta G de cierre, voy a pegarla. Para esta animación, no necesitamos desde y para valorar, así que la voy a quitar. Y también hay que cambiar el valor del tipo. Para eso, voy a usar translate. No quiero rotar todo mi auto. Sólo quiero cambiar la posición del auto. Por eso uso translate no quiero repetir esta animación, así que voy a usar una. Y luego necesitamos proporcionar el punto de partida del automóvil y el punto final del automóvil y el punto final del automóvil. Para eso, voy a usar una propiedad llamada values. Valores iguales a dentro de los códigos dobles. Primero, necesitamos proporcionar la coordenada X inicial y las coordenadas Y. Por defecto, nuestra posición de curva es cero. Quiero arrancar este auto desde una distancia de 400 píxeles, nuestro valor X x es 400 y nuestro valor Y Xs es cero. Colón. Tenemos que proporcionar el punto final. Para nuestro punto final, quiero detener esta tarjeta en posición absoluta. Por eso voy a pasar la coordenada cero y también la coordenada Y cero. Si configuro este archivo y vuelvo a cargar este navegador, oye, no es trabajo A lo mejor hay un error. Oye, olvidé proporcionar punto y coma después del valor de punto final. Si configuro este archivo y vuelvo a cargar mi navegador, oye, todavía no funciona Averiguemos el problema. Cambiemos el tiempo de duración por segundo. También, voy a cambiar los valores. Simplemente cambio el valor del punto de partida. Si configuro este archivo y vuelvo a cargar mi navegador, aquí puedes ver ahora es trabajo Yo manejo nuestro auto y además encaminó nuestras ruedas. Cuando nuestros autos paran, también detienen las ruedas. Trasladamos con éxito nuestro auto de un punto a otro punto. Espero que ahora te quede claro cómo ha funcionado. Gracias por ver este video y mantente atento a nuestro próximo proyecto. 26. Animación de seguimiento de rutas de Svg: Hola, chicos. Me alegro de verte de vuelta. Este es nuestro segundo ejercicio relacionado con la animación SVG, y nuestro nombre de ejercicio es Animación de seguimiento de ruta. Veamos el ejemplo, ¿qué podemos hacer con esta animación? Aquí, puedes ver el mapa del mundo, y ahora decides enviar un envío de Nueva York a Kolkata Y por este camino, el barco llegará al destino. Si vuelvo a cargar este navegador, puedes ver la animación. Puedes ver a nuestro buque portacontenedores seguir este camino y llegar a su destino. Como puede ver, el punto rojo corre sobre el camino azul. Entonces comencemos lo práctico y tratemos entender cómo podemos crear este ejemplo. Aquí puedes ver, estoy de vuelta a mi software Adovillustrator, y también selecciono Y también, pueden ver, subo mi color de campo. Solo uso el color de trazo, y nuestro color de trazo es azul. Y nuestra visión de resolución es 1920 5,080. Entonces al principio, voy a dibujar un trazo curvo, algo así. Eso es. Este es el camino que voy a utilizar en nuestro proyecto. Si quieres aumentar el ancho del trazo, sí, puedes, seleccionar el trazado y luego voy a usar dos valores PT para nuestro trazo. Ahora se ve perfecto. Ahora necesitas extraer el código AVG de esta imagen. Para eso, necesitamos hacer clic en la opción de archivo y luego guardar. Entonces es necesario asignar un nombre para este archivo. Voy a usar Demo. Y también hay que seleccionar el tipo de archivo, que es SVG. Después selecciono la opción Ue Mesa de trabajo, y después presiono Guardar Aquí puedes ver muchas opciones. Todo sigue igual. Necesitas usar CSS property style element, y luego necesitas presionar Ok para guardar este archivo. Volvamos al Visual Studio Creator y veamos qué tipo de atributo obtenemos de este código SVG. Por último, estoy de vuelta a mi Visual Studio Creator, y aquí puedes ver mi directorio, hay una imagen VG llamada demo dot VG Si abro esta imagen, aquí pueden ver algunos códigos. Como puedes ver, nuestro tamaño viewfo es 1920 5,080. Dentro de la etiqueta SVG, hay una etiqueta PAT, que creo en el software Adovillustrator, la clase PAT También puedes ver la propiedad CSS de este PAT. Y si abro esta imagen en mi navegador, puedes ver el resultado. Es solo una Ruta SVG, nada más. Así que una vez más, vuelvo a mi creador de estudio de resultados. Al principio, voy a crear un documento TML llamado index dot HTML, index dot HTML, y también creo la estructura básica Así que vamos a crear la animación de butt tech. Primero, voy a usar la etiqueta SVG. Entonces para escribir SVG y dentro de esta etiqueta Vg, necesitamos definir el tamaño de VivOC Y luego necesitamos definir ancho y alto a esta imagen SVG. Entonces primero, voy a definir ancho, ancho igual a 1920, y nuestra altura igual a 1080. Entonces este es nuestro tamaño de ventana gráfica. Y dentro de esta etiqueta SVG, primero, necesitamos crear la etiqueta a tope. Pero voy a usar esta etiqueta de trasero. Entonces voy a copiar la etiqueta del trasero. Y pegarlo aquí. Como necesitas darle estilo a este camino. Para ello, voy a usar etiqueta de estilo. Como puede ver, nuestro nombre de clase de ruta es t0s tipo punto ST Entonces dentro del Carver dice, primero, si te muestro mi código de imagen SVG, aquí puedes ver nuestra propiedad de campo es ninguna Entonces voy a copiar la misma propiedad CSS y valor de este código, y lo voy a usar aquí. Entonces si configuro este archivo y abro este archivo con el servidor p, aquí puedes ver que crea la misma ruta de trazo con color azul. Y ahora necesito crear un punto rojo, que va a seguir este camino. Para eso, necesitamos usar etiqueta circular. Volvamos al código de Visual Studio editado y tratemos de entender cómo ha funcionado. Entonces primero, voy a crear una etiqueta circular después de la etiqueta PT, círculo, y voy a usar el método de estilo interior para este círculo. Así que para usar etiqueta de estilo. Nuestra primera propiedad es relleno y nuestro color de relleno es rojo. Voy a usar el valor hexa para eso. Capital FF 00, 00. Como saben, este es el valor hexa de color rojo y nuestra segunda propiedad es trazo Voy a teclear trazo aquí. Para trazo, voy a usar el color blanco. Como saben, para crear un círculo, necesitamos usar el valor del radio. Voy a usar R igual a y dentro del doble curso, nuestro valor de radio es 8.5. Si configuro este archivo, y después te muestro mi navegador, aquí puedes ver un punto rojo en la esquina del portátil. Ahora necesitamos iniciar la animación que pueda mover nuestro punto rojo de este punto a este punto, siguiendo este camino. Para estos, necesitamos usar una propiedad de animación SVG y el nombre de la propiedad de animación es animate motion Dentro de esta etiqueta circular, voy a usar animate motion tag, animate Primero, necesitamos definir el camino de esta animación. Para ello, voy a usar la propiedad path. Trayectoria igual al interior de los códigos dobles. Voy a usar la misma ruta, así que voy a copiar esta ruta, y luego la voy a pegar aquí y nuestro siguiente atributo es el atributo duration. Voy a usar DR igual a seis segundos, nuestra siguiente propiedad es llenar igual a, voy a usar el valor de congelación, FRE Z E. Ahora solo necesitamos cerrar la etiqueta de movimiento animado Eso es. Déjame explicarte todo esto una vez más. Primero creo una etiqueta AVG, cuyo tamaño de pie de vista es 1920 5,080 Después dentro de esta etiqueta VG, primero creo una etiqueta a tope, y estas son las coordenadas de esta etiqueta put, y ya diseñamos nuestra etiqueta put usando esta clase Entonces creo un punto rojo usando etiqueta circular y nuestro valor de radio de punto rojo es 815. Entonces utilizo una etiqueta de animación SVG, que es el movimiento animado Va a animar nuestro punto rojo. Y ahora necesitamos mover el punto rojo acuerdo a este camino. Para eso, utilizo atributo tech butt. Y dentro del atributo buttek, utilizo el mismo valor. Si no usamos el mismo valor, nuestro punto rojo, no vamos a seguir este camino, y luego proporcionamos tiempo de duración de animación, que es de seis de nuevo. Y nuestro modo de campo de animación es congelar. Es mezquino cuando la pista esté completa, va a congelar nuestro punto rojo. Entonces si configuro este archivo y luego te muestro mi navegador, y luego delt mi navegador, aquí puedes ver que ejecutamos perfectamente nuestra animación butt tech Después de que el rastreo haya terminado, va a congelar nuestro final de este camino. Espero que ahora el concepto de animación Path tech sea claro para ti. Gracias por ver este video. Estén atentos para nuestro próximo ejercicio. 27. Animación de envoltura de mosaico svg: Hola, chicos. Es bueno verte de vuelta. Este es nuestro cuarto ejercicio relacionado con la animación SVG. En este ejercicio, aprenderemos, ¿cómo podemos envolver un título con un trazo? Aquí, puedes ver algún texto en tu pantalla. Si voy en este texto, se puede ver la animación. Lo llamamos Title rapear Animación. Veamos cómo podemos crear el efecto de animación SVG? Aquí puedes ver en tu pantalla lado a lado, abro mi Visual Studio Creator y mi navegador usando la extensión de servidor light, y ya creo un documento TML Al principio, dentro de la etiqueta corporal, voy a crear una etiqueta profunda. Entonces para escribir, TV nuestra clase profunda es rapero SVG rapero. Dentro de este contenedor profundo, voy a crear una etiqueta SVG. Voy a decir altura Ot a esta etiqueta SVG, altura igual a dentro de los códigos dobles, 60. Y ancho igual al interior de los códigos dole, 320. También es necesario proporcionar el espacio de nombre Min. Déjame mostrarte. En algún momento esta declaración es necesaria y a veces no. Después dentro de la etiqueta SVG, voy a crear un rectángulo. Para ello, voy a usar etiqueta rec, RCT. Además, voy a asignar una clase a este rectángulo. El nombre de la clase es shape, y ahora voy a declarar alto y ancho a este rectángulo. Altura igual a 60 y anchura igual a 320. Después presiono la flecha para terminar esta etiqueta. Si configuro este archivo, aquí puedes ver la imagen. Como saben, por defecto, venía con color de relleno negro. Aquí puedes ver que crea un rectángulo cuya altura es 60 y la anchura es 320. Después dentro de la etiqueta SVG, voy a crear otra etiqueta dip, Dev y también voy a asignar una clase a este texto dip. Voy a escribir un texto en este contenedor, tu texto. Texto. Si configuro este archivo, puedes ver el resultado. Así que completamos con éxito nuestra porción ATL. Y ahora necesitamos trabajar con la sección de estilo. Entonces primero, voy a crear la etiqueta de estilo dentro de la etiqueta de la cabeza. Entonces escribe estilo. Dentro de la etiqueta de estilo, primero, voy a seleccionar ML y body tag. Entonces escriba TML, cuerpo. Después dentro de los surge, primero, quiero establecer un color de fondo. Voy a usar propiedad de fondo. Para Valor, voy a usar el valor RGV RGB. Entonces dentro de la ronda está, voy a escribir 20 2020. Voy a poner color gris oscuro en nuestro fondo. Si configuro este archivo, puedes ver el resultado. Ahora voy a establecer una altura a este cuerpo y a esta etiqueta TML Así que para escribir altura propiedad, altura 100%. Entonces el texto alinea al centro, y voy a usar desbordamiento oculto. Si configuro este archivo, ahora puedes verlo alinear horizontalmente nuestro centro de contenido. Ahora voy a estrellar este contenedor padre. De qué clase es el rapero Sweg. Entonces voy a escribir vg rapero. Después dentro de la res de Cali al principio, voy a usar propiedad de posición, posición relativa. Top 50%. Solo quiero ingresar este contenido verticalmente. Por eso uso esta propiedad, y luego voy a usar transform property. Transforma, traduce Y -50% y nuestro valor de margen es automático También nuestro rapero con este 320 pixel Si configuro este archivo, puedes ver el resultado. Así que alineamos vertical y horizontalmente nuestro centro de contenido de esta página. Y ahora voy a trabajar con esta forma rectangular. Para ello, voy a usar la clase Shape dot shape. Después dentro del Cariss al principio, voy a transpar en esta Para ello, voy a usar la propiedad de campo. Siéntete transparente. Si configuro este archivo, ahí se puede ver el resultado. Y luego voy a asignar un trazo a este rectángulo. Para esto, voy a usar la propiedad de trazo, y nuestro color de trazo es rojo. Si configuro este archivo, ahora puedes ver este trazo, y además voy a aumentar el ancho del trazo, que es de ocho píxeles. Si configuro este archivo, puedes ver el resultado. Y ahora necesitamos trabajar con la matriz de trazos y la propiedad de osite de escritorio de trazo Déjame mostrarte suma para escribir matriz de trazos, 140 píxeles a 540 píxeles. Usando estos valores, podemos controlar nuestro tamaño de trazo de trazo. También trazo brecha de tablero. Siguiente propiedad es trazo ds opuesto, y nuestro valor de posición de escritorio de trazo es menos 474 valor Si configuro este archivo, puedes ver el resultado. Además, voy a usar la propiedad border para esta forma, sum para usar border. Borde, el tipo de borde de cinco píxeles es sólido y el color del borde es negro. Si configuro este archivo, todavía existe debajo de la línea de trazo. Por eso no se puede ver el resultado. Y ahora voy a usar la propiedad de transición para la duración de la animación. Entonces soy transición de tipo. Para el ancho de trazo, voy a usar 1 segundo. Para stroke dash posite voy a usar uno de nuevo, vez más, y para la matriz de trazos, voy a usar on again duration una vez más Si configuro este archivo, aquí puedes ver que no hay cambios. Quiero aplicar esta transición cuando esté sobre mi cursor en el texto. Ahora voy a darle estilo a este texto. Para esto, dentro de esta etiqueta de estilo, voy a usar la clase de texto texto punto. Entonces dentro del Cariss al principio, voy a cambiar el tamaño de fuente y nuestro tamaño de fuente es 22 píxeles de ahí vienen y luego voy a cambiar la propiedad linehight Voy a escribir la altura de línea y nuestro valor de altura de línea es de 32 píxeles Y también necesito algo de espacio entre estas letras. Voy a usar la propiedad de espaciado entre letras, espaciado entre letras, y el valor es de ocho píxeles. Y también voy a cambiar el color de la fuente, así que voy a escribir color y nuestro color es el blanco. Si configuro este archivo, puedes ver el resultado. Ahora voy a mover este texto por encima de la línea. Para eso, voy a usar el valor máximo, top -48 pixel, y nuestra posición es relativa Si configuro este archivo, puedes ver el resultado. Ahora voy a usar el selector hover para aplicar este efecto. Entonces voy a usar la clase de rapero punto SVG. Colon flotar. Entonces, cuando sobre este contenedor rapero VG, quiero cambiar la propiedad stroke dash array y stroke dash osite propiedad Para eso, necesitamos seleccionar la forma, la forma. Entonces dentro de la surge, al principio, voy a cambiar el trazo con valor, así tipo, trazo, con. Voy a usar el valor de dos píxeles para nuestro trazo. Y nuestra siguiente propiedad es stroke dash opsite nuestro valor opuesto de escritorio de trazo es cero, nuestra última propiedad es stroke dash A. Y nuestro valor de error de trazo es 760 Si configuro este archivo y luego sobre mi cursor en el texto, aquí puedes ver el efecto. Así que creamos con éxito el efecto de envoltura de título. Para crear un tamaño de matriz de tablero perfecto, necesita trabajar con la propiedad de error de trazo y la probidad de desplazamiento de trazo Solo hay que recordar que estos valores son muy importantes. Si cambia el tamaño del rectángulo, y luego también es necesario cambiar los valores de propiedad. En nuestro próximo ejercicio, voy a explorar más sobre esta propiedad. Gracias por ver este video, estén atentos para nuestro próximo ejercicio. 28. Animación de texto ondulado 90p mejorada: Me alegro de verles chicos. Una vez más, estoy de vuelta con un nuevo proyecto emocionante. En este proyecto, vamos a crear animación de texto wav irritable con rotación de 360 grados. Como puedes ver, te está dando texto efecto WaterWV. No sólo eso, nuestro contenido también es irritable. Podemos cambiar el texto directamente desde el navegador. Podemos seleccionar nuestro contenido desde el navegador y también podemos eliminarlo. Y podemos poner cualquier contenido de texto aquí. En nuestra conjetura, voy a poner hola mundo. Para este proyecto, necesitamos usar filtros SVC. Entonces, sin perder el tiempo, comencemos la práctica. Así que finalmente, estamos en resultado editor de código studio, y como puedes ver, ya creamos index dot t file, y también creamos style dot archivo Sass y ya vinculamos nuestro archivo de estilo con este archivo t Al principio, dentro de la etiqueta del cuerpo, voy a crear la etiqueta H dos, H dos. Y dentro de esta etiqueta dos, voy a escribir algún texto. Por ahora, voy a escribir tu texto. Como puedes ver, ya abrimos este archivo con if server en nuestro navegador. Déjame abrir el navegador. Aquí puedes ver en mi navegador tu texto. Volvamos al editor de código de Visual Studio. Pero quiero contenido benéfico. Para eso, necesitamos usar un atributo, y nuestro nombre de atributo es content itable. Aquí voy a escribir content itable, y tenemos que hacerlo verdad. Si configuro este archivo y vuelvo al navegador y hago clic en este texto, aquí puede ver que editamos directamente nuestro texto. Puedes poner cualquier texto aquí. Supongamos que quiero escribir nombre. Ahora podemos editar nuestro texto a través del navegador. Si vuelvo a cargar este archivo, como pueden ver, está de vuelta a la antigua contener su texto Volvamos al arranque de Visual Studio otra vez. Ahora tenemos que saltar al archivo de estilo. Al principio, voy a darle estilo a nuestra etiqueta corporal. Cuerpo. Es que el calibre o primera propiedad es margen. Margen, cero. Nuestra siguiente propiedad es padding, padding también cero. Nuestra tercera propiedad es display, y quiero usar flex vi display flex, Justify content center. Además, quiero alinear los ítems. Es por eso que voy a usar la propiedad del elemento alineado, alinear los elementos en el centro. Con eso, necesitamos establecer la altura mínima. Hombre altura cien VH. También, voy a decir que es color de fondo. Fondo para color de fondo, voy a usar RGV RGB Para rojo, voy a pasar 49. También para el verde, voy a pasar 49, y para el azul, también, voy a pasar 49. Si configuro este archivo, como pueden ver, es proporcionar color de fondo gris oscuro. Si te muestro mi navegador, aquí puedes ver en mi navegador, dijimos color de fondo gris oscuro, y además alineamos nuestro contenido a mitad de esta página. Volvamos a la coordinadora otra vez. Ahora necesitamos darle estilo a nuestra etiqueta H dos, H dos. Dentro de la cali resis, nuestra primera propiedad es el color. Color, y voy a usar el color blanco. Blanco. Nuestra segunda propiedad es el margen. Margen cero. Nuestra siguiente propiedad es el relleno. Relleno también cero, y voy a usar familia de fuentes. Fuente, familia, sensorial. Voy a usar fuente sensorial aquí y también voy a usar la fuente 08. Fuente, espera. Me gustaría ir con la fuente más audaz. Voy a seleccionar 900. Y luego voy a seleccionar tamaño de fuente tamaño de fuente am. Si configuro este archivo y vuelvo al navegador, aquí puedes ver el resultado, tu texto. Y si quieres editarlo, también puedes. Puedes poner cualquier texto aquí. Supongamos que voy a pasar Hello World. Podemos editar contenido directamente, pero si recargamos este navegador, como puedes ver, vuelve al contenido antiguo, y ahora necesitamos saltar a la parte más importante de este video, que es el filtro VG Volvamos al código de Visual Studio y hay de vuelta al archivo de la tabla de índice. Y aquí voy a crear un filtro VG. Al principio, voy a tomar etiqueta VG, VG. Dentro de esta etiqueta VG, voy a tomar etiqueta filtrada Además, voy a establecer un ID a este filtro. ID igual a renunciar. Después dentro de esta etiqueta de filtro, primero, voy a usar filtro de turbulencia FE, turbulencia FE Y entonces necesitamos usar algún atributo. Nuestro primer nombre de atributo es type. Escriba igual a dentro del código doble nuestro nombre de tipo es turbulencia. Nuestro siguiente nombre de atributo es la frecuencia base. Frecuencia base tipo Shamo. Frecuencia base igual a 0.005. Nuestro siguiente atributo es num octava. Num octava, igual a cinco. Voy a decirlo num octava cinco. Voy a establecer este archivo. A continuación, necesitamos crear otro filtro, que es F mapa de desplazamiento. Entonces aquí voy a escribir FI mapa de desplazamiento. Hecho. A, tenemos que pasar dos atributos aquí en igual a los gráficos de origen. Nuestro siguiente atributo es la escala. Escala igual a 50. Así que creamos con éxito nuestro filtro AVG. Ahora necesitamos aplicar este filtro en nuestra etiqueta corporal. Así que voy a volver al archivo CSS y dentro de esta etiqueta body, voy a usar un filtro de nombre de propiedad. Filtra URL, y aquí, voy a usar esta onda ID. Copio esta identificación, y aquí voy a pasar hass etiquetar nuestro nombre de identificación Si configuro este archivo te muestro mi navegador, aquí puedes ver en mi navegador, el resultado del desplazamiento. Aquí puedes ver cómo este efecto restringe nuestro texto. Volvamos al archivo CSS porque necesitamos alinearlo a mitad de esta página. Aquí, voy a darle estilo a otra etiqueta, que es SVG SVG, dentro de la cali resis, voy a poner alto el W W cero. Altura, también cero. Si configuro este archivo y te muestro mi navegador, ahora puedes ver que es Alinear a mitad de esta página, y ahora vamos a saltar a nuestra parte final, que es la animación. Necesitamos rotar nuestro contenido 360 grados. Volvamos al código iter. Ahora dentro de la etiqueta H dos, voy a tomar propiedad de animación. Animación y nuestro nombre de animación es animado. Quiero ejecutar nuestra animación para el 22. Esta es nuestra duración de animación. Y nuestra dirección de animación es lineal. Y por fin, quiero ejecutar nuestra animación en tiempo infinito. Entonces aquí voy a usar infinito Vado infinito. Y ahora necesitamos crear el fotograma clave para esta animación Así que aquí voy a usar la palabra clave de fotogramas clave a la tasa de fotogramas Y nuestro nombre de animación es animado. Entonces en que los calibres esté en posición 0% gana nuestra posición de inicio, quiero usar transformar propiedad Transformar y aquí voy a usar rotar rotar 360 grados. Entonces en nuestra posición final significa 100% posición. Una vez más, voy a usar transform property. Transformar, rotar. Y ahora quiero girarlo cero grados. Si configuro este archivo y vuelvo a mi navegador, déjame mostrarte. Aquí puedes ver nuestro efecto final con la animación. No sólo eso, también nuestro contenido es irritable. Podemos editar directamente. Entonces aquí voy a pasar hola mundo. Hola mundo. Entonces esto es todo para este tutorial. Espero que les guste su proyecto. Gracias por ver este video. Estén atentos para nuestro próximo proyecto. 29. Enmascaramiento de texto SVG con video: Hola, chicos. Una vez más, volví con un nuevo ejercicio emocionante. En este ejercicio, voy a realizar enmascaramiento de prueba SVG con video. En este ejercicio, vamos a aprender ¿cómo podemos usar el texto SVG y convertirlo en una máscara de recorte Puedes mostrar cualquier cosa detrás del texto. Puede ser video, tal vez imagen, o cualquier cosa, pero me gustaría ir con video. Empecemos la práctica y veamos ¿cómo podemos crear esta máscara? Entonces, finalmente, vuelvo a mi coordinadora de estudio visual. Como pueden ver, ya creo un documento TML, y también creo un archivo CSS de estilo punto Aquí puedes ver en mi directorio de trabajo actual, hay un video, video.p4, y voy a usar este archivo de video para este ejercicio, y ya abro este archivo usando la extensión del servidor light Al principio, dentro de la etiqueta body, voy a crear una etiqueta VG un VG, y necesitamos establecer heighten wed a esta Voy a usar propiedad de altura, altura igual al 100%. Y con igual al 100%. Voy a usar la página completa de nuestro navegador y dentro de la etiqueta SVG, voy a usar textag para crear el texto Entonces para escribir texto, y nuestro texto es máscara SVG. Si configuro este archivo y te muestro mi navegador, aquí puedes ver en mi navegador, no hay nada porque no podemos establecer ningún color de campo a este texto. Voy a asignar color de campo y posición a este texto. Para ello, necesitamos pasar la coordenada X igual al 50% y las coordenadas Y igual al 50%. Esta coordenada va a poner nuestro texto en medio de la página, y también necesitamos proporcionar color de campo al texto, así que voy a usar la propiedad de campo, igual a la tasa. Si configuro este archivo y te muestro mi navegador, aquí puedes ver el texto es Vig mask, pero no está centrado verticalmente Tenemos que centrarlo verticalmente. Vayamos una vez más al crator de estudio visual. Entonces salta al archivo CSS y voy a seleccionar la etiqueta body. En cambio el Cali vss, voy a establecer altura. 100 VH y fusionarse en cero. Si configuro este archivo, y después te muestro mi navegador, aquí puedes verlo vertical y horizontalmente alinear nuestro centro de texto. Vamos a darle estilo a este texto y hacerlo mejor. Voy a darle estilo a la etiqueta SVG. Snotype SVG dentro de la Cali resis. Primero, voy a jugar con el tamaño de la fuente. Tamaño de fuente 15 EM y nuestra posición es obsoleta, y el valor máximo es cero. Además, el valor de elevación es cero y la altura, 100%. Si configuro este archivo y te muestro mi navegador, aquí puedes ver el texto es WiGimsk Cambiemos la familia de fuentes de este texto. Voy a usar MonstertFont para este texto, y ya copio el enlace desde el frente de Google. Pronto para pegarlo aquí. Depende totalmente de ti qué tipo de fuente quieres usar. Luego volvamos al archivo Style Sass, y voy a usar propiedad de familia de fuentes, familia de fuentes MonsoroWise, MonsoroWise Si configuro este archivo y para ti mi navegador, aquí puedes ver, cambiamos nuestro estilo de fuente. Pero si notas aquí puedes ver, nuestra fuente no sigue siendo medalla en nuestra página. Para ello, necesitamos usar la propiedad de anclaje de texto. Déjame mostrarte. Entonces dentro de mi etiqueta de texto, voy a usar esta propiedad text anchor igual a medal. Si configuro este archivo, te muestro mi navegador, ahora puedes ver nuestro texto es alinear por soldadura. Pero hay otro problema. Nuestro texto no responde. Para eso, necesitamos usar mediaquery. Déjame mostrarte. Volvemos al archivo CSS de estilo, y voy a usar mediaquery ored media, screen, y voy a usar Maxi probabilidad, Max, Con quiero romperlo por dek de tamaño, así que voy a usar Se va a aplicar una nueva propiedad CSS cuando resolución de nuestro navegador esté por debajo de 1,200 píxeles. Cuando el navegador está por debajo de 1,200 píxeles, quiero disminuir el tamaño de fuente. Voy a seleccionar la etiqueta SVG y dentro del hígado dice, voy a usar la propiedad de tamaño de fuente. Tamaño de fuente cuatro EM. Si configuro este archivo y te muestro mi navegador, aquí puedes ver nuestro navegador con es mayor a 1,200 pixeles. Por eso está escrito 15:00 A.M. Tamaño de fuente. Pero si reduzco el tamaño del navegador, aquí puedes ver que nuestra fuente se reduce al tamaño 4:00 A.M. Si aumento el tamaño del navegador, puedes ver el resultado. Vamos a establecer una transición para que la transformación sea hermosa. Voy a usar la propiedad de transición aquí. La duración de la transición es de 1 segundo, y luego tenemos que pasar la propiedad de transición. ¿Por qué necesitamos aplicar el efecto de transición? Quiero aplicarlo en nuestro tamaño de fuente. Entonces para copiar el tamaño de fuente, voy a pegarlo aquí. Si configuro este archivo y luego vuelvo a mi navegador, y si reduzco el tamaño del navegador, puedes ver la transición. Como puedes ver, nuestra fuente cambia suavemente su tamaño. Entonces nuestro trabajo de hub está hecho. Agreguemos un video a nuestra página de tabla. Voy a usar la etiqueta de video aquí. Y dentro de esta etiqueta de video, voy a usar algunos atributos, algo como reproducción automática, o el siguiente atributo es colocar en línea, mutar, bucle y preloado Dentro de esta etiqueta de video, voy a usar la etiqueta fuente para vincular este video. Entonces para escribir, fuente, SRC y nuestro nombre de archivo de video es video.v4 Si configuro este archivo y te muestro mi navegador, aquí puedes ver el resultado en tu pantalla. Ahora necesito usar dos etiquetas SVG más, Diptag y Musk tag Déjame mostrarte. Voy a escribir Diptag aquí Das dentro de la Diptag voy a crear la etiqueta Musk, Musk. Como voy a asignar ID a esta máscara, ID igual a, y nuestro nombre de identificación es Musk Y también necesito posicionar esta máscara, así que voy a usar X igual a cero, y también la posición YxS es cero También voy a decir altura y ancho a esta máscara, altura igual al 100%, y también necesito proporcionar ancho y ancho igual al 100% también. Entonces voy a mover esta etiqueta de texto dentro de la etiqueta de máscara. Si configuro este archivo y te muestro mi navegador, aquí puedes ver que nuestro texto se ha ido, y ya estás familiarizado con la etiqueta de definición, aprenderemos sobre la etiqueta dep en nuestro tutorial anterior, no lo voy a explicar una vez más Entonces dentro de la etiqueta masiva, necesitamos crear un rectángulo. Entonces voy a usar etiqueta rec. Voy a usar la misma propiedad de alto peso para este rectángulo. Entonces voy a copiar las coordenadas, y voy a pegarlas aquí, y también necesito usar la misma forma de rectángulo fuera de esta etiqueta dep, algo así Si te muestro mi navegador, ahora no puedes ver nada. Ahora necesitamos seleccionar nuestra forma de rectángulo en nuestro CSS. Voy a escribir SVG rec. Después dentro del Carli resiste, voy a llenar el rectángulo de color blanco Voy a usar propiedad de campo, blanca. Entonces voy a usar la propiedad de máscara, máscara, dos puntos, URL. Dentro del paréntesis, aquí, necesitamos proporcionar este ID, máscara Entonces voy a copiar la identificación, y voy a escribir hashtag o máscara de identificación. Si configuro este archivo, debería funcionar. Vayamos al navegador y veamos qué pasó. Aquí puedes ver nuestro video SVG debe funcionar perfectamente, y si reduzco el tamaño del navegador, también ha funcionado perfectamente. Ahora te queda claro cómo podemos realizar el enmascaramiento de sabor SVG. Gracias por ver este video. Estén atentos para nuestro próximo ejercicio. 30. Dibujo de desplazamiento: Hola, chicos. Me alegro de verte de vuelta. Una vez más, vengo con un nuevo ejercicio emocionante. En este ejercicio, vamos a aprender dibujo de desplazamiento usando la etiqueta VG Path Así que saltemos al navegador web. Como puede ver, no hay nada en esta página. Está completamente en blanco. Pero cuando me desplazo con mi ratón, se ve que dibujó un cuadro, dibujo una forma de estrella. Este truco de VG está relacionado con la barra de desplazamiento. Entonces cuando desplace mi navegador , completa la forma. Entonces veamos cómo podemos crearlo. Uno al lado del otro, abro mi Visual Studio Creator y mi navegador usando la extensión Lifesaver, y ya creo un documento TML llamado index Al principio, dentro de la etiqueta body, voy a crear la etiqueta Vg SVG. Además, voy a asignar ID a esta etiqueta SVG, ID igual a mi SVG. Después dentro de la sección de cabeza, voy a usar estilo. Dentro de esta etiqueta de estilo, primero, voy a seleccionar el cuerpo y nuestra primera propiedad es altura, altura igual a 3,000 píxeles. Podría sorprenderte por qué uso esta cantidad de altura porque no tenemos mucho contenido en esta página web. Por eso para propósitos de desplazamiento, voy a usar esta altura Si configuro este archivo, aquí puedes ver la barra de desplazamiento. Entonces voy a iniciar la imagen SVG. Hashtag, mi SVG, y que los calibres es nuestra primera propiedad es la posición Posición fija. Voy a usar posición fija para este ejemplo. Entonces arriba 15%, para la imagen SBG, voy a usar 400 píxeles de ancho, ancho 400 píxeles y alto, 210 píxeles También voy a usar margin en lap side, así que voy a escribir margin p -50 pixel Porque quiero posicionar la imagen SVG en esa posición, no en la parte superior izquierda de la esquina. Por eso utilizo estas propiedades. A continuación, voy a crear la forma de estrella usando etiqueta a tope. Entonces Camino cerrando camino I la etiqueta a tope. Nuestra primera propiedad es sentir. Sentirse igual a ninguno. No quiero ningún color de campo para la forma de estrella. Entonces nuestra siguiente propiedad es trazo. Golpe igual a la tasa. Y también, quiero establecer este ancho de trazo. Así que voy a usar la propiedad de ancho de trazo Ancho igual a tres. Y también, voy a establecer ID a este camino. ID igual a estrella. Así que vamos a crear la forma usando coordenadas PT. Como sabes, para crear una forma usando put tag, primero, necesitas usar el atributo D, Dequal dos en lugar de los códigos dobles, nuestro punto de partida Necesitamos proporcionar el punto de partida, 150 píxeles, y también necesitamos proporcionar el punto. Y nuestro punto es 200 píxeles, y nuestro siguiente punto es L 225 pixel. Y también el punto final es cero píxel. Si configuro este archivo, como pueden ver, dibuje una línea. Oye, hay un error en la ortografía de ancho. Olvidé proporcionar D entre I y T. Si configuro este archivo, ahora se puede ver el ancho del trazo. Este es nuestro punto de partida. 150 píxeles YxS y 200 píxeles Xxs. Este es nuestro siguiente punto. Para crear una nave estelar, voy a crear otro punto en este lugar. Para XXs voy a pasar 300 y para YxS voy a pasar 200 Si configuro este archivo, puedes ver, es crear otro punto en esa posición. Y ahora voy a crear otro punto algo en esa posición. Para ello, voy a pasar, 150 XX y 50 YxS Si configuro este archivo, como pueden ver crea la línea, y luego quiero otro punto en esa posición. Entonces en dirección Xs, voy a usar L 300 y en dirección YX, voy a usar solo 50 Si configuro este archivo, ahora se puede ver el punto. Y ahora necesitamos completar esta forma. Entonces necesitamos trazar una línea desde este punto hasta este punto. Y como saben, para volver al punto de inicio, necesitamos pasar el valor Z. Solo quiero pasar Z. si configuro este archivo, ahora puedes verlo completar nuestra forma de estrella Así que completamos con éxito el pod de dibujo. Pero si me desplazo por esta página, no va a dibujar la imagen. Para ello, necesitamos usar JavaScript. Al principio, voy a crear la etiqueta script. Después de la etiqueta BG, voy a escribir script. Después dentro de la etiqueta script, al principio, voy a obtener el ID de este elemento path, que es star, er star igual a document dot, get element by ID. Dentro del paréntesis, nuestro nombre de identificación es estrella y dos puntos para terminar la línea A continuación, necesitamos obtener la longitud total de esta forma. Para ello, voy a crear otra variable, er enésima. Igual al punto estrella, voy a usar la función get total length. Ahora tenemos la longitud total de esta forma de estrella. A continuación, tenemos que jugar con matriz de trazo dh y el valor de superposición de trazo de guión. estrella, punto, estilo, punto, Matriz de estrella, punto, estilo, punto, trazo y trazo igual a la longitud. Después punto y coma para terminar esta línea. Matriz de trazos media, esta es la posición inicial de este dibujo. Usando la propiedad de escritorio de trazo Osete, podemos ocultar esta forma de estrella, y a continuación, voy a usar stroke dash osetepperty Voy a reemplazar la matriz de tablero de trazos con un escritorio de trazo opuesto. Usando esto, podemos ocultar esta estrella con un guión perturbador y eliminar esta línea para mostrar a la estrella ante este crudo frío Ahora necesitamos encontrar porcentaje de este pergamino. Para estos, necesitamos usar la función Window Add even listener Déjame mostrarte así escribe window dot, Un oyente parejo. Entonces dentro del paréntesis, nuestro nombre de evento es scroll, cuando me desplazo por la página web, quiero llamar a una función y nuestro nombre de función es mi función Ahora necesitamos crear una función que pueda calcular este valor de desplazamiento Entonces voy a crear esta función. Al principio, voy a usar function keyword, function y nuestro nombre de función es mi función. Dentro del paréntesis, no quiero pasar ningún parámetro, así que lo dejo negro Después dentro de la Calibra, al principio, voy a crear una variable, y nuestro nombre de variable es scroll percent Equival a dentro del paréntesis, primero, necesitamos unir desplazamiento de cuerpo de valor con valor de desplazamiento de documento. Déjame mostrarte. Documento punto, cuerpo, punto, scroll a plus, con eso, voy a agregar que voy a agregar que voy a agregar elemento documento scroll de valor, document dot, document element, dot, scroll to, y necesitamos dividirlo con valor height. Dentro del paréntesis, documento punto get element, dot scroll height y desde scroll height, necesitamos menos la altura del cliente Voy a escribir menos elemento documento altura cliente. Este cálculo va a devolver los porcentajes fríos. Como pueden ver, cuando configuro mi archivo, ya está ocultando mi forma y ahora necesito dibujar la forma cuando me desplace hacia abajo. Voy a crear otra variable, y nuestro nombre de variable es draw, igual a length, multiplicar por scroll percent y semig para terminar esta línea Si quieres invertir el dibujo, cuando te desplazas hacia arriba para este punto estrella, estilo, punto, trazos opuestos, igual a longitud menos braw Si configuro este archivo y me desplace por mi página, como pueden ver, dibuje perfectamente nuestra forma. Si lo desplazo hacia arriba, como pueden ver, revierte el dibujo. Si me desplazo hacia abajo, dibuja nuestra imagen, y si me desplazo hacia arriba, es invertir el dibujo. Espero que les guste este proyecto. Gracias por ver este video, estén atentos para nuestro próximo proyecto. 31. Animación de cargador de SVG: Me alegro de verles chicos. En esta sección, vamos a crear todo el cargador uno por uno. Aquí puedes ver un total de ocho tipos diferentes de cargador SVG y voy a crear todo el cargador uno por uno. Voy a iniciar nuestros proyectos con este cargador. Veamos cómo podemos crear este cargador. Entonces, finalmente, estoy de vuelta a mi software Adovillustrator, y creo un área de booard de vista 200 Como puedes ver, dentro de esta zona de mirador, tenemos que dar vuelta a dos formas, una completa forma de círculo anular gris Con eso, como pueden ver, hay un pedacito de círculo. Y ahora necesito rotar esta pieza roja de círculo de acuerdo con la circunvalación del círculo. Ahora el quoi es como podemos crear esta forma. Como pueden ver, ya creo un tamaño similar de área de ventana gráfica aquí voy a crear un círculo sin color de campo Entonces voy a alinear al medio esta forma de círculo, algo en esa posición. Entonces voy a aumentar el valor de trazo a píxel. Depende de ti qué tipo de peso de golpe quieres. Entonces necesitamos convertir este trazo en un trazado de contorno. Para ello, es necesario seleccionar el trazo y luego hay que ir a la sección objecte, y aquí puede ver la opción path Simplemente haga clic en trazo de contorno. Ahora convierte nuestro trazo en una forma, y ahora voy a cambiar el color del trazo, algo así como el color gris. Entonces voy a duplicar esta forma de círculo en esa posición. Para ello, voy a alabar Control C, Hoja de control V. Aquí puedes ver en mi sección de capas, tenemos que dar forma a dos ahora, y ahora voy a ocultar nuestra forma anterior. Y ahora voy a cortar esta forma de círculo de este punto a este punto. Para esto, voy a usar la forma de línea. Voy a trazar una línea de este punto a este punto y me voy a bajar a este Voy a seleccionar todas las formas y líneas juntas, y luego voy a alabar el objetivo de la nave para activar la herramienta Shape Builder. Voy a cortar esta tortuga a partir de este punto, y también voy a quitar las líneas de trazo. Y luego voy a rellenar la forma de color rojo. Y también, voy a visibilizar mi círculo anterior. Por lo que creamos con éxito la estructura del cargador. Y ahora necesitamos establecer esta imagen como un Vigimage. Para eso, necesitas ir a la sección de archivos y luego alabar Guardar como. Y aquí puedes ver la opción de tipo de archivo, AVG, usar mesas de trabajo y luego alabar guardar Y depende de ti qué tipo de propiedad CSS quieres usar. Se puede utilizar atributo de estilo, de lo contrario, se puede utilizar el elemento de estilo y se conoce el proceso. Ya guardo mi imagen SVG. Por eso no voy a volver a guardarlo. Volvamos al codador de visual studio e intentemos entender cómo podemos crear este cargador Por último, vuelvo a mi codador de Visual Studio y ya abro documento TML llamado index dot También puedes ver una imagen AVG en mi directorio de trabajo actual llamado loader dot SVG. Si te muestro el código SVG, puedes verlo claramente. Como puedes ver, nuestro tamaño de wok de vista es 200 por 200 y como puedes ver, tenemos que hacer dos path en nuestra imagen SVG Nuestro primer camino es para círculo completo y nuestro segundo camino es para hub parte de este círculo. Ahora voy a copiar todo el código de este archivo. Y luego voy a saltar al archivo STL de punto índice. Al principio, dentro de mi sección de cuerpo, voy a crear un cargador de clases div. Dentro de este div, voy a pegar todo el código SVG, algo así. Si configuro este archivo y te muestro mi navegador, puedes ver la imagen SVG en nuestro navegador. Pero se ve bastante enorme. Tenemos que reducirlo, también tenemos que posicionarlo a mitad de esta página. Así que una vez más, estoy de vuelta al coriador de estudio visual y voy a escribir etiqueta de estilo aquí Estilo. Al principio, voy a darle estilo al cuerpo. En cambio el ResSF de Cali, voy a usar la propiedad de margen Margen cero. Entonces voy a usar la propiedad padding, padding también cero. Y luego voy a establecer un color de fondo. Voy a usar el valor RGV. RGB dentro del paréntesis, nuestro Rvalue es 66 El valor G también es 66, y el valor B también es 66. Si configuro este archivo y te muestro mi navegador, aquí puedes ver que crea un color de fondo gris oscuro, entonces voy a reducir este tamaño de cargador. Para ello, voy a seleccionar la clase Loader. Cargador dentro de la altura de Cariss, 300 pixel, weed, también 300 pixel Si configuro este archivo y mostrando mi navegador, aquí puedes ver que redujimos con éxito nuestra imagen Y ahora necesitamos alinear esta imagen SVG, centro de esta página. Dentro del selector de cuerpo, primero, voy a usar la propiedad display, display flex, Justificar contenido, center, text align center. Si configuro este archivo y te muestro mi navegador, aquí puedes ver que alineas horizontalmente esta imagen. Ahora cuando asignarle un margen para centrarlo en medio de esta página. Voy a usar Margin Top Value. Margen superior 300 píxeles. Si configuro este archivo y te muestro mi navegador, aquí puedes ver que centramos nuestro cargador con éxito, y luego viene la parte principal de este tutorial. Tenemos que animar este cargador. Para ello, necesitamos rotar esta forma roja en el círculo Sargumpas Veamos cómo podemos rotar esta forma. Ahora necesitamos animar este camino. Al principio, necesitamos crear la etiqueta de ruta de cierre. Dentro de esta etiqueta a tope, necesitamos usar otra etiqueta, que es animar transformar Entonces, para escribir, animar, transformar. Como voy a cerrar esta etiqueta, y también necesitamos usar algunos atributos básicos. Nuestro primer atributo es el tipo de atributo. Igual a XML y también necesitamos proporcionar nombre de atributo igual para transformar nuestro tipo de animación es tipo, igual a rotar. Entonces necesitamos proporcionar el punto de inicio de la animación y el punto final de la animación. Para esto, voy a usar para esto, voy a usar de atributo. De igual a nuestro ángulo de rotación inicial es cero y luego necesitamos proporcionar el punto central de esta rotación. Tenemos que pasar Xxs y YxS. Como saben, nuestra vista VD funciona en altura y W es de 200 píxeles. Para encontrar el punto central, necesitamos dividir dentro de la altura con dos. Entonces si lo divido 200 por dos, está escrito 100. Esto es para X xs y de manera similar para Y xs está escrito 100. Este es nuestro punto X xs y este es nuestro punto del eje Y. Este es el punto de partida de esta animación y también hay que proporcionar el punto final de esta animación. Voy a usar dos valor dos, igual a dentro del doble curso. Y primero, necesitamos proporcionar el ángulo de rotación. Y quiero completar esta rotación, así que voy a usar 360 grados. Y también, necesitamos proporcionar el punto central. Entonces nuestra dirección sobrante es 100 y también la dirección YxS es 100 Y luego tenemos que proporcionar tiempo de duración de animación. Entonces voy a usar el valor der, der igual a 0.8 segundo. Y además, voy a ejecutar esta animación en tiempo infinito. Así que voy a usar el atributo de recuento repetido. Contar igual al interior de los códigos dobles, indefinidos. Si configuro este archivo y después te muestro mi navegador, aquí puedes ver en tu pantalla nuestro cargador funciona con éxito. Si quieres hacer esta rotación más rápida, necesitas disminuir el tiempo de duración. Déjame mostrarte. Ahora voy a usar 0.4 segundos de duración. Si configuro este archivo y te muestro mi navegador, aquí puedes ver que nuestra velocidad de rotación se incrementa. Espero que ahora te quede claro cómo podemos crear este cargador SVG. Gracias por ver este video. Estén atentos para nuestro próximo ejercicio. 32. Turbulencia de imagen y desplazamiento parte 1: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo ejercicio emocionante. En este ejercicio, te voy a enseñar cómo podemos crear el efecto de onda Tarvulens Si vuelvo a cargar mi navegador, como pueden ver, después de 2 segundos, realizó animación de efecto Tarvulence. Empecemos la práctica y veamos cómo podemos crear este proyecto. Para este ejemplo, voy a usar esta imagen. Como pueden ver, lado a lado, abro mi estudio de recursos Creator y mi navegador usando la extensión del servidor lip, y ya creo un documento TML llamado index dot TML También creo un archivo CSS de 40 estilo punto CSS. Ya vinculo este archivo con este archivo STL. A continuación, voy a usar la etiqueta SVG dentro de la etiqueta body, So ty SVG, luego dentro de la etiqueta SVG. Por ahora, no necesitamos especificar ningún cuadro de vista porque crearemos este VG para un filtro Entonces aquí voy a usar etiqueta de filtro. Filtro. Tenemos total 17 filtros diferentes en SVG. Pero para este tutorial, vamos a utilizar sólo dos filtros. Primero, voy a usar Tarulns y después voy a usar pen map desplazado Pero antes, voy a asignar un ID a este filtro, ID igual a ruido. Con eso, vamos a pasar coordenadas, posición y posición Y, X igual a dentro de la cita, 0%. De igual manera, Y igual a dentro de los códigos, 0%. Con eso, vamos a pasar ancho de filtro y alto de filtro, ancho igual al 100%. También altura igual al 100%. Usemos nuestro primer filtro, que es AE Tarvulens Suma empate FE tarbulens. Ahora necesitamos usar algunos atributos. Supongamos que nuestro primer atributo es la frecuencia base, invoca la base de empate, la mejor frecuencia igual a en cambio los códigos de muñeca, voy a pasar el valor total de dos, 0.02, y nuestro segundo valor es 0.03 Estos son dos valores diferentes. Va a efectuar la forma de onda de la lente estrella. Se puede experimentar con estos valores. Depende de usted y nuestro siguiente atributo es resultado, tiempo de suma, resultado. Resultado igual a ruido. Y también necesitamos pasar otro atributo que es num octava, tipo, num octava, igual a uno Además, voy a usar un ID para este filtro, ID igual a Travolens Entonces voy a completar esta etiqueta. Usemos filtro de turbulencia con una imagen y veamos cómo es así El software es etiqueta VG. Voy a crear otro dip. Profundo y nuestro dip plus es contenedor. Dentro de este contenedor profundo, voy a insertar imagen. Imagen, fuente IMG y nuestro nombre de imagen es, como puedes ver, OceanSUNPMO OceanSUNPMO Si configuro este archivo, puedes ver la imagen en nuestro navegador. Esto es por una parte de SML. Vamos a saltar al archivo CSS y darle estilo a esta imagen. Al principio, voy a peinar body tag. Cuerpo, margen izquierdo, cero, margen derecho, cero. Y también voy a establecer altura a este cuerpo. Altura igual a cien VH. Yo también voy a establecer la posición de posición relativa, y luego voy a darle estilo a la etiqueta SVG. Entonces para seleccionar SVG Es la carirassPosition, posición igual a absoluta Y luego siguiente, voy a darle estilo a nuestro contenedor D. Así que voy a copiar el nombre del elenco y volver al archivo de estilo. Contenedor dentro del calibre dice, voy a usar la propiedad de cuadrícula de visualización, cuadrícula de visualización. Nuestra siguiente propiedad son las columnas de plantilla de cuadrícula. Columnas de plantilla G. Aquí voy a usar repetir repetir uno. Para nuestro tamaño de celda de cuadrícula, voy a usar auto val. Voy a usar auto Valu También voy a alinear este ítem centro alinear elemento centro. Y también quiero establecer altura de este contenedor, altura igual a 100 VH ancho igual al 80% y margen cero o dos. Si configuro este archivo, aquí no va a pasar nada. Así que vamos a aplicar el filtro en nuestra etiqueta de imagen. Sumo tipo IMG dentro del auto dice, soy tipo W W igual al 100% Para la imagen, voy a usar 100% con. Si configuro este archivo, y ahora puedes ver nuestra imagen es responsive, y ahora voy a aplicar este filtro starl sobre esta imagen Como pueden ver, para esto, voy a usar esta identificación, ruido. Entonces aquí estoy tipo filtro, URL, hastag noise. Si configuro este archivo, puedes ver el resultado. Como puede ver, si usamos solo filtro de turbulencia en esta imagen, se dibuja algún patrón trazywy en Entonces con eso, necesitamos usar otro filtro, que es mapa de desplazamiento. Entonces escribe FE, mapa de desplazamiento, con eso, también, necesitamos usar algunos atributos. Nuestro primer nombre de atributo está en, en igual a dentro del doble curso, gráficos fuente, subtipo, gráfico fuente, nuestro segundo nombre de atributo es N dos, N dos, igual a dentro del ruido de doble curso, y nuestro tercer nombre de atributo es escala Escala igual a 20. Si configuro este archivo, puedes ver el patrón web en esta imagen. El gráfico fuente es nuestra imagen, y usando ruido, podemos vincularlo para filtrar. Después de combinar estos dos efectos, está escrito este resultado. Esto es para este tutorial. En la siguiente parte de este tutorial, vamos a realizar animación usando JavaScript. Gracias por ver este video, estad atentos para la siguiente parte de este tutorial. 33. Turbulencia de imagen y desplazamiento parte 2: Hola, chicos, me alegro de verles de vuelta. Esta es la segunda parte de este tutorial. En esta parte, vamos a ejecutar la animación usando JavaScript. Básicamente, voy a usar la animación GSP. Al principio, voy a vincular este archivo con CDN, y después voy a crear la etiqueta Script Al principio, necesitamos seleccionar el efecto de turbulencia. Para eso, voy a usar esta identificación, turbulencia. Quiero crear una variable t El elemento igual a document, dot, get element by ID, dentro del paréntesis, dentro de los turvulens de curso único Entonces semiconal para terminar esta línea. Después de eso, voy a crear una línea de tiempo. Entonces TL timeline igual a Mu timeline max. Inserte el paréntesis e inserte el cimsis que necesitamos para establecer pausa igual a verdadero punto y coma verdadero para Es malo cuando cargo mi navegador, no va a realizar la animación. Va a realizar la animación cuando llame, y ahora solo necesitamos cambiar los atributos usando JavaScript. Voy a escribir tal punto dos función. Dentro del paréntesis, al principio, tenemos que pasar el elemento significa elemento de turbulencia. Entonces voy a teclear EL. Tenemos que pasar la duración, que es de tres segundos, y luego tenemos que pasar el objeto, y quiero cambiar el atributo, suma ro tipo ATR, colon Es el continuo, quiero cambiar la frecuencia base, tipo suma, frecuencia base aquí. Con eso, también necesitamos pasar el valor de frecuencia base. Dentro del curso único, cero, cero. Por fin, necesitamos pasar otro valor, que es delay y luego de dos segundos de retraso de carga del navegador, va a realizar la animación. Paso dos y punto y coma a esta línea por fin, necesitamos llamar a otra función, que es play function Sonido para escribir tl dot play. Entonces vamos a terminar esta línea. Si configuro este archivo, como pueden ver, después de dos segundos, realiza nuestra animación. Una vez más, voy a recargar mi navegador. Como puedes ver, después de dos segundos, va a realizar mi animación y tardaré tres segundos en completar la animación porque nuestro valor de duración de animación es tres y nuestro valor DA de animación es de dos segundos. Entonces en nuestra función dos, básicamente pasamos cuatro parámetros totales. Al principio, nuestro elemento seleccionado, luego la duración de la animación, y luego tenemos que pasar el valor del atributo, y por fin, tenemos que pasar el tiempo de retardo de la animación. Esto es para este tutorial. Ahora puedes crear tu propio efecto de turbulencia con AVG. Así que gracias por ver este video, estad atentos para nuestro próximo tutorial. 34. Animación de reunificación de mapas Svg: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con el nuevo proyecto de animación SBG. Y en este proyecto, vamos a crear un efecto de animación reunidora de su mapa de país Déjame recargar el navegador para demostrarlo. Después vuelvo a cargar mi navegador, ya que puedes ver cómo cada uno de los estados del país volvió a su propia posición Como puedes ver, es crear un hermoso efecto de reunificación. Yo hice este proyecto en el cumpleaños número 50 de Gandhi. No sólo eso, si coloco mis autos en este mapa, también podemos llenar este mapa con tricolor Este proyecto llevará mucho tiempo. Te mostraré la parte de este proyecto sobre cómo completar este proyecto. En primer lugar, necesitas descargar el mapa SVG de tu país. Soy de la India, así que descargo Indian Map y pateo este sitio web mapwgi.com Aquí puedes ver cada estado de la India marcado severatey también puedes ver el nombre de los estados cuando te caes en él Voy a descargar este mapa para este proyecto. Entonces comencemos la práctica y veamos cómo podemos crear este proyecto. Como pueden ver, estoy en mi navegador y voy a dar click derecho sobre él. Después de seleccionar la sección de elementos en mi ozono, voy a encender mi curser todos los estados este país y voy a seleccionar uno de los estados de él, y voy a seleccionar este pequeño estado Misoam Después de seleccionar este estado, como puedes ver en mi sección de elementos, este camino ya tiene un título, Misoam Además, tiene una identificación, NI N. Así que esta identificación es muy importante. Usando este ID, puedes ejecutar animación en él. Por lo que copio esta identificación. Y como pueden ver, abro todo este archivo C en el editor de código de Visual Studio. Y como puedes ver, cada estado de este país creado por PutTag Y ahora voy a encontrar el mismo estado de Mzurum usando su ID Entonces presiono Control AF, y aquí voy a pegar el nombre de identificación. Y aquí está. Entonces, al principio, necesitamos crear la animación de movimiento para este estado. Entonces aquí al principio, voy a agregar una etiqueta de cierre put, y dentro de esta etiqueta Pt, voy a usar la etiqueta VG, que es animar transformar Para la animación en movimiento, esta etiqueta es muy importante. Y además, voy a asignar una identificación a esta etiqueta. ID igual a este tat es misoram así que voy a escribir MZ, y luego tenemos que pasar nombre de atributo nombre de atributo, igual a, y nuestro nombre de atributo Y luego tenemos que pasar el atributo tipo de atributo igual a XL. Y ahora necesitamos pasar el tipo de animación. Escriba igual a traducir, y luego tenemos que pasar el valor de duración para la animación, Dur igual a cuatro segundos, y ahora tenemos que pasar la ubicación exacta desde donde necesitamos comenzar la animación, y quiero comenzar esta animación desde este lugar. Dentro de los valores, voy a pasar X xs y YX es 50 40, este es el punto de partida y desde punto, voy a pasar 00 y además necesitamos pasar otro atributo para esta animación, que es repetir vaca Entonces aquí estoy a t, repita conteo igual a uno. Quiero ejecutar esta animación por una sola vez. Si digo este archivo y vuelvo a mi navegador y vuelvo a cargar este navegador, como puedes ver, ha funcionado perfectamente Aquí puedes ver como este estado regresando a su propio lugar. Usando esta animación y el valor, puedes crear el efecto de reunirte de tu país Y si quieres cambiar el color de tu estado, cuando termines sobre él, para eso, necesitas usar algunas propiedades. Nuestro primer nombre de propiedad está en Mouse. Y aquí, voy a pasar un viel de color. Voy a escribir este punto estilo punto se siente igual a, y nuestro nombre de color es gris. Cuando ho mi cursor sobre él, devuelve color gris. Con eso, quiero agregar un efecto de mouse out. Aquí voy a escribir en mouse out, igual a este punto estilo punto se siente igual al color verde. Con eso, quiero agregarle un color de trazo. Entonces aquí voy a escribir este punto estilo punto punto, trazo, igual al rojo. Vamos a configurar el archivo y volver al navegador. Aquí puedes ver que nuestra animación funciona a la perfección. Y si obtengo mi auto en este estado, vuelve de color gris. Y si salgo del mouse de él, como pueden ver, se vuelve de color verde, y también le agrega un color de trazo, que es rojo. Entonces espero ahora estelar para ti cómo creo todo este proyecto. Uno por uno, es necesario crear el efecto de animación para cada estado. Si eres de Estados Unidos entonces necesitas hacer lo mismo por 50 veces. Espero que ahora te quede claro. Gracias por ver este video, estén atentos para nuestro próximo ejercicio. 35. Qué son los filtros SVG: Hola, chicos. Me alegro de verte de vuelta. Nuevamente, estoy de vuelta con un nuevo tutorial relacionado con WiGi en este tutorial, vamos a aprender filtros VG La mayoría de los avanzados efectos de animación SVG hechos con filtros. Además, podemos crear efectos de imagen con eso. En este tutorial, vamos a explorar los conceptos básicos de los filtros VG Al principio, aprenderemos qué son los filtros AVG y en qué se diferencian de los filtros CSS. Entonces usamos elemento de filtro y aprendemos sobre primitivas de filtro Con eso, voy a mostrarles alguna demostración de cómo podemos usarlo práctico. ¿Qué son exactamente los filtros SVG? Antes de comenzar los filtros SVG, necesitamos entender los filtros CSS. Como sabrás en CSS, tenemos ciertas funciones y podemos utilizarlas para desenfoque, sombra paralela, operación de color, etcétera Además, podemos controlar el brillo de saturación de tono usando filtros CSS. Estos filtros se aplican principalmente en imágenes. Estos son todos los filtros CSS, y para usar esos filtros, necesitamos trabajar con la función filter. Pero los filtros CSS son bastante limitados. usamos mayormente en imágenes, y además la funcionalidad es bastante básica. Si quieres más funcionalidad, lo contrario funcionalidad compleja, necesitamos usar filtros SVG. Y aquí está la parte interesante. Los filtros CSS son un subconjunto de filtros SVG. Los filtros CSS son muy fáciles de usar, y vienen con una funcionalidad simple. Por ejemplo, en CSS, podemos desdibujar imágenes, pero el desenfoque es uniforme. La misma cantidad de desenfoque es toda la dirección, pero en SVG, podemos hacer el mismo desenfoque con los diferentes valores Xxs e YxS También podemos controlar los bordes del desenfoque de la imagen. Podrías pensar que los filtros SVG solo funcionan con el elemento SVG. Eso no es cierto. Podemos aplicarlo cualquier elemento SML. Para crear esto, necesitamos comenzar con elemento de filtro. Y también, necesitamos usar algunas funciones especiales llamadas primitivas de filtro Para comenzar, necesitas comenzar con la etiqueta SVG, y luego necesitas agregar elemento de filtro dentro de la etiqueta SVG, y no olvides agregar un ID a esta etiqueta de filtro porque este ID funciona como referencia de este filtro, y dentro de este elemento de filtro, necesitamos agregar primitivas Todas estas son primitivas de filtro SVG. Que podemos usar dentro de la etiqueta de filtro. Por último, necesitamos aplicar los filtros mientras queremos aplicarlo. Supongamos que quiero aplicar este filtro en una etiqueta de imagen. En ese caso, necesitamos escribir atributo name filter, igual a dentro del Os abajo, necesitamos escribir URL, y dentro de la ronda ress necesitamos vincular el filtro con el ID, y hay muchas primitivas que puedes usar en tu filtro Y si te das cuenta, puedes ver un prefijo u Obin. Este prefijo significa efecto de filtro. Estas primitivas nos permiten crear efectos simples como desenfoque, sombra paralela, relámpago, etcétera, y también puede darte efectos protoshok grad, modo de flexión, composición, mapa de desplazamiento, partir del siguiente tutorial, vamos a comenzar la práctica. Esto es para este tutorial. Gracias por ver este video, mantente atento. 36. Implementación de filtros SVG: Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor if. Ya creé una página TML llamada index dot HTML. Y dentro de esta etiqueta body, declaramos una etiqueta SVG con 750 y altura 500. Y también el área de la caja de vista es S. A continuación, necesitamos crear un elemento filtrante. Entonces dentro de la etiqueta SVG, voy a escribir filter. Además, necesitamos asignar un ID a este elemento ID igual a D. Dentro de este elemento de filtro, vamos a agregar un filtro primitting Pero al principio, vamos a crear otro elemento donde voy a aplicar este filtro, y nuestro nombre de elemento es image. Aquí voy a escribir imagen. Aquí voy a usar un atributo excederse. Enlace EN HREF. Igual a insertar el doble curso, necesitamos proporcionar la ruta de la imagen Se puede ver en mi directorio de trabajo actual, hay una imagen, 01 punto JPG. Voy a enlazar esta imagen. Aquí voy a escribir 01 punto JPG. Si configuro este archivo, puedes ver en mi navegador enlazará nuestra imagen con éxito. Si quieres establecer dentro de la altura, sí, puedes. Sólo en el tipo. Peso, 100%. También la altura. Alto, 100%. También si quieres especificar la posición inicial, sí, puedes. Para eso, solo necesitas pasar Xs y YxS X cero. También YxS cero. Si configuro este archivo, se puede ver el ritmo. Básicamente, mi resolución de imagen coincide con esta dimensión. Por eso estos atributos no van a afectar tanto. Después vuelve al tema principal y crea el filtro. Como pueden ver, ahora es un filtro de banda, pero quiero aplicar este filtro en esta imagen. Para eso, necesitamos usar un atributo y nuestro nombre de atributo es filter. Filtro igual a está en el doble curso. Necesitamos escribir URL. URL está en la rotonda ahora necesitamos vincular esta imagen con este filtro con la ayuda del ID Aquí voy a escribir Hastag Demo. Si configuro este archivo, como pueden ver, está completamente en blanco. Ahora no se puede ver la imagen porque se aplica el filtro. Además, el filtro es negro. Vamos a añadir algunas primitivas. Al principio, quiero aplicar un color demasiado en esta imagen, y luego vamos a hacer un modo de fusión El primer primitivo que voy a usar para el color sólido, que es AI flirt, este. Entonces aquí, voy a mecanografiar A flirt. Y para primitivas, necesitas usar etiquetas de cierre automático. Si configuro este archivo, por defecto va a devolver color negro, y ahora voy a agregar un tercer color. O eso, y necesito pasar un atributo, inundar el color del guión Igual a dentro del doble curso, voy a pasar un hexa VH Daga doble cero S doble cero Si configuro este archivo, puedes ver el resultado. Está escrito en color verde. Si quieres controlar la opacidad, sí, puedes. Para eso, es necesario usar otro atributo y el nombre del atributo es flood Opacidad Guión de inundación Opacidad. Igual a, para 100% de opacidad, necesitamos pasar uno Si configuro este archivo, puedes ver 100% de opacidad. A continuación, necesitamos usar otra etiqueta, que es resultado. Así resultado tipo hemo. Resultado. Es el doble curso, voy a pasar inundación. Esta primitiva se puede combinar otras primitivas y para combinarla con otra primitiva, podemos usar el atributo result como ID Podemos usar la ID a otra primitiva para combinar ambas primitivas. A continuación, quiero agregar otra primitiva para el modo de fusión. Para eso, vamos a utilizar este filtro primitivo, mezcla FE, para combinar imágenes. Aquí voy a teclear FE blend. Ahora aquí, en esta instancia en particular, necesitamos pasar dos fuentes. Nuestro primer atributo ellos es E igual al gráfico fuente de comillas dobles. Graph Source guppix básicamente significa la imagen aquí mismo. Si configuro este archivo, puedes ver el resultado. Después de escribir la fuente Guppy, podemos volver a ver nuestra imagen. Ahora quiero marcar esta fuente Guppy con esta primitiva una inundación Aquí, tenemos que pasar otra fuente Guppy. Voy a escribir en igual a dentro de los códigos dobles, flood. Por lo que vinculamos nuestra segunda fuente Uva con este resultado. A continuación, tenemos que pasar el modo de fusión. Aquí, voy a pasar modo, igual a dentro de los códigos dobles, quemadura de color. Si configuro este archivo, puedes ver el resultado. Oye, no es trabajo. Vamos a usar un color diferente y luego aplicarlo. Voy a pasar un color diferente. Es de color azul. Si configuro este archivo, como pueden ver, ahora es trabajo. Se dobla el color con la imagen. Así es como podemos usar los filtros SVC. Este es el primer ejemplo de filtro VC. En la siguiente tubrial te voy a dar otro ejemplo de filtro VC 37. Filtro SVG feColorMatrix: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con primitivas. En nuestro tutorial anterior, ya aprendimos sobre cómo podemos usar primitivo con los instaladores VG Y en este tutorial, vamos a aprender esta primitiva, Una matriz de color. Esta primitiva se utiliza especialmente para filtrar por transformación de color. Este filtro matriz de Apple, transformación para cambiar el color del píxel de entrada. Se puede utilizar para la manipulación del color como la conversión en escala de grises, cambio de color, etcétera. Y en nuestro ejemplo práctico, voy a mostrar ¿cómo podemos convertir la imagen en color en una imagen en escala de grises Entonces estudiemos práctico. Entonces como pueden ver, lado a lado, abro mi editor de código Wizz Studio y mi navegador usando la extensión de servidor Light, y ya creo un documento ML llamado index two dot TML En nuestro tutorial anterior, ya aprendemos sobre cómo podemos usar los filtros SVG. Entonces, al principio, como sabes, necesitamos asignarle un ID a nuestro filtro. Entonces voy a asignar el mismo nombre de ID, matriz de color AI. Entonces copio esto y lo voy a pegar aquí. Entonces necesitamos aplicar este filtro en nuestra imagen. Así que aquí voy a pasar tiene etiqueta y nuestro ID nombre AI matriz de color. Si configuro este archivo, como saben, va a volver en blanco. Debido a que nuestro filtro está en blanco, por eso volvió en blanco. Como ya les dije, voy a usar este filtro para la conversión a escala de grises. Entonces voy a llamar a este filtro, matriz de color AI, y voy a cerrar esta etiqueta. Al principio, dentro de la matriz de color, voy a usar type attribute Type igual a, y dentro de los códigos de Dulo, voy a pasar saturar después de establecer este archivo, se puede ver el resultado, pero no pasamos ningún valor Podemos controlar la saturación de color de esta imagen usando este filtro. Entonces para eso, tenemos que pasar los valores. Así que estoy escriba valor igual a cambio de los códigos dobles. Primero, voy a pasar 0.9. Después de establecer este archivo, como puede ver, hay cambios menores. No se pueden identificar los cambios porque aquí se necesita pasar valor entre 0.92 0.1 Entonces si paso 0.1 y luego configuro este archivo, como pueden ver, casi desatura nuestra imagen, pero no es desaturar completamente Si paso 0.0 y luego configuro este archivo, ahora se puede ver, ahora desaturar completamente la imagen Aquí es necesario pasar valor entre 0.021. Si paso uno, y este este archivo, ahora puedes ver nuestra imagen está completamente saturada. Se pueden ver todos los colores. Pero si paso 0.5 y esto arriba este archivo, ahora este filtro reduce la saturación de los colores en el elemento Vigi, y redujo 50% color porque aquí pasamos 0.5 No sólo eso, podemos aplicar el mismo filtro en elementos AVG. Entonces aquí voy a crear un elemento de reacción. Y primero, voy a asignar con igual a cien. También, voy a asignar altura, altura igual a 100. Entonces voy a asignar color. Quiero rellenar de color azul. Así que aquí voy a escribir atributo de estilo. Estilo para aplicar el color, como ustedes saben, necesitamos usar probabilidad de campo. Rellenar Azul. Entonces voy a aplicar el filtro. Para aplicar el filtro, como ustedes saben, utilizamos necesitamos usar el atributo filter. Filtrar, dos puntos, y tenemos que pasar URL. Luego estableces la etiqueta URL. Primero, tenemos que pasar hashtag, luego tenemos que aplicar el filtro. Pero antes de aplicar este filtro, pongamos la multa. Arriba para configurar este archivo, aquí puedes ver el resultado. Aquí creamos un elemento react con color azul. Y ahora voy a aplicar este filtro, matriz de color AE. Entonces copio este ID de filtro ID, entonces lo voy a pasar aquí. Apra configuró este archivo, como puede ver, redujo el valor de color azul 50% Y si paso uno, sólo uno y luego configuro este archivo, se puede ver el resultado. Y si lo haces desaturar completamente, justo en pasar cero Ahora lo hace desaturar por completo. Ahora, no hay color en esta imagen, también en este elemento de reacción. Entonces así es como podemos usarlo. Ahora, déjeme mostrarle otro ejemplo. Otro uso de este filtro. Entonces ya estamos aprendidos cómo podemos usar este filtro con fines de saturación. Y ahora voy a usar el mismo filtro para el color personalizado. Así que de nuevo, voy a escribir etiqueta de filtro. Además, voy a asignar un ID, y esta vez nuestro nombre de identificación es de color personalizado. Entonces voy a cerrar esta etiqueta. Entonces dentro de este filtro, voy a usar la primitiva de matriz de color FE. Una matriz de color primitiva. Él tipo A matriz de color. No necesito esta etiqueta de cierre porque necesito esta etiqueta única. Y entonces aquí voy a pasar un atributo, y nuestro nombre de atributo es type. Básicamente, podemos simplemente copiar esta primitiva y voy a reemplazarla aquí. Entonces voy a cambiar el tipo. Aquí voy a pasar tipo llamado matriz. Esta vez usamos esta primitiva con tipo de matriz, y ahora necesitamos pasar los valores. Pero esta vez, el atributo value contiene una matriz de cuatro por cinco que definen la transformación del color. Básicamente, se quiere decir, aquí tenemos que pasar un total de cuatro filas, y tenemos que pasar a cinco valor en cada fila. Cada fila de la matriz corresponde a uno de los canales de color de salida. Nuestra primera fila va a significa color rojo. Nuestra segunda fila va a significa color verde, nuestra tercera fila va a significa color azul, y nuestra cuarta fila va a significa Alfa. Entonces, sin confundirte, déjame pasar algún valor. Entonces en nuestra primera fila, voy a pasar este valor, 0.5. Entonces voy a pasar cero. Nuestro siguiente valor es cero, espacio, cero y cero. Si te das cuenta, puedes ver en nuestra fila, aquí pasamos el valor total de cinco. Esta primera fila representa el canal rojo, el canal color rojo, y aquí pasamos el 50% de color rojo. Después en la segunda fila, aquí voy a pasar canal de color verde, y quiero aplicar 100% de color verde. Entonces primero, voy a pasar cero, luego voy a pasar uno, espacio, cero, espacio, cero, espacio Z. como te dije, cada fila va a contener cinco valores diferentes Nuestra segunda fila representa canal verde, canal 100% verde, pero nuestra primera fila representa 50% canal rojo. Entonces en nuestra tercera fila, ella voy a pasar valor de canal azul. Entonces para pasar cero espacio, cero, espacio uno, espacio cero y cero. A continuación, tenemos que pasar el valor Alfa. Para el valor Alfa, voy a pasar cero espacio, cero, espacio, cero, espacio uno, espacio, cero. Como ya les dije, nuestra última fila significa Opacidad, Alpha Valu. Y ahora voy a configurar este archivo, y voy a aplicar el mismo filtro a esta imagen. Entonces voy a duplicar esta imagen y comentar la línea anterior. Y esta vez, voy a copiar este ID de filtro y reemplazarlo con este filtro. Si configuro este archivo, puedes ver el resultado. Como puedes ver, agrega una nueva capa de filtro a esta imagen. Y si aumentas el de otro modo disminuir cualquier valor de canal, déjame mostrarte. Supongamos que quiero aumentar el valor del canal rojo. Quiero que sea nueve, el conjunto de este archivo, se puede ver el resultado diferente. Entonces así es como demandó. Por ahora, voy a usar 50% canal rojo. De la misma manera, se puede cambiar el valor de canal verde. Supongamos aquí paso 0.5 y resto este archivo, ahora se puede ver diferente efecto. Básicamente, si quieres convertirte en experto en ello, debes tener conocimientos de edición básica de fotos. Además, debes tener conocimiento de Subta como Photoso. Entonces puedes entender muy bien este valor. Entonces así es como podemos usar esta primitiva. Espero que ahora te quede claro. partir del siguiente tutorial, vamos a aprender los restantes. Entonces esto es todo para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 38. FeComponentTransfer: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con otro tutorial. Relacionado está WIGIFlter y en este tutorial, estamos bien para aprender este filtro, transferencia de componentes AI Este elemento filtrante implementa manipulación del color en cada canal coloreado por separado. Como saben, tenemos tres canales de color, rojo, verde y azul. Con eso, también tenemos otro canal llamado Alpha. Como saben, podemos controlar la transparencia usando este canal de color. El canal de cuatro colores en estos elementos son FI funk RFI funk G, FFunkV y FI, funk A. Entonces para usar este filtro, necesitamos usar este canal de color dentro de este Y mientras se realiza la manipulación del color, los elementos solo deben tener un elemento hijo de cada tipo, y solo tenemos un atributo que está en, y se usa para almacenar entrada para la primitiva dada. Y en nuestros elementos, sólo podemos sumar cuatro tipos tabla discreta Gamma lineal. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usar estos filtros. Como pueden ver, lado a lado, abrí mi editor de código de estudio de resultados y mi navegador usando la extensión del servidor light, y ya creé un documento de estimación llamado tabla índice. Entonces en esta etiqueta TML, tenemos una etiqueta SVG, y aquí nos fijamos con la altura, y también dijimos el cuadro de vista Por ahora, es un filtro vacío, pero establecemos una demostración de ID. También dentro de esta etiqueta SVG, enlazamos una imagen, y se puede ver la imagen en mi navegador. Ahora voy a crear este filtro. Entonces dentro de esta etiqueta de filtro, voy a usar esta primitiva, que es una transferencia de componentes. Entonces dentro de este privitivo al principio, voy a usar el elemento Alpha Así HemotipoFV SNC AF Alfa. Entonces voy a cerrar esta etiqueta. Primero, voy a usar al principio, dentro de este elemento, voy a usar type attribute, T Tip igual a dentro de los códigos Duel, y voy a teclear table Como te dije, tenemos que decírselo por tipo. Entonces primero, voy a usar el tipo de mesa. Entonces necesitamos usar otro atributo que es el valor de la tabla. Igual a está en los códigos tobon. Aquí tenemos que pasar los valores. Para el valor Alfa, voy a pasar cero espacio, cero espacio uno, espacio uno. Y luego voy a crear otro canal, que es u canal. Entonces voy a hacer comenzar esta sección, y voy a sustituir A por B y Hemotipo cero, uno, luego voy a pasar cero, uno A continuación, voy a aplicar el canal de color verde. Entonces otra vez, voy a ser esta línea y reemplazar B por G, y voy a cambiar los valores. Primero, voy a escribir uno, espacio uno, cero, cero, y por fin, voy a aplicar canal de color rojo. Entonces voy a sustituir por R y cambiar los valores. Primero, voy a escribir cero espacio cero, espacio uno, espacio cero. Voy a establecer este archivo. Y ahora voy a aplicar este filtro en esta imagen. Y para eso, como ustedes saben, él en tipo URL. Entonces pones las prensas redondas, voy a usar IDs. Alguien usa este ID, así que quiero pasar el signo de hastex, y luego voy a pasar el ID nombre dim Si configuro este archivo, puedes ver el resultado. Como puedes ver, aplica el canal de color modificado en esta imagen. Este tipo de mapeo puede ser útil para la transformación de colores personalizados o efectos dentro de Vrapis que puedes jugar con este valor para perseguir los canales Entonces esto es todo para este tutorial. Espero que ahora te quede claro. En el siguiente tutorial, vamos a aprender otra primitiva. Entonces gracias por ver este video estadido. 39. Filtro SVG feComposite: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con otro tutorial, y en este tutorial, vamos a aprender otra primitiva de filtro SVG. Nos vamos a centrar en el compuesto de IA. Ahora la pregunta es, ¿qué es Fi composite? Un compuesto se utiliza para combinar múltiples imágenes o elementos gráficos. Permite especificar cómo se deben componer diferentes imágenes o elementos de origen deben componer diferentes imágenes o elementos para producir un resultado final. El elemento compuesto AI se usa normalmente dentro los filtros AVG para aplicar efectos complejos de procesamiento de imágenes. Por ejemplo, puede usar AI Composite para realizar operaciones como combinar dos imágenes usando operador aritmético como agregar substract multiple o overlay Es una herramienta muy potente para crear efectos visuales avanzados en AVG. Y viene con algún operador como over in, top, out, ZO encendedor o aritmética Ahora, antes de comenzar la práctica, quiero mostrarles algunos ejemplos. Como pueden ver, abro el software Adobe Illustrator, y en este software, aquí creo dos elementos. Al principio, voy a crear un elemento círculo y encima del elemento círculo, creo un elemento estrella. Ahora voy a realizar alguna operación usando Pathfinder. Algunas operaciones de Pathfinder son bastante similares con la primitiva compuesta de IA Entonces voy a seleccionar tanto el elemento desde el buscador de ruta, voy a seleccionar esta opción menos atrás. Hasta seleccionar menos atrás, se puede ver el resultado. A continuación, voy a seleccionar otra opción, que es arriba seleccionar recortar, se puede ver el resultado. Este tipo de operación, podemos hacer usando unos pocos compuestos. Además, podemos realizar esta operación y esta operación y esta menos fon Empecemos la práctica y veamos cómo podemos usarla. Entonces, como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión ligera del servidor. Ya creo un filtro SVG, y le asignamos un ID a este filtro es Filtro compuesto. Y antes de crear el filtro SVG, al principio, definimos la imagen SVG, y su conjunto con 400 píxeles y altura 400 píxeles. Después dentro de este ciervo de profundidad, creamos el filtro, Filtro Composite Luego usamos la etiqueta de imagen AV para cargar la imagen. Utiliza dos etiquetas de imagen AV. El primero es para imagen de fondo. La forma de círculo es nuestra imagen de fondo y la forma de estrella es nuestra imagen de primer plano y también las almacenamos como resultado de fondo y resultado de primer plano Entonces usamos la primitiva compuesta de IA, pero no usamos ningún valor de operador. En AI composite, aquí necesitamos usar total three attribute, operator attribute, in attribute y in true attribute. En atributo, Hen necesita pasar la primera fuente de imagen y en atributo, su necesidad de pasar la segunda fuente de imagen. Después por último, aplicamos este filtro a un elemento de imagen que muestra la imagen de fondo. Ya sabes de eso, cómo podemos aplicar filtro en nuestra imagen. Ahora voy a aplicar todos los operadores uno por uno. Al principio, voy a aplicar sobre operador. Este es el operador por defecto. Después de paso este archivo, como se puede ver, no hay cambios, entonces voy a utilizar en operador. Después de configurar este archivo, puede ver los cambios. La parte de este gráfico de origen que se define por en atributo que se superponen al gráfico de destino, que se define por en atributo, y en operador reemplazan al gráfico de destino. Ahora voy a usar otro operador, que está fuera. Después de configurar este archivo, se puede ver el resultado. Las partes del gráfico de origen definidas por en atributo que caen fuera de la gráfica de destino, definen en atributo Básicamente, suelta el área del círculo de la estrella, y luego voy a usar otro valor, que es un top. Después de establecer este archivo, se puede ver el resultado y se pueden ver los efectos. A continuación, voy a usar otro valor ZR. Después de establecer este archivo, se puede ver el resultado. Estas operaciones son bastante similares con Adobe Illustrator Pathfinder Por eso empiezo este tutorial con Ado V Illustrator para darte la idea de qué tipo de operación vamos a realizar. Nuestro siguiente valor es más ligero. Voy a sustituir ZR por er. Después de establecer este archivo, se puede ver el resultado. Ahora tenemos un operador restante, que es operador aritmético, y viene con cuatro valores totales, K, K dos, K tres y K cuatro Aquí, voy a usar la aritmética. Entonces tenemos que pasar los cuatro valores. Primero, voy a pasar K. K igual a dentro del doble código, voy a pasar 0.1. Entonces voy a pasar K, K igual a 0.2. Entonces voy a pasar, K tres igual a 0.3. Y por último, voy a pasar K. K cuatro igual a 0.4. Hasta configurar este archivo, se puede ver el resultado. Esto es lo que podemos hacer usando si se compone primitivo. Espero que ahora te quede claro cómo podemos usar esta. Así que gracias por ver este video. Estén atentos para el próximo primitivo. 40. SVG feConvolveMatrix Filter: Hola, chicos, es bueno volver a verles. Una vez más, estoy de vuelta con otro tutorial relacionado con primitivas de filtro SVG Y en este tutorial, vamos a aprender AI convolve matrix La matriz convolutiva AE es una primitiva de filtro SVG que le permite realizar una operación de convolución de dos D en Esta operación implica combinar cada píxel de la imagen con su nior circundanteUsar una matriz carnal para producir un Y si hablo de ello atributos, su atributo gaialten En qué matriz de kernel, divisor, sesgo, objetivo targex Y, modo H, alfa conservado, longitud de unidad de kernel, etcétera. Ahora hablemos de la sintaxis. Una matriz convolutiva, y estos son los atributos que necesitamos usar en esta sintaxis No necesitamos usar todo el atributo a la vez. De acuerdo a nuestras necesidades, podemos usar estos atributos. Si hablo de estos atributos, nuestro primer atributo está en su entrada de almacén para la primitiva dada. Nuestro segundo atributo es el orden. Se prueba el tamaño de la matriz que va a ser utilizada por el elemento filtrante. Por defecto, es de tres por tres. Entonces viene matriz erneel. Se definió la lista de números que de la matriz Kernel. El kernel es un filtro de detección de bordes simple, conocido como Svaloperator para detectar bordes verticales Nuestro siguiente atributo es el divisor. Se define la suma de valores de la matriz kernel. Por defecto, se establece en uno. Nuestro siguiente atributo es el sesgo. Yo configuré el rango del filtro. Por defecto, se establece en cero. Entonces tenemos objetivo X y objetivo Y. Ahora comencemos la práctica. Primero, voy a aplicar este atributo Kernel matrix. Vamos a saltar al código de visal studio. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor en vivo, y ya creo un documento TML llamado index dot HTML Entonces en nuestra etiqueta corporal, tenemos una etiqueta de Peluca, y aquí decimos con 100% y altura y altura 400. Y entonces tenemos Diptag dentro de esta etiqueta dip, vamos a crear el filtro Pero antes de crear el filtro, vamos a explicar lo que hicimos aquí. Primero, usamos una etiqueta de reacción. Entonces como puedes ver en esta etiqueta de reacción, establecemos con 500 y altura 300 y aquí decimos color de trazo, y también decimos color de relleno verde oscuro. Y luego usamos elemento de grupo. Y en este elemento grupal, ponemos en texto, hola mundo. Y aquí dije, forma tamaño 34 pixel y familia de fuentes Vardana Y como puedes ver, nuestro color de texto es el color blanco. Él usamos un valor hexa. Ahora vamos a crear el filtro y tratar ver lo que físicamente va a devolver. Entonces dijiste esta etiqueta profunda, voy a escribir etiqueta de filtro. Entonces voy a establecer un ID a este filtro, ID igual a convolucionar Después dentro de la etiqueta de filtro, voy a usar la primitiva, que es la matriz convolutiva FE Entonces ty FE convoluciona la matriz. Creo que cometí algún error ortográfico. Es IA, debería ser AV no FR. Entonces cierra esta etiqueta. Entonces dentro de esto, si confirmas matriz, voy a usar un atributo que es matriz carnal igual a y tengo que pasar valores, algunos valores carnales Y por defecto, como te dije, nuestra matriz carnal va a tomar 33 valor de cuadrícula, 33 valor de estructura de cuadrícula Déjame mostrarte cómo en nuestra primera fila, voy a pasar un espacio cinco, espacio menos uno. Entonces en nuestra segunda fila, voy a pasar menos un espacio cero, el espacio cuatro. Entonces en nuestra tercera fila, voy a pasar cero, espacio cero y menos uno. La primera fila de matriz cardinal es 15 menos uno. Este valor correspondía a los pesos utilizados para la primera fila de píxeles en la operación de convolución El valor de la segunda fila es menos uno, cero y cuatro. Estos son pesos del píxel de la segunda fila. Básicamente, vamos a realizar algún pixel manipulando usando esta primitiva Este es primitivo de nivel muy avanzado, incluso yo no tengo el conocimiento adecuado al respecto y la tercera fila representa el peso para la tercera fila de píxeles Y ahora voy a aplicar este filtro en mi etiqueta react, y el texto. Aquí, voy a usar el atributo filter. Filtro igual a dentro de los códigos dobles, voy a pasar la URL, URL, luego dentro de las prensas redondas, hashtag, voy a pasar este ID. Además, voy a llamar al mismo filtro en mi texto. Entonces voy a copiar la sección de filtro y en mi etiqueta de texto, después del valor Y, después del atributo Y, voy a pegar este filtro. Voy a llamar a este filtro. Si configuro este archivo, puedes ver el resultado. Ahora bien, si miras detenidamente en mi texto, como puedes ver, reduce la nitidez de estos Parece que nuestro texto está temblando. También efecto en mi forma de rectángulo. Sería más claro si reduzco el tamaño de la fuente. Si lo hago diez píxeles y luego sirvo este archivo, se puede ver el resultado. Ahora puedes ver ahora puedes ver que destruyó el pixel de este texto. Esto es lo que podemos hacer con este filtro. Ahora, agreguemos una imagen e intentemos aplicar este filtro a esta imagen. Después de la etiqueta de grupo, voy a pegar el código fuente de la imagen. Ya copié el código de nuestro tutorial anterior. Entonces voy a eliminar esta URL ID. Voy a establecer este archivo. Después de configurar este archivo, se puede ver el resultado. Esta es nuestra imagen. Ahora bien si aplico este filtro a esta imagen, entonces voy a copiar este ID de filtro, y aquí voy a usar Haztexine y luego pegar el código y luego pegar el nombre de ID Después de paso este archivo, si lo notas afecta un poco a nuestra imagen. Juguemos con los valores. Voy a cambiar los valores, matriz Kernel. Primero, voy a pasar en nuestra primera fila menos siete. Nuestro siguiente valor es menos, voy a hacerlo menos diez, y el tercer valor es, voy a hacerlo -15. Entonces en nuestra segunda fila, voy a empezar con menos diez. Entonces nuestro siguiente valor es también diez. Entonces nuestro valor de tercera columna es menos uno. Para la tercera columna, voy a seguir siendo igual. Después de paso este archivo, veamos qué va a devolver. Después de paso este archivo, ahora es más claro para ti. Después de cambiar el valor, ahora puedes verlo un poco difuminando nuestra imagen. Cada valor en la matriz Kernel afecta cómo la operación de convulsión combina los valores de píxel de entrada para producir los valores de píxel de salida Si paso valores positivos, entonces mejora los valores negativos de las características mientras que los valores negativos pueden superarlos. El píxel central de la matriz carnal básicamente se multiplica con los píxeles circundantes y crea un nuevo píxel y luego devuelve el píxel Solo hay que tener en cuenta, filtro SVG I convolve matrix puede ser bastante potente, pero puede requerir algún experimento para lograr el efecto deseo Esto es para este tutorial. Espero poder darte la pequeña introducción cómo podemos usar el filtro matricial AI Convol Gracias por ver este video, estén atentos para el siguiente tutorial. 41. SVG feDiffuseLighting Filter: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con el filtro VG Y en este tutorial, vamos a aprender esta primitiva, una iluminación difusa. primitiva del filtro de iluminación difusa le gusta una imagen usando el canal Alfa como mapa de relieve. Usando iluminación difusa, el lado del objeto que mira hacia la luz es más brillante y la vista que mira hacia el otro lado es más oscura y en sombra. Y con iluminación difusa, vamos a aprender otros tres primitivos, yo distancia la luz, si punto luz, y foco. Y también necesitamos si compuesto primitivo. Juntos usando este privativo, podemos crear diferentes efectos de luz, luz de distancia, luz puntual, foco, etc. Ahora hablemos de algunos atributos. Estos son los atributos que necesitamos con iluminación difusa en escala superficial, constante difusa, longitud de kernel, longitud unidad de kernel, etcétera El atributo in identifica entrada para la primitiva de filtro dada. Nuestro siguiente atributo es la escala de superficie. Represento la altura de la superficie. Su valor se multiplica por el valor Alfa. El valor predeterminado es uno. El siguiente atributo es el contenido difuso. Es un número no negativo, cuyo valor predeterminado es uno, y luego tenemos longitud de unidad Kernel. Dice la distancia pretendida entre columnas sucesivas. Empecemos la práctica y veamos cómo podemos aplicarla. Como pueden ver, lado a lado, abro mi editor de código de estudio y mi navegador usando LipseRention, y ya creo un documento TML llamado Entonces en nuestra etiqueta body, tenemos una etiqueta VG, y en esta etiqueta VG, al principio, configuramos un lienzo, y nuestro lienzo varía 440 píxeles y la altura es de 140 píxeles Entonces creo un círculo y nuestro círculo el color es verde, y no escribo luz porque en este círculo, no voy a aplicar ninguna luz. Entonces creo otro círculo. Este es el círculo donde voy a aplicar la iluminación. Después creo un filtro y pongo un ID, me enciendo uno. Por ahora, mi filtro está vacío, y ahí, voy a aplicar luz puntual AI. Entonces necesitamos usar esta luz primitiva, apunto, con iluminación difusa AI. Al principio, dentro de esta etiqueta filtrante, voy a crear una primitiva de iluminación difusa. Samotiefe difusa era iluminación, y luego voy a usar Aquí voy a escribir en igual a dentro de los códigos dobles. Como ya les dije, esto en entrada identifica entrada para la primitiva de filtro dada. Voy a identificarlo como un gráfico fuente. Entonces nuestro siguiente atributo es resultado. Resultado igual a dentro de los códigos dobles, voy a usar luz. Tercero, tenemos que pasar otro atributo llamado color de iluminación. Color de iluminación. Color de iluminación igual al blanco. O voy a configurar este archivo. Entonces dentro de esta primitiva, necesitamos usar otra primitiva, que es AE, luz puntual primitiva. Voy a usar esta primitiva luz HemoTypfePoint. Lo sentimos, no necesitamos esta corbata de cierre. Y entonces tenemos que pasar algún atributo. Primero, tenemos que pasar XX es valor. X igual a 150. Entonces tenemos que pasar YX es valor. Y igual a 60. Esto va a definir fuente de luz puntual. Además, tenemos que pasar Z es. El tipo Z equivale a 20. Y ahora necesitamos usar la primitiva compuesta AE. Esto va a combinar el gráfico original con el efecto de iluminación. Déjame mostrarte cómo. Entonces aquí, voy a escribir SE composite. Nuevamente, no necesitamos este tang de cierre. Entonces tenemos que pasar algunos atributos. Entonces aquí, voy a pasar algún atributo. Nuestro primer atributo está en atributo. Yo igual a aquí voy a pasar fuente gráfica. El gráfico fuente es nuestro gráfico original, así que voy a copiar el gráfico fuente. Entonces tenemos que pasar otro atributo al que se llama, que es N dos. Es igual a, aquí tenemos que pasar de nuevo fuente graphi que es luz Entonces tenemos que pasar operador, operador, y vamos a usar operadores aritméticos Operador igual a aritmética. Y ahora necesitamos pasar el valor K, K, K tres y Kour para asegurar que los gráficos originales se combinen una manera que conserve su aspecto original mientras aplica el efecto de iluminación Como te dije para combinarlo, necesitamos pasar cuatro valor K igual a dentro de los códigos dobles uno. Entonces duplico esta línea, nuestro siguiente valor es K dos. Y K dos igual a cero. Después lo duplico otra vez, K tres también igual a cero. Después lo duplico otra vez y K cuatro igual a cero, y voy a sub este archivo. Ahora voy a aplicar este filtro en este círculo. Para eso, vamos a usar su nombre de identificación. Enciéndeme uno. Entonces dentro de la IRL, voy a usar signo de prisa y luego voy a pegar el nombre de identificación, Ligerme uno. Si configuro este archivo, se puede ver el efecto. Así es como se ve una luz puntual. Ahora crea otro efecto de iluminación, que es la luz de distancia, una luz de distancia. Aquí, voy a escribir un comentario. La fuente de luz es un elemento de luz a distancia, y voy a crear la luz de distancia AI. Voy a copiar esta sección y pegarla aquí. Al principio, voy a sustituir este nombre. Un punto a una luz de distancia. Entonces solo tenemos que reemplazar esta prividad. Una luz puntual con luz de distancia, y a continuación, necesitamos usar algunos atributos. Nuestro primer nombre de atributo es el primer atributo que voy a usar es AzeMat sumo tipo az I AUT H. Azemat igual a está Voy a pasar 214. Ahora bien, ¿cuál es el uso de este atributo? Se especifica el ángulo de dirección de la fuente de luz en el XxSplne Básicamente, especificó ángulo de dirección de la luz. A continuación, hering para pasar otro atributo, elevación. Elevación igual a 20. Básicamente, especificó el ángulo de la fuente de luz por encima del plano XY. Además, tenemos que cambiar el filtro de montar. Voy a sustituir la Luz M una por la Luz M dos. Entonces voy a aplicar este filtro en este círculo. Antes de configurar este archivo, alejemos esta página. Entonces voy a configurar este archivo. Después de establecer este archivo, Ops se superpone entre sí. Tenemos que cambiar la posición. Aquí, voy a hacer que sea 28280 pixel, y voy a configurar este archivo Además, necesitamos mover este círculo. Aquí, también voy a pasar CX Value a 80 pixel. Después de establecer este archivo, se puede ver el resultado. Se puede ver así es como es. Ahora, vamos a crear el efecto de luz lujuria, que es A spotlight. Ya creamos luz puntual, luz distancia, y ahora vamos a crear foco de IA. De nuevo, voy a copiar esta sección y la voy a pegar aquí. Al principio, voy a cambiar la posición de este texto. Aquí voy a moverlo hasta 390. Entonces también, voy a mover el círculo en la dirección xx 390 pixel. Entonces voy a sustituir el ID de este filtro. Voy a sustituir la Luz M dos por la Luz M tres. También, voy a reemplazarlo aquí. Después sustituyo el texto, luz de distancia FI con foco FI. A continuación, inset DFE filtro de iluminación difusa, quiero quitar esta Ya no necesito esta primitiva. Esta vez necesitamos usar otra primitiva llamada F Spotlight. Entonces dentro de esta primitiva, necesitamos pasar algunos atributos. Primero, necesitamos pasar XX es atributo, YX es atributo y atributo Zadixs XX es igual a tres, 60. Entonces tenemos que pasar YX. Yx es igual a aquí necesitamos a cinco, y para Jerjes, igual a, voy a voy Y entonces voy a pasar otro atributo llamado limitando ángulo de cono, limitando co ángulo igual y voy a pasar 20 grados. Básicamente, se define el ángulo del cono que limita la propagación del foco. A continuación, necesitamos pasar otros tres atributos, que es punto en x igual a 390. Entonces tenemos que pasar para duplicar esta línea, punto en Y. Punto en Y igual a 80. A continuación, voy a pasar punto en Z. Otra vez, duplico esta línea y voy a sustituir X por Y por Z. Necesitamos hacerlo capital de lo contrario no va a funcionar, así que voy a pasar capital después y apunté z igual a cero Básicamente, estos tres valores especifican el punto objetivo en el que se detecta el foco. Si configuro este archivo, aquí puedes ver el resultado. Esto es lo que crea después de usar este foco. Nuestro primer círculo aparece sin efecto de luz. Nuestro efecto de iluminación difusa de segundo círculo usando una luz puntual y dándole una dimensión tridimensional en nuestro tercer círculo, usamos luz difusa, y va a proporcionarla tridimensional uniforme y en nuestro cuarto círculo, usamos foco y enfoque y proporciona un enfoque tridimensional con un efecto de iluminación más dramático Para utilizar otros efectos de iluminación, utilizamos la iluminación difusa AI primitiva. Esto es para este tutorial. Gracias por ver este video, Sytune por el siguiente tutorial 42. Filtro SVG feDisplacementMap: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial sobre una primitiva Vigi Y en este tutorial, vamos a aprender una nueva primitiva, que es el mapa de desplazamiento de IA. Es el privativo más popular y útil en los filtros Swig Este filtro privativo en SVG se utiliza para crear un efecto de desplazamiento en una imagen mediante el uso los valores de píxel de una imagen de mapa de desplazamiento Este efecto puede distorsionar una imagen de varias maneras, como crear efectos de ondulación o desplazar partes de la imagen en función del valor de píxel de otra imagen Y si hablo de su sintaxis, se ve así. Primero, necesitamos escribir A mapa de desplazamiento, y luego necesitamos usar este atributo en. Aquí tenemos que proporcionar el duping de origen. Entonces tenemos otro atributo en dos, y aquí necesitamos pasar la imagen del mapa de desplazamiento. Entonces tenemos escala, y aquí tenemos que pasar valor de escala. Entonces tenemos selector de canal X y atributo selector de canal Y. Como te dije, se necesitan dos entradas totales para crear un resultado. La imagen contenida para desplazar especifica NA en atributo, y en nuestro atributo in, definimos qué efecto de desplazamiento vamos a aplicar Y en nuestro atributo de escala, definimos la cantidad de desplazamiento. Los valores más altos dan como resultado un efecto más pronunciado, y este atributo se usa para el desplazamiento de XXs Aquí podemos usar uno de los valores. Podemos usar el valor R, el valor rojo, el valor verde, de lo contrario, el valor azul. También, podemos usar el valor Alfa. De la misma manera, tenemos desplazamiento YXS, y para que el concepto sea más claro, comencemos lo práctico Entonces como pueden ver lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión if server, y ya creo un documento de estimación. Por ahora, nuestro documento está completamente en blanco. Entonces dentro de nuestra etiqueta corporal, primero voy a tomar un Igitad un Entonces cierro esta etiqueta. Al principio, necesitamos definir SVG con altura y área Vevox Entonces escribir con igual a 200. También, voy a tomar altura igual a también 200. Entonces voy a tomar otro atributo, que es view boox Ver obras iguales dentro de los códigos dobles. Primero, necesitamos proporcionar Z x es cero, YX es cero, luego necesitamos proporcionar el área Quiero pasar 220 por 220. Después dentro de esta etiqueta SVG, primero, voy a crear un círculo. Para crear este círculo, como ustedes saben, necesitamos proporcionar algunos atributos, y nuestro primer atributo es CX, Cx igual a dentro de los códigos dobles cien. Nuestro siguiente valor es CY, CY igual a cien. Dentro de la doble capa cien. Entonces, y luego voy a proporcionar color de trazo a este círculo, trazo de trazo igual a, y quiero usar color verde. Y yo motoset este archivo. Después de configurar este archivo, como puedes ver, no tenemos ningún círculo en mi navegador porque olvidamos proporcionar radio. Entonces Hemotipo son iguales a dijo que el Dole codifica cien. Y voy a poner este archivo. Después de establecer este archivo, aquí puedes ver el resultado. Como ya sabéis, por defecto, SVG rellena nuestro elemento con color negro. Y ahora es el momento de crear el filtro. Entonces aquí voy a escribir etiqueta de filtro. Voy a asignar un ID a este filtro, ID igual a, y nuestro nombre de ID es DispPendFlter Y ahora quiero aplicar este filtro en mi círculo. Para aplicarlo, como saben, necesitamos usar etiqueta de estilo. Estilo igual a Voy a usar la propiedad de filtro. Entonces los abrigos de muñeca, Hemotype filtraron. Filtrar Colon, URL. Entonces dentro del código Dual, necesitamos pasar el ID de este filtro, tiene etiqueta, y nuestro nombre de filtro es filtro de desplazamiento. Si configuro este archivo, va a desaparecer nuestro círculo. Entonces después de establecer este archivo, como pueden ver, desaparece nuestro círculo. Entonces dentro de esta etiqueta de filtro, voy a crear la primitiva. Y nuestro nombre primitivo es AI displacement MX. Voy a pro esta etiqueta. Entonces dentro de esta primitiva, voy a usar los atributos. Primero, voy a usar en atributo en dos. Por ahora, voy a dejarla negra. Entonces voy a usar en atributo aquí voy a pasar violación de origen. Entonces dentro de los códigos dobles, voy a pasar por violación de origen. Entonces necesitamos usar el atributo scale. Escala igual a dentro del doble va, voy a pasar 50 escala valor 50. Con esto, necesitamos pasar otros dos atributos selector de canal X y selector de canal hte Tipo Soto, selector de canales. X selector de canal igual a, y voy a usar R perfil Rul pasar R en mayúscula Entonces voy a duplicar esta sección. Así que cópialo y pégalo aquí, y aquí voy a pasar selector de canal Y. Y esta vez voy a pasar BV. Si configuro este archivo, no va a pasar nada. Básicamente solo eso, escala este círculo, nada pasó demasiado. Como te dije, usando in attribute, podemos especificar la imagen de entrada, y nuestra imagen de entrada es este círculo. Pero en nuestro atributo into, necesitamos pasar la imagen del mapa de desplazamiento. Cuyos valores de píxel van a utilizar para modificar la imagen de entrada. Entonces aquí voy a usar otra primitiva, que va a modificar la imagen de origen. Entonces otro primitivo que voy a usar, que es la turbulencia, AE turvulens Antes del mapa de desplazamiento, voy a escribir FE turvulens Además, necesitamos aportar algún atributo a lo primitivo. Primero, tenemos que declarar el tipo T igual a es los códigos dobles turvulens LENC no ANC No te preocupes. Vamos a aprender la turbulencia de la IA primitiva en nuestro próximo tutorial En este tutorial, solo nos enfocamos en el mapa de desplazamiento de IA. Entonces el siguiente atributo voy a pasar, que es la frecuencia base. Mejor frecuencia igual a dentro de los códigos dobles, voy a pasar uno. Y el siguiente atributo voy a pasar, que es num óptica y num óptica igual a Istide los códigos dobles, voy a pasar dos Y el último atributo que necesitamos pasar en un turvulens es resultado Resultado igual a y timón para pasar turvulos. Y ahora necesitamos vincular esta primitiva. Necesitamos vincular I primitivo con mapa de desplazamiento usando en atributo. Entonces aquí, voy a pasar turbulencias. Y voy a poner este archivo. Completar establecer este archivo, aquí se puede ver el resultado Esto es lo que crea el efecto de turbulencia Utter Ap DFI en el mapa de desplazamiento II Como ya les dije, se necesitan dos entradas totales para crear un resultado. Déjame mostrarte otro ejemplo con imagen real. Entonces si te muestro mi crit directo de trabajo actual, hay una imagen nombre un punto JPG Entonces voy a usar esta imagen. Entonces aquí, voy a enlazar la imagen. Y ya apliqué este filtro. Y antes de configurar este archivo, voy a cambiar la semana de imagen de WIG. Y también, voy a comentar este círculo. No necesito este círculo para este ejemplo. Y esta vez, voy a hacer AWG WD es de 500 píxeles y la altura es de 333 píxeles. También, necesitamos definirlo en nuestra vista área de trabajo. Entonces aquí quiero pasar 500 y por altura, voy a pasar 333, y voy a poner este archivo. Después de configurar este archivo, como puedes ver, no está funcionando. Entonces al principio, voy a cambiar el valor de frecuencia base de la turbulencia A. Voy a hacer 0.05. Vamos a certificar y ver es lo que es correcto o no. Sí, después de establecer este archivo, como puedes ver, comienza a funcionar. Podemos manipular el diment usando valor de frecuencia base, valor óptica num, déjame mostrarte Entonces si cambio el valor de la óptica num, así que voy a hacer tres y luego establecer este archivo, se pueden ver pequeños cambios. Entonces voy a cambiar el valor de la escala. Si lo hago 200, vamos a ver, y establecer el archivo. Como pueden ver, esto es lo que devuelve. Entonces por ahora, voy a hacer 50. Con eso, si cambio uno de los canales, supongamos selector de canal Y, voy a usar valor verde, G. Esto en este archivo, se puede ver el resultado diferente. Entonces necesitas experimentar con eso para obtener el resultado diferente. Entonces así es como podemos usar el mapa de Disperspon. Usando mapa de desplazamiento, podemos crear varios efectos ondulados en nuestros elementos. Y no te preocupes. Vamos a crear proyecto de animación usando este filtro. Espero ahora que este primitivo sea claro para ti. Gracias por ver este video. Estén atentos para el siguiente tutorial. 43. Filtro de feTurbulence SVG: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con el filtro SVG primitivo. Y en este tutorial, somos buenos para aprender la turbulencia de IA primitiva. Las turbulencias de IA filtradas AVG generan ruido, lo que es útil para simular varios fenómenos naturales como nubes, fuego y humo y generar texturas complejas como marvel o granito Y el ruido se puede utilizar para distorsionar la imagen y el texto. función de turbulencia de Purlin se utiliza para generar ruido de purlin La mayoría de los increíbles filtros VG hechos con esta privity, yo Al usarlo, podemos crear fuego, humo, cualquier textura compleja, etcétera Y si hablo de su syntic primero al tipo A turvulens luego a usar atributos Atributo tipo, mejor atributo de frecuencia, atributos num octava, atributo CT y teselas de rendija. Ahora, hablemos de este atributo. ¿Qué podemos hacer con este atributo? Nuestro primer atributo es type attribute. Viene con dos valores, ravulens de lo contrario ruido fractal, y el valor predeterminado es turbulencia Entonces viene la frecuencia a paso fuerte. Su efecto, el tamaño y el grano del ruido generado. El valor predeterminado es cero, entonces tenemos octavas entumecidos Define la frecuencia o detalles del ruido, y su valor predeterminado es uno. Entonces tenemos. un número de inicio diferente para la función aleatoria. Por último, tenemos azulejos de puntada. Se utiliza para crear un efecto de costura cuando se tienen dos áreas adyacentes de ruido. Define el comportamiento del ruido de apilamiento en el borde y las esquinas Entonces entra en los cinco atributos diferentes. Entonces comencemos la práctica y veamos cómo podemos usar este atributo. Entonces como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión de servidor if, y ya creé un documento TML nombre índice punto HTML Entonces como puedes ver en nuestra etiqueta corporal, tenemos una etiqueta WG, y dentro de este AUG, establecemos altura 200 píxeles y 200 Después dentro del ciervo profundo, creamos un filtro, ID de filtro, filtro de turvulens Entonces dentro de este filtro, Hero usa la prividad de Fitervuls Usamos type attribute, base fgency atributo, num octaives atributo y set attribute, pero no proporcionamos ningún valor al Entonces tenemos una etiqueta de reacción. Tenemos una etiqueta rectangular. Aquí decimos con 200 píxeles y altura 200 píxeles. Es una caja cuadrada, y como puedes ver, se llena de color rojo. Al principio, voy a aplicar este filtro en este rectángulo. Entonces aquí uso el atributo filter, y voy a copiar este ID. Entonces voy a escribir URL. Después puse los vestidos de redondeo. Necesitamos usar el letrero astec y tenemos que pasar la identificación. Y si configuro este archivo, como pueden ver, oculta nuestro elemento rectángulo. Entonces uno por uno, voy a agregar valores de atributo. Primero, voy a proporcionar tipo valor, tipo. Como te dije, viene con dos torreones de valor y ruido de facciones Tarvulens es el valor por defecto, así que me gustaría ir con ruido de facciones Entonces tenemos frecuencia base. El valor predeterminado del atributo de frecuencia base es cero. Pero aquí voy a usar poca cantidad de frecuencia base, que es 0.05. A continuación, tenemos num octaives. Como te dije, el valor por defecto de num octava es uno. Pero aquí, voy a pasar tres. Al fin tenemos C, y aquí voy a pasar dos. Si configuro este archivo, puedes ver el resultado. Esto es lo que crea. Aquí crea un efecto poco nublado, ruidoso y ahumado Y si cambio los valores poco mojados, se puede ver el resultado diferente. Supongamos aquí voy a cambiar el valor de frecuencia base. Voy a usar 0.5, no 05, y luego establecer este archivo, se puede ver el resultado de frecuencia base. Al mismo tiempo, si cambio el valor octivo num, tres, dos, cinco, y establece el valor tres, y configuro este archivo, aquí puedes identificar pequeños cambios Entonces por ahora, voy a establecer la frecuencia base 0.05. Y se puede ver el resultado. Y si utilizo el valor ajustado predeterminado Tarvles así para reemplazar ruido fáctico con Tarvles y luego en este archivo, se puede Esto es lo que crea. Como te dije, mayoría de las veces usamos este primitivo con otro primitivo, que es un mapa de desplazamiento de tarifas, y ya lo aprendemos en nuestro tutorial anterior. Entonces si llamo a otra primitiva, mapa de desplazamiento AI y conjunto num Optics valor dos, y CT valor cinco y el este archivo, se puede ver el resultado. No te voy a explicar cómo podemos usar mapa de desplazamiento de IA porque ya lo cubrí en nuestro tutorial anterior. En este tutorial, solo trato de enfocarme solo en la turbulencia de la IA Entonces así es como podemos usar esta primitiva. Y si quieres resultados diferentes, entonces necesitas experimentar con este valor. Entonces espero que ahora sea aprender para ustedes cómo podemos usar la turbulencia AF Gracias por ver este video, Estén atentos para el siguiente tutorial.