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.
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
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
0
