I need a container with a special shape that has a dynamic height, and that is where the problem arises... the size in width is small because it is only designed for mobile devices, but the truth is that I am new to this SGV... so my question is...
Can this sgv be used in such a way that it behaves like a div or something similar that contains text? And if so, how would it be done? I really have no idea... this is the sgv I have:
/*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>
In SVG you can calculate the width of the text using the
getComputedTextLength()
If you have the width of the text method you can calculate the value of the attributeviewBox
of the svg element and the width of the rectangle. In this case I have chosen to center the text around the center of the so I need to recalculate the value of the textrect
attribute as well .x
In the example below please change the text to see how the svg changes. I hope it is what you need.