HTML - SVG CON VARIAS IMÁGENES

 
Vista:
sin imagen de perfil
Val: 31
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

SVG CON VARIAS IMÁGENES

Publicado por Juan (13 intervenciones) el 24/01/2020 12:01:19
Buenas gente

Tengo un problema. Tengo una imagen SVG, sobre la que establezco una cuadrícula encima con rect y quería que sobre esa cuadrícula haya otras imágenes. He probado con el siguiente código, pero no he logrado que me aparezca.

1
2
3
4
5
6
7
8
9
10
11
<figure id='backing'>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2100 900" preserveAspectRatio="xMinYMin meet" style="z-index:0 !important; min-width: 2100 !important; min-height:900 !important; max-width: 2100 !important; max-height:900 !important">
    	<image id="imgFondo" width="2100" height="900" xlink:href="#" style="min-width: 2100 !important; min-height:900 !important; max-width: 2100 !important; max-height:900 !important" >
    	</image>
        <a xl ink:href="#" ><title>CUADRICULA: '.$coordX.','.$coordY.'</title>
            <rect  class="cuadricula" x="'.$x1.'" y="'.$y1.'" width="'.$width.'" height="'.$height.'" fill="#925E5E" opacity="0.10" title="'.$casillas.'" coords="'.$x1.','.$y1.','.$x2.','.$y2.'" alt="'.$casillas.'" onclick=""  style="z-index:10 !important; stroke-width: 3; " />
            <image class="image-cuadricula" src=""  width="'.$anchoImagen.'" height="'.$anchoImagen.'" style="z-index:15 !important;" x="'.$x1.'" y="'.$y1.'"></image>
         </a>
    ...
    </svg>
</figure>

Las varaibles $x1, $x2, $y1, $y2 vienen siendo para la posición de los diferentes recuadros de la cuadrícula, así mismo $width y $height es el ancho.

He probado para tratar de mostrar las imágenes delante ir cambiando el z-index, pero tampoco me ha funcionado.

Si se os ocurre como puedo hacerlo, sería genial.

Un saludo y gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de José Manuel
Val: 61
Ha aumentado 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

SVG CON VARIAS IMÁGENES

Publicado por José Manuel (18 intervenciones) el 27/01/2020 13:22:48
Hola:

Si, sin ningún problema puedes incrustar imágenes de mapas de bits u otras en svg. Efectivamente es con la etiqueta <image> pero debes usar el atributo:

1
2
3
xlink:href="data:image/jpg;base64,___"
 
<!-- los guiones indican el valor en base64 que crean la imagen -->

La imagen debe estar en base64. Aquí hay un ejemplo:

https://dev.w3.org/SVG/profiles/1.1F2/test/svg/struct-image-04-t.svg (mira el código fuente)

Un saludo,
https://obelearningservices.com/blog/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 31
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

SVG CON VARIAS IMÁGENES

Publicado por Juan (13 intervenciones) el 02/02/2020 01:28:18
Gracias, Jose Manuel. Eso efectivamente era lo que me faltaba. Perdonad por no entrar antes a agradecer, son semanas complicadas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar