2

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>

1 respuesta 1

1

Colocando position: relative al foreignObject (contenedor) y un position: absolute a la clase .textoZona (zona), puedes mover y fijar el contenido a cualquiera de los bordes. Coloqué bottom: 0 en el .textoZona para que se alinee a la parte inferior del foreignObject.

//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;
      margin-top: 10px;
      position:absolute;
      bottom: 0;
      z-index:-1;
    }

    .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;
      position: relative;
    }
<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>

1
  • si te fijas bien tu solución no funciona como yo quiero, ya que el texto se pone debajo de los triángulos azules., Commented el 8 ene. 2022 a las 17:38

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.