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., el 8 ene. 2022 a las 17:38

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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