20: Styling Inline SVG - Poderes y limitaciones - Trucos CSS

Anonim

SVG en línea se puede "diseñar" en el sentido de que ya tiene rellenos y trazos y todo eso en el momento en que lo pones en la página. Eso es increíble y una forma totalmente buena de usar SVG en línea. Pero también puedes diseñar SVG en línea a través de CSS, lo cual es algo asombroso porque, imagino que para muchos de nosotros, CSS es donde nos sentimos poderosos y cómodos.

Funciona más o menos como cabría esperar. He aquí un ejemplo sencillo:

 
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )

CSS tiene un poco "más poder", se podría decir, que los atributos de estilo en los propios elementos SVG. Si tuviera algo así fill="red", el CSS aún "ganaría". Puede pensar lo contrario porque parece que los atributos de estilo serían poderosos como los estilos en línea, pero no lo son. Sin embargo, los estilos en línea siguen siendo poderosos.

Del mismo modo, las reglas de CSS no caen en cascada si ocurre algo más específico. Por ejemplo:

 
.parent ( fill: red; )

El CSS pierde en este caso, porque el azul se está aplicando más específicamente al rect.

Si planeo diseñar SVG a través de CSS, generalmente me resulta más fácil dejar los atributos de estilo fuera de los elementos SVG por completo.

¡Es importante saber alerta!

Hemos pasado tiempo hablando . Di que esta es la situación:

 

En última instancia, ese "niño" se pone en ese "padre", ¿verdad? Correcto. ¿Entonces esto debería funcionar?

.parent .child ( fill: red; )

Pero no es así.

Para que funcione, lo clona y lo coloca en un "DOM de sombra" en ese segundo SVG. No se puede penetrar a través de esa sombra DOM con un selector como ese. Simplemente no funciona. Quizás algún día haya una solución, pero ahora no la hay.

Puedes hacer como:

.parent ( fill: red; )

Y ese relleno pasará en cascada y afectará a los elementos secundarios si no hay nada más específico en el camino. O

.child ( fill: red; )

y afectar todas las instancias de ese niño. Pero no ambos.

Si necesita versiones con estilos diferentes de lo mismo ...

Simplemente duplica el o lo que necesites. La gran mayoría de la información será idéntica y GZip comerá texto idéntico para el desayuno.