tengo un problema, no consigo alinear el div a la parte inferior del foreingObject para que así el texto quede siempre en el pie del contenedor.
Quiero que el div quede alineado a la parte inferior del contenedor y que se mantenga operativa la función de reducir la letra automáticamente al introducir texto en el objeto rojo, y respetar los límites de los polígonos de la izquierda y la derecha azules.
vamos en pocas palabra, quiero que en objeto rojo quede pegado a la parte inferior del objeto amarillo sin quitar ninguna propiedad de las que tiene ahora.
//este escript sirve para cuando escribo texto en el div que tiene la propiedad de contenteditable se reduzca la letra automaticamente al contenedor tipo "textfit"
var fuente = 10;
function titulo() {
var contenedorDiv = document.querySelector('.textoZona');
if (fuente < 10 || contenedorDiv.clientHeight > 25) {
fuente = 10;
contenedorDiv.style.fontSize = fuente + "pt";
while (contenedorDiv.clientHeight > 25) {
fuente -= 0.1;
contenedorDiv.style.fontSize = fuente + "pt";
}
}
}
.textoZona {
font-family: Arial;
width: 100%;
height: auto;
font-weight: bold;
color: white;
text-shadow: 1.2px 1.2px #c15d5d;
line-height: 90%;
word-wrap: break-word;
text-align: center;
font-size: 7pt;
background-color: red;
}
.left {
width: 8.7px;
height: 25px;
background-color: blue;
-webkit-shape-outside: polygon(100% 0, 0 100%, 0 0);
float: left;
-webkit-clip-path: polygon(100% 0, 0 100%, 0 0);
}
.right {
width: 72px;
height: 25px;
background-color: blue;
-webkit-shape-outside: polygon(0 0, 100% 0%, 100% 100%);
float: right;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%);
}
foreignObject {
background-color: yellow
}
<svg width="150mm" height="50mm" version="1.1" viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<foreignObject x="0" y="0" width="160" height="30">
<div class="left"></div><!––triangulo de la izquierda––>
<div class="right"></div><!––triangulo de la derecha––>
<div class="textoZona" contenteditable="true" onkeyup="titulo()">Como puedo alinear al borde inferior</div><!––este div quiero que este en la parte inferior de foreingnObject––>
</foreignObject>
</svg>