0

estoy desarrollando un mapa interactivo en el cual aparecerán los países del continente americano, cada país debe de tener una imagen e fondo con algo representativo con dicho país, esto lo estoy haciendo con la librería JVectorMap, ya he logrado insertar la silueta de un país y una imagen de fondo para dicho país, el problema viene al momento de ajustar la imagen al tamaño el país, quiero hacer que la imagen se adapte a la anchura del país y la altura se automática, ya lo he intentado modificando los valores width y height de a etiqueta pattern y image de la imagen pero no funciona, he dado tamaños en porcentajes, valores máximos, pero no logro hacer que se adapte. espero me puedan ayudar.

<html><head
</head>
<body>
  <div id="world-map" style="width: 500px; height: 500px;"><div class="jvectormap-container" style="background-color: rgb(80, 80, 80);"><svg width="500" height="500">
    <defs>
      <pattern id="image2" x="0" y="0" width="525" height="350" viewBox="0 0 1050 700" patternUnits="userSpaceOnUse"><image xlink:href="https://static01.nyt.com/images/2017/02/04/universal/5cdmxES2/5cdmxES2-master1050.jpg" x="0" y="0" width="1050" height="700"></image></pattern>
    </defs>
    <g transform="scale(1.2155555555555555) translate(0, 89.79309691312544)"><path d="M133.12,200.41l0.2,0.47l9.63,3.33l6.96,-0.02l0.4,-0.4l0.0,-0.74l3.77,0.0l3.55,2.93l1.39,2.83l1.52,1.04l2.08,0.82l0.47,-0.14l1.46,-2.0l1.73,-0.04l1.59,0.98l2.05,3.35l1.47,1.56l1.26,3.14l2.18,1.02l2.26,0.58l-1.18,3.72l-0.42,5.04l1.79,4.89l1.62,1.89l0.61,1.52l1.2,1.42l2.55,0.66l1.37,1.1l7.54,-1.89l1.86,-1.3l1.14,-4.3l4.1,-1.21l3.57,-0.11l0.32,0.3l-0.06,0.94l-1.26,1.45l-0.67,1.71l0.38,0.7l-0.72,2.27l-0.49,-0.3l-1.0,0.08l-1.0,1.39l-0.47,-0.11l-0.53,0.47l-4.26,-0.02l-0.4,0.4l-0.0,1.06l-1.1,0.26l0.1,0.44l1.82,1.44l0.56,0.91l-3.19,0.21l-1.21,2.09l0.24,0.72l-0.2,0.44l-2.24,-2.18l-1.45,-0.93l-2.22,-0.69l-1.52,0.22l-3.07,1.16l-10.55,-3.85l-2.86,-1.96l-3.78,-0.92l-1.08,-1.19l-2.62,-1.43l-1.18,-1.54l-0.38,-0.81l0.66,-0.63l-0.18,-0.53l0.52,-0.76l0.01,-0.91l-2.0,-3.82l-2.21,-2.63l-2.53,-2.09l-1.19,-1.62l-2.2,-1.17l-0.3,-0.43l0.34,-1.48l-0.21,-0.45l-1.23,-0.6l-1.36,-1.2l-0.59,-1.78l-1.54,-0.47l-2.44,-2.55l-0.16,-0.9l-1.33,-2.03l-0.84,-1.99l-0.16,-1.33l-1.81,-1.1l-0.97,0.05l-1.31,-0.7l-0.57,0.22l-0.4,1.12l0.72,3.77l3.51,3.89l0.28,0.78l0.53,0.26l0.41,1.43l1.33,1.73l1.58,1.41l0.8,2.39l1.43,2.41l0.13,1.32l0.37,0.36l1.04,0.08l1.67,2.28l-0.85,0.76l-0.66,-1.51l-1.68,-1.54l-2.91,-1.87l0.06,-1.82l-0.54,-1.68l-2.91,-2.03l-0.55,0.09l-1.95,-1.1l-0.88,-0.94l0.68,-0.08l0.93,-1.01l0.08,-1.78l-1.93,-1.94l-1.46,-0.77l-3.75,-7.56l4.88,-0.42Z" data-code="MX" fill="url(#image2)" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element"></path></g><g></g><g></g><g></g></svg><div class="jvectormap-zoomin">+</div><div class="jvectormap-zoomout">−</div><div class="jvectormap-legend-cnt jvectormap-legend-cnt-h"></div><div class="jvectormap-legend-cnt jvectormap-legend-cnt-v"></div></div></div>
<div class="jvectormap-tip"></div></body></html>

1 respuesta 1

1

Observación: Siempre que trabajas con svg utiliza el atributo viewBox.

En lugar de utilizar un patron prefiero cortar la imagen con clipPath. Para establecer el tamaño y la posición de la imagen necesitas saber el tamaño de la caja delimitadora (bounding box) del trazado (en este caso <path id="mx"). Para esto utilizo el método getBBox() También necesito saber el tamaño de la imagen, en este caso let iw = 915,ih = 610;

Ulteriormente viene una función que recalcula y establece el tamaño de la imagen en función de la proporción entre la altura y la anchura de la imagen y del trazado.

Espero que sea útil.

