2

Necesito un contenedor con forma especial que tenga alto dinamico, y pues ahi surge el inconveniente... el tamaño en ancho es pequeño debido a que solo esta pensado para dispositivos moviles, pero la verdad soy nuevo en esto del sgv... entonces mi pregunta es...

¿Se puede usar este sgv de tal forma que se comporte como un div o parecido que contenga texto?, y si se puede, ¿Cómo se haría?, es que la verdad no tengo idea... este es el sgv que tengo:

/*Unos pequeños estilos*/
.msgContainer{

    display: block;
    width: 100%;

}

body{
  background: #000;
}

.msgInner{

    display: block;
    margin: 15px auto;
    text-align: center;

}
<div class="msgContainer">
    <svg width="280" height="55" class = "msgInner">
        <rect x="0" y="0" rx="10" ry="10" width="275" height="40"
        style="fill:white;opacity:1;"/>
        <polygon points = "275, 30, 280, 50, 255, 35" style = "fill: white;"></polygon>
    </svg>
</div>

1 respuesta 1

0

En SVG puedes calcular la anchura del texto utilizando el método getComputedTextLength() Si tienes la anchura del texto puedes calcular el valor del atributo viewBox del elemento svg y la anchura del rectángulo. En este caso he optado por centrar el texto alrededor del centro del rect así que necesito recalcular también el valor del atributo x del texto.

En el siguiente ejemplo por favor cambia el texto para ver como cambia el svg. Espero que sea lo que necesites.

let w = elTexto.getComputedTextLength();
let pad = 20;

elSvg.setAttributeNS(null,"viewBox",`0 0 ${w + pad + 5} 45` );
elSvg.setAttributeNS(null,"width",w + pad );
elRect.setAttributeNS(null,"width", w + pad);
elTexto.setAttributeNS(null,"x", pad/2 + w/2);
/*Unos pequeños estilos*/
.msgContainer{
    display: block;
    width: 100%;
}

body{
  background: #000;
}

.msgInner{
    display: block;
    margin: 15px auto;
    text-align: center;
}


svg{border:1px solid #ccc;overflow:visible}
polygon{transform:translate(100%,0)}
<div class="msgContainer">
    <svg id="elSvg" width="280" viewBox="0 0 280 55" class = "msgInner">
        <rect id="elRect" x="0" y="0" rx="10" ry="10" width="275" height="40"
        style="fill:white;opacity:1;"/>
        <polygon points = "-5, 30, 0, 50, -25, 35" style = "fill: red;"></polygon>     
      <text id="elTexto" x="140" y="25" text-anchor="middle">el texto que tu quieras</text>
    </svg>
</div>

2
  • Esto de la propiedad getComputedTextLength no lo sabia, muy interesante la verdad, sin embargo no resuelve el problema :c me temo que la idea es que el svg sea escalable en alto, no en ancho... el ancho ha de ser fijo, pero el alto es el que debe poder variar...
    – Layer
    Commented el 12 mar. 2020 a las 19:13
  • Muchas gracias por tu respuesta enxaneta de verdad se agradece :3, ahi he aprendido unas cuantas cosas jejeje.
    – Layer
    Commented el 12 mar. 2020 a las 19:14

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.