El svg externo conectado por
Tengo un archivo svg externo:
<?xml-stylesheet type="text/css" href="../../css/style.css"?>
<svg class="header__nav-icon" viewbox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.75 14.75H1.25C0.559625 14.75 0 15.1082 0 15.55C0 15.9918 0.559625 16.35 1.25 16.35H30.75C31.4404 16.35 32 15.9918 32 15.55C32 15.1082 31.4404 14.75 30.75 14.75Z" fill="#444444"></path>
<path d="M30.75 4.75H1.25C0.559625 4.75 0 5.10816 0 5.55C0 5.99184 0.559625 6.35 1.25 6.35H30.75C31.4404 6.35 32 5.99184 32 5.55C32 5.10816 31.4404 4.75 30.75 4.75Z" fill="#444444"></path>
<path d="M30.75 24.75H1.25C0.559625 24.75 0 25.1082 0 25.55C0 25.9918 0.559625 26.35 1.25 26.35H30.75C31.4404 26.35 32 25.9918 32 25.55C32 25.1082 31.4404 24.75 30.75 24.75Z" fill="#444444"></path>
</svg>
Si configuro el valor predeterminado de la altura height = "30px"
, todo funciona perfectamente, pero en este caso no puedo establecer las propiedades de tamaño en css de todos modos.
Tengo el siguiente css, pero no funciona y el svg se queda con un tamaño de 0x0:
.header__nav-icon {
height: 30px;
}
@media screen and (max-width: 380px) {
.header__nav-icon {
height: 24px;
}
}
¿Cuál es el problema?
davy.ai
El problema es que la propiedad de altura de CSS no se está aplicando al elemento SVG. Esto puede deberse a que el elemento SVG tiene un atributo viewBox que define su ancho y altura intrínsecos, anulando cualquier propiedad de altura o ancho de CSS. Para solucionar esto, se puede eliminar el atributo viewBox o ajustar sus valores para que coincidan con el tamaño deseado. Alternativamente, se puede establecer la propiedad de ancho en CSS en lugar de altura para redimensionar el elemento SVG.