1

estoy intentando que el svg se vaya adaptando al ancho de la pantalla pero de alguna manera este insiste en seguir del mismo ancho al ir reduciendo la pantalla. He intentado:

introducir la descripción de la imagen aquí

width: 100%;
height: auto;

Pero aun asi no me permite hacer que el elemento se adapte a la pantalla y no se desborde de su contenedor svg original.

                <div className="home-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" width="1100" height="400.347">
                        <defs>
                        </defs>
                        <g id="Grupo_209" data-name="Grupo 209" transform="translate(-78 -2163.155)">
                            <path id="Línea_51" data-name="Línea 51" class="cls-1" transform="translate(79.5 2455.191)" d="M0 0h757"/>
                            <path id="Trazado_33" data-name="Trazado 33" class="cls-1" d="M742 2283.825v-60.237" transform="translate(-662.126 -60.434)"/>
                            <path id="Trazado_29" data-name="Trazado 29" class="cls-1" d="M305.806 2278.306h803.112" transform="translate(-91.918 -13.804)"/>
                            <g id="Grupo_116" data-name="Grupo 116" transform="translate(0 1276.691)">
                                <path id="Polígono_21" data-name="Polígono 21" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(306 917.311)"/>
                                <g id="Grupo_110" data-name="Grupo 110" transform="translate(-33 -1.92)">
                                    <text id="_4430" data-name="4430" class="cls-3" transform="translate(420 982.231)"><tspan x="-42.56" y="0">2</tspan></text>
                                    <text id="USUARIOS" class="cls-4" transform="translate(420 1020.231)"><tspan x="-44.83" y="0">U</tspan></text>
                                </g>
                            </g>
                            <g id="Grupo_115" data-name="Grupo 115" transform="translate(3 1276.691)">
                                <path id="Polígono_30" data-name="Polígono 30" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(659 917.311)"/>
                                <g id="Grupo_111" data-name="Grupo 111" transform="translate(-2 -71.5)">
                                    <text id="_775" data-name="775" class="cls-3" transform="translate(742 1051.811)"><tspan x="-31.92" y="0">5</tspan></text>
                                    <text id="CURSOS" class="cls-4" transform="translate(742 1089.811)"><tspan x="-35.48" y="0">C</tspan></text>
                                </g>
                            </g>
                            <g id="Grupo_114" data-name="Grupo 114" transform="translate(0 1276.691)">
                                <path id="Polígono_31" data-name="Polígono 31" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(1017 917.311)"/>
                                <g id="Grupo_112" data-name="Grupo 112" transform="translate(50 -71.5)">
                                    <text id="_4" data-name="4" class="cls-3" transform="translate(1048 1051.811)"><tspan x="-10.64" y="0">4</tspan></text>
                                    <text id="PAÍSES" class="cls-4" transform="translate(1048 1089.811)"><tspan x="-30.38" y="0">P</tspan></text>
                                </g>
                            </g>
                            <path id="Polígono_22" data-name="Polígono 22" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(86 2399.502)"/>
                            <path id="Polígono_23" data-name="Polígono 23" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(495 2399.502)"/>
                            <path id="Línea_50" data-name="Línea 50" class="cls-1" transform="translate(79.5 2302.191)" d="M0 0v153"/>
                        </g>
                    </svg>

                </div>

Mi css es:

    .home-wrapper
        background: red

        & > svg
            background: yellow
            width: 100%
            

            & > g
                background: green
        
        
        
    .cls-1
        fill: none
        stroke:#0d1738
        stroke-width: 3px
    .cls-2
        fill:#0d1738
    .cls-4
        fill:#3d4df3
    .cls-3
        font-size: 38px
        font-family: TitilliumWeb-SemiBoldTitillium Web
        font-weight: 600
    .cls-4
        font-size: 20px
        font-family: TitilliumWeb-Regular,Titillium Web

1 respuesta 1

2

Estableciendo un width y un height determinado, estás forzando al svg a siempre tener un ancho y un alto específico. Sustituye esa propiedad por viewBox="0 0 1100 400.347" y todo funcionará correctamente.

Adicionalmente tienes un typo en el "home-Wrapper". Es class no className.

