Un usuario preguntó 👇
¡Hola, gracias por tu plugin! Pregunta ¿Cómo puedo cambiar el color de la imagen SVG con CSS? ¿Existe un tutorial?
Gracias
(@benbodhi)
hace 1 año
Hola,
Me alegra que te guste mi plugin 🙂
¿Puede proporcionar un enlace al sitio por favor?
Sin embargo, es bastante fácil, solo necesita enfocarse en la clase correcta de su elemento y aplicar el color o rellenar el color.
Por ejemplo:
.your-svg-class { fill: red; color: red; }
Probablemente solo necesite usar uno de estos (ya sea de relleno o de color), que generalmente está relleno, pero depende específicamente de su SVG.
Espero que esto ayude. Déjame saber cómo vas.
PD. Estoy trabajando en un sitio web con algunos consejos y tutoriales. Aún no hay MTE, pero se está haciendo.
(@woodypad)
hace 1 año
Hola, El sitio sigue siendo local, pero estoy usando plguin para insertar solo iconos. Ya lo intenté, como dirías, pero no funciona. ¿Necesito guardar el archivo svg de una manera particular?
Gracias
(@benbodhi)
hace 1 año
Hola,
Es difícil decir qué está pasando. Normalmente debería poder guardar. ¿Pueden enviar el archivo SVG para que pueda probar?
(@woodypad)
hace 1 año
Hola, lo intenté de nuevo. Dentro de WPbakery y dentro de una sección de WP normal, no hay nada coloreado. Adjunto un svg de prueba.
https://www.dropbox.com/s/ugo0u01k0jyw7e0/SVGtest.svg?dl=0
Gracias
(@benbodhi)
hace 1 año
Debe asegurarse de que el SVG esté en línea o ningún SEC tocará los elementos que contiene. Puede comprobar si se proporciona como un código SVG o como una etiqueta IMG con el SVG como src.
La SEC que afectaría a los 2 elementos de su SVG que se proporcionarían es:
circle#Ellipse_97 {
fill: green;
}
path#Path_461 {
fill: blue;
}Puedes cambiar los colores a lo que quieras.
Si desea modificar los objetivos, abra su SVG en un editor de código como texto sublime. Puede agregar sus propias clases a los 2 elementos y centrarse en ellos en su lugar.
(@woodypad)
hace 1 año
Hola, lo siento, no puedo hacer que funcione … Ni siquiera con el código que proporcionaste. Definitivamente hay algo que se me escapa.
Para mí está claro cómo cambiar el contenido del archivo SVG, esto no es un problema. Pero no puedo entender por qué no cambia de color con CSS. ¿Debería activarse algo en la configuración?
Gracias
(@benbodhi)
Hace 12 meses
Hola,
Necesitaría un modo de alto nivel y debe asegurarse de que su SVG se entregue en línea para que pueda concentrarse en los elementos interiores.
(@ grafiker29)
Hace 12 meses
También tengo este problema. Implementé el modo avanzado y el svg se está poniendo en línea, pero no puedo concentrarme en los elementos internos con CSS.
Esta respuesta fue modificada hace 12 meses por.
(@benbodhi)
Hace 11 meses, 4 semanas
Hola @ grafiker29
Realmente debería comenzar su propio hilo incluso si lo parece.
Si su SVG está en línea y ve los elementos dentro del inspector, todo lo que tiene que hacer es usar el CSS que necesita para manipular esos elementos.
Si tiene un SVG en línea, ese es el final de la línea para mi plugin, el resto es completamente externo.
Por lo general, si no puede cambiar algo con CSS, deberá aumentar la especificidad.
Por ejemplo, si esto no funciona:
.your-svg-class { fill: red; }
Parecería que algún CSS de alto nivel ya le está diciendo de qué color será … O los colores ya están ubicados dentro de su código SVG.
Solo necesita ser lo más específico posible. La siguiente es una excelente versión de:
html body .your-svg-class {fill: red;}
Es posible que esto ni siquiera funcione, debe ser específico para el código exacto. Pero espero que esto ayude.
Para que quede claro, esto sucede después de que mi plugin hace su publicación. Es posible que necesite encontrar un desarrollador para arreglar la SEC por usted.
Este año armaré un sitio lleno de recursos para ayudar a las personas a usar el poder de mi plugin. Descubriré cómo escribir CSS para manipular sus elementos SVG.
Mientras tanto, si desea que le eche un vistazo, abra una nueva conversación y comparta su URL e información sobre el problema. Lo tomaré rápidamente.
¿Solucionó tu problema??
0 / 0