let bb = mx.getBBox(),//la caja delimitadora del trazado #mx
sw = bb.width,//la anchura del elemento svg (#mx)
sh = bb.height;//la altura del elemento svg (#mx)
let iw = 915,ih = 610;//la anchura y la altura original de la imágen

//una función que recalcula el tamaño de la imágen
function svgCover(sw,sh,iw,ih) {
  // relación alto / ancho para el elemento svg
  let s_ratio = sw / sh;
  // relación alto / ancho para la imagen
  let i_ratio = iw / ih;
  // si la proporción altura/anchura de la imagen y del elemento svg es la misma
  if (s_ratio == i_ratio) {
    laImagen.setAttributeNS(null,"width",sw);
    laImagen.setAttributeNS(null,"height",sh);
  }
  //si la proporción altura/anchura del elemento svg es > la proporción altura/anchura de la imagen
  if (s_ratio > i_ratio) {
    let ratio = sw / iw;
    IW = sw;
    IH = ih * ratio;
    let offsetY = -(IH - sh) / 2; 
    // para centrar la imagen
    // establece el valor del attributo y width y height de la imagen
    laImagen.setAttributeNS(null,"y",bb.y + offsetY);
    laImagen.setAttributeNS(null,"width",IW);
    laImagen.setAttributeNS(null,"height",IH);
  }
  //si la proporción altura/anchura del elemento svg es < la proporción altura/anchura de la imagen
  if (s_ratio < i_ratio) {
    let ratio = sh / ih;
    IH = sh;
    IW = iw * ratio;
    let offsetX = -(IW - sw) / 2; 
    // para centrar la imagen
    // establece el valor del attributo y width y height de la imagen
    laImagen.setAttributeNS(null,"x",bb.x + offsetX);
    laImagen.setAttributeNS(null,"width",IW);
    laImagen.setAttributeNS(null,"height",IH);
  }
}


svgCover(sw,sh,iw,ih)
svg{background:#555}
 <svg width="500" viewBox="0 0 500 500" > 
    <defs>
      <clipPath id="Mexico"><path  id="mx" d="M133.12,200.41l0.2,0.47l9.63,3.33l6.96,-0.02l0.4,-0.4l0.0,-0.74l3.77,0.0l3.55,2.93l1.39,2.83l1.52,1.04l2.08,0.82l0.47,-0.14l1.46,-2.0l1.73,-0.04l1.59,0.98l2.05,3.35l1.47,1.56l1.26,3.14l2.18,1.02l2.26,0.58l-1.18,3.72l-0.42,5.04l1.79,4.89l1.62,1.89l0.61,1.52l1.2,1.42l2.55,0.66l1.37,1.1l7.54,-1.89l1.86,-1.3l1.14,-4.3l4.1,-1.21l3.57,-0.11l0.32,0.3l-0.06,0.94l-1.26,1.45l-0.67,1.71l0.38,0.7l-0.72,2.27l-0.49,-0.3l-1.0,0.08l-1.0,1.39l-0.47,-0.11l-0.53,0.47l-4.26,-0.02l-0.4,0.4l-0.0,1.06l-1.1,0.26l0.1,0.44l1.82,1.44l0.56,0.91l-3.19,0.21l-1.21,2.09l0.24,0.72l-0.2,0.44l-2.24,-2.18l-1.45,-0.93l-2.22,-0.69l-1.52,0.22l-3.07,1.16l-10.55,-3.85l-2.86,-1.96l-3.78,-0.92l-1.08,-1.19l-2.62,-1.43l-1.18,-1.54l-0.38,-0.81l0.66,-0.63l-0.18,-0.53l0.52,-0.76l0.01,-0.91l-2.0,-3.82l-2.21,-2.63l-2.53,-2.09l-1.19,-1.62l-2.2,-1.17l-0.3,-0.43l0.34,-1.48l-0.21,-0.45l-1.23,-0.6l-1.36,-1.2l-0.59,-1.78l-1.54,-0.47l-2.44,-2.55l-0.16,-0.9l-1.33,-2.03l-0.84,-1.99l-0.16,-1.33l-1.81,-1.1l-0.97,0.05l-1.31,-0.7l-0.57,0.22l-0.4,1.12l0.72,3.77l3.51,3.89l0.28,0.78l0.53,0.26l0.41,1.43l1.33,1.73l1.58,1.41l0.8,2.39l1.43,2.41l0.13,1.32l0.37,0.36l1.04,0.08l1.67,2.28l-0.85,0.76l-0.66,-1.51l-1.68,-1.54l-2.91,-1.87l0.06,-1.82l-0.54,-1.68l-2.91,-2.03l-0.55,0.09l-1.95,-1.1l-0.88,-0.94l0.68,-0.08l0.93,-1.01l0.08,-1.78l-1.93,-1.94l-1.46,-0.77l-3.75,-7.56l4.88,-0.42Z" ></path></clipPath></defs>

<g id="KK">
<image transform="scale(1.2155555555555555) translate(0, 89.79309691312544)" id="laImagen" x="128" y="200" xlink:href = "https://static01.nyt.com/images/2017/02/04/universal/5cdmxES2/5cdmxES2-master1050.jpg"  clip-path="url(#Mexico)" />
   </g>

</svg>

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.