Te adjunto tu código corregido. He compilado el Sass para que poder agregar un ejemplo live, pero realmente no tienes que hacer ningún cambio en tu css.

.home-wrapper {
  background: red;
  width: 100%;
  height: auto;
}
.home-wrapper > svg {
  background: yellow;
  width: 100%;
}
.home-wrapper > svg > g {
  background: green;
}
.home-wrapper .cls-1 {
  fill: none;
  stroke: #0d1738;
  stroke-width: 3px;
}
.home-wrapper .cls-2 {
  fill: #0d1738;
}
.home-wrapper .cls-4 {
  fill: #3d4df3;
}
.home-wrapper .cls-3 {
  font-size: 38px;
  font-family: TitilliumWeb-SemiBoldTitillium Web;
  font-weight: 600;
}
.home-wrapper .cls-4 {
  font-size: 20px;
  font-family: TitilliumWeb-Regular, Titillium Web;
}
    <div class="home-wrapper">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1100 400.347">
                        <defs>
                        </defs>
                        <g id="Grupo_209" data-name="Grupo 209" transform="translate(-78 -2163.155)">
                            <path id="Línea_51" data-name="Línea 51" class="cls-1" transform="translate(79.5 2455.191)" d="M0 0h757"/>
                            <path id="Trazado_33" data-name="Trazado 33" class="cls-1" d="M742 2283.825v-60.237" transform="translate(-662.126 -60.434)"/>
                            <path id="Trazado_29" data-name="Trazado 29" class="cls-1" d="M305.806 2278.306h803.112" transform="translate(-91.918 -13.804)"/>
                            <g id="Grupo_116" data-name="Grupo 116" transform="translate(0 1276.691)">
                                <path id="Polígono_21" data-name="Polígono 21" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(306 917.311)"/>
                                <g id="Grupo_110" data-name="Grupo 110" transform="translate(-33 -1.92)">
                                    <text id="_4430" data-name="4430" class="cls-3" transform="translate(420 982.231)"><tspan x="-42.56" y="0">2</tspan></text>
                                    <text id="USUARIOS" class="cls-4" transform="translate(420 1020.231)"><tspan x="-44.83" y="0">U</tspan></text>
                                </g>
                            </g>
                            <g id="Grupo_115" data-name="Grupo 115" transform="translate(3 1276.691)">
                                <path id="Polígono_30" data-name="Polígono 30" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(659 917.311)"/>
                                <g id="Grupo_111" data-name="Grupo 111" transform="translate(-2 -71.5)">
                                    <text id="_775" data-name="775" class="cls-3" transform="translate(742 1051.811)"><tspan x="-31.92" y="0">5</tspan></text>
                                    <text id="CURSOS" class="cls-4" transform="translate(742 1089.811)"><tspan x="-35.48" y="0">C</tspan></text>
                                </g>
                            </g>
                            <g id="Grupo_114" data-name="Grupo 114" transform="translate(0 1276.691)">
                                <path id="Polígono_31" data-name="Polígono 31" class="cls-2" d="M120.75 0 161 70l-40.25 70h-80.5L0 70 40.25 0z" transform="translate(1017 917.311)"/>
                                <g id="Grupo_112" data-name="Grupo 112" transform="translate(50 -71.5)">
                                    <text id="_4" data-name="4" class="cls-3" transform="translate(1048 1051.811)"><tspan x="-10.64" y="0">4</tspan></text>
                                    <text id="PAÍSES" class="cls-4" transform="translate(1048 1089.811)"><tspan x="-30.38" y="0">P</tspan></text>
                                </g>
                            </g>
                            <path id="Polígono_22" data-name="Polígono 22" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(86 2399.502)"/>
                            <path id="Polígono_23" data-name="Polígono 23" class="cls-2" d="m141 0 47 82-47 82H47L0 82 47 0z" transform="translate(495 2399.502)"/>
                            <path id="Línea_50" data-name="Línea 50" class="cls-1" transform="translate(79.5 2302.191)" d="M0 0v153"/>
                        </g>
                    </svg>

                </div>

1
  • Gracias jaime!!
    – Richi
    el 20 sep. 2021 a las 17:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.