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 el atributo in se coloca sobre el gráfico de destino definido en el atributo in2 .
- in: Muestra que las partes del gráfico de origen definidas en el atributo in reemplazan al gráfico de destino definido en el atributo in2 .
- out: Muestra que se muestran las partes del gráfico fuente definidas en el atributo in .
- encima: muestra que las partes del gráfico de origen que se superponen al gráfico de destino reemplazan al gráfico de destino.
- xor: Muestra que las regiones no superpuestas del gráfico de origen definido en el atributo in se combinan con el gráfico de destino definido en el atributo in2.
- más ligero: Muestra que se muestra la suma del gráfico de origen y el gráfico de destino definidos en el atributo in e in2 respectivamente.
- aritmética: Muestra que el gráfico fuente y el gráfico destino definidos en el atributo in e in2 respectivamente se combinan mediante la siguiente fórmula: resultado = k1*i1*i2 + k2*i1 + k3*i2 + k4
- erosionar: Adelgaza el gráfico fuente definido en el atributo in .
- dilate: Engorda el gráfico fuente definido en el atributo in .
Los siguientes ejemplos ilustran el uso del atributo de operador .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg viewBox="0 0 420 70" xmlns="http://www.w3.org/2000/svg"> <filter id="thin"> <feMorphology operator="erode" radius="0.4" /> </filter> <text x="10" y="20" fill="green" filter="url(#thin)"> Thin text </text> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg viewBox="0 0 420 70" xmlns="http://www.w3.org/2000/svg"> <filter id="fat"> <feMorphology operator="dilate" radius="0.8" /> </filter> <text x="10" y="20" fill="green" filter="url(#fat)"> Fat text </text> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA