SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML. El elemento SVG <use> toma Nodes del documento SVG y los duplica en otro lugar. Sintaxis: <use href=»» > Subtext </use> Atributo: x: el eje x coordina el posicionamiento de la imagen. y: el eje y coordina … Continue reading «SVG <uso> Elemento»
El atributo operator define la operación de composición o la operación de transformación que se realizará. Los elementos que utilizan este atributo incluyen: <feComposite> y <feMorphology>. Sintaxis: operator = erode|dilate|over|arithmetic|out|atop|xor|lighter|in Valores de atributo: el atributo del operador acepta los valores mencionados anteriormente y descritos a continuación. over: Muestra que el gráfico de origen definido en … Continue reading «Atributo del operador SVG»
El atributo de espaciado entre letras controla el espaciado entre caracteres de texto, es decir, aumenta o disminuye el espacio entre caracteres en un texto. Sintaxis: letter-spacing = keyword-values | length-values | global-values Valores de atributo: el atributo de espaciado entre letras acepta tres valores mencionados anteriormente y descritos a continuación: valores-palabra clave: este valor … Continue reading «Atributo de espaciado de letras SVG»
La propiedad SVG Window.document Sintaxis: var object = window.document Valor de retorno: esta propiedad Ejemplo 1: HTML <!DOCTYPE html> <html> <body> <svg viewBox=»0 0 1000 1000″ xmlns=»http://www.w3.org/2000/svg»> <circle cx=»200″ cy=»200″ r=»50″></circle> <script type=»text/javascript»> console.log(window.document); </script> </svg> </body> </html> Producción: Ejemplo 2: HTML <!DOCTYPE html> <html> <body> <svg viewBox=»0 0 1000 … Continue reading «Propiedad de documento de ventana SVG»
El elemento SVG <title> proporciona una descripción breve y accesible de cualquier elemento gráfico o contenedor SVG. El texto en un elemento <title> no se representa como parte del gráfico, pero los navegadores generalmente lo muestran como información sobre herramientas. Cuando pase el cursor sobre el elemento, se mostrará el título de ese elemento. Sintaxis: … Continue reading «SVG <título> Elemento»
La propiedad SVG FEDisplacementMap.yChannelSelector devuelve el objeto SVGAnimatedEnumeration correspondiente al componente yChannelSelector del elemento FEDisplacementMap.yChannelSelector . Sintaxis: var a = FEDisplacementMap.yChannelSelector Valor devuelto: esta propiedad devuelve el objeto SVGAnimatedEnumeration correspondiente al componente yChannelSelector del elemento FEDisplacementMap.yChannelSelector . Ejemplo 1: HTML <!DOCTYPE html> <html> <body> <svg width=»200″ height=»200″ viewBox=»0 0 220 220″> <filter id=»displacementFilter»> … Continue reading «SVG FEDisplacementMap.yChannelSelector Propiedad»
El elemento “<a>” en SVG se usa para crear un hipervínculo a otras páginas web o cualquier URL. Esta etiqueta funciona de la misma manera que la etiqueta HTML “<a>”. Sintaxis: <a href=»» target=»» type=»» rel=»» download=»»></a> Atributos: href: significa referencia de hipertexto y toma el enlace a los otros documentos. download: Le indica al … Continue reading «SVG <a> Elemento»
La propiedad SVG SpecularLighting.kernelUnitLengthY devuelve el objeto SVGAnimatedNumber correspondiente al componente kernelUnitLengthY del elemento FESpecularLighting.kernelUnitLengthY. Sintaxis: var a = FESpecularLighting.kernelUnitLengthY Valor devuelto: esta propiedad devuelve el objeto SVGAnimatedNumber correspondiente al componente kernelUnitLengthY del elemento FESpecularLighting.kernelUnitLengthY. Ejemplo 1: <!DOCTYPE html> <html> <body> <svg height=»200″ width=»200″ viewBox=»0 0 220 220″> <filter id=»filter»> <feSpecularLighting in=»BackgroundImage» … Continue reading «Propiedad SVG SpecularLighting.kernelUnitLengthY»
La propiedad SVG LinearGradientElement.y2 Sintaxis: LinearGradientElement.y2 Valor devuelto: Esta propiedad devuelve Ejemplo 1: HTML <!DOCTYPE html> <html> <body> <svg viewBox=»0 0 200 200″ xmlns=»http://www.w3.org/2000/svg» xmlns:xlink=»http://www.w3.org/1999/xlink»> <defs> <linearGradient id=»gfg» gradientTransform=»rotate(70)» x1=»0%» x2=»20%» y1=»0%» y2=»20%»> <stop offset=»10%» stop-color=»blue» /> <stop offset=»90%» stop-color=»green» /> </linearGradient> </defs> <circle cx=»20″ cy=»20″ r=»20″ fill=»url(‘#gfg’)» /> <script> … Continue reading «SVG LinearGradientElement.y2 Propiedad»
La propiedad SVG Event.cancelable indica si el evento se puede cancelar. Sintaxis: bool = event.cancelable Valor devuelto: esta propiedad devuelve el valor booleano del elemento de evento. Ejemplo 1: En el siguiente ejemplo, usaremos el evento onclick . HTML <!DOCTYPE html> <html> <body> <svg viewBox=»0 0 1000 1000″ xmlns=»http://www.w3.org/2000/svg»> <circle cx=»50″ cy=»50″ r=»50″ … Continue reading «Evento SVG.propiedad cancelable»