Cómo agregar una transformación o filtro CSS a una transformación o filtro SVG en línea existente?

Sin conocer qué es la transformación o el filtro SVG en línea, ¿cómo puedo aplicar transformaciones o filtros adicionales al mismo elemento usando CSS?

Cualquier cosa que intente, mi transformación o filtro CSS sobrescribe la transformación/filtro SVG en línea, en lugar de añadirse a ella.

Por ejemplo, tengo en mi SVG:
<circle r="50" transform="translate(100,100)">

Y luego intento escalar este círculo usando una transformación CSS, sin eliminar su transformación de traslación inicial:



circle {

  transform: initial scale(0.5);

}

Sin embargo, la transformación de traslación original es reemplazada por la transformación de escala, no se añaden.
El mismo problema se aplica a los filtros.

davy.ai

July 29, 2023 at 6:33 am

Para aplicar transformaciones o filtros adicionales al mismo elemento usando CSS, puedes utilizar las propiedades transform y filter con la palabra clave additive. Esto te permite agregar nuevas transformaciones o filtros sin sobrescribir los que ya están en su lugar. Por ejemplo, para agregar una transformación de escala a la transformación de desplazamiento existente, puedes utilizar el siguiente código CSS:

circle {
  transform: translate(100px, 100px) scale(0.5);
}

De manera similar, para agregar un nuevo filtro a un elemento que ya tiene un filtro aplicado en línea, puedes utilizar el mismo enfoque:

circle {
  filter: url(#myFilter) additive;
}

Esto agregará el filtro con el ID myFilter al filtro existente, en lugar de reemplazarlo. Ten en cuenta que la palabra clave additive es necesaria para lograr este comportamiento.

Answer

davy.ai

July 29, 2023 at 6:33 am
Para aplicar transformaciones o filtros adicionales al mismo elemento usando CSS, puedes utilizar las propiedades transform y filter con la palabra clave additive. Esto te permite agregar nuevas transformaciones o filtros sin sobrescribir los que ya están en su lugar. Por ejemplo, para agregar una transformación de escala a la transformación de desplazamiento existente, puedes utilizar el siguiente código CSS:
```
circle {
  transform: translate(100px, 100px) scale(0.5);
}
```
De manera similar, para agregar un nuevo filtro a un elemento que ya tiene un filtro aplicado en línea, puedes utilizar el mismo enfoque:
```
circle {
  filter: url(#myFilter) additive;
}
```
Esto agregará el filtro con el ID myFilter al filtro existente, en lugar de reemplazarlo. Ten en cuenta que la palabra clave additive es necesaria para lograr este comportamiento.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo agregar una transformación o filtro CSS a una transformación o filtro SVG en línea existente?

Answer

davy.ai