El código HTML a continuación muestra el código HTML donde estoy usando SVG para mostrar imágenes y luego polígonos en las imágenes y esto se hace con D3 usando la paginación de imágenes.
De alguna manera, las imágenes se muestran si estoy usando una etiqueta principal fuera del SVG con la misma identificación y clase, pero tan pronto como la mantengo dentro del SVG, muestra la CAJA SVG pero no la imagen dentro del SVG.
la razón por la que tengo una etiqueta principal se puede entender si se hace referencia a la función showImages() desde el código javascript
El código javascript muestra cómo se utilizan la identificación y las clases en el código HTML. Además, quiero que la imagen se muestre con su tamaño y escala originales, así que qué entrada debo proporcionar a la etiqueta SVG y la etiqueta img en términos de altura y ancho para evitar que cambie el tamaño de la imagen.
Realmente necesito hacer esto, esta es la última vez de mi tarea. ¡Por favor, ayúdame!
<div class="gallery"> <main id="image-gallery" class="images"> </main> <svg width="500" height="500"> <polygon id='x' style="stroke:#f00; fill:none;" /> </svg> </div>...
La imagen se puede mostrar usando el elemento <img> fuera del SVG o usando el elemento <image> dentro del SVG. Aquí hay un ejemplo de ambos donde la imagen y el SVG se colocan de forma absoluta en el contenedor.
.gallery { display: flex; gap: 10px; } .galleryimage { position: relative; width: 250px; height: 150px; } .galleryimage img { position: absolute; } .galleryimage svg { position: absolute; } <div class="gallery"> <div class="galleryimage"> <img src="https://via.placeholder.com/250x150.png" id="image-gallery" class="images" width="250" height="150"/> <svg width="250" height="150"> <polygon id="x" points="30,30 200,40 100,120 50,110" style="stroke:#f00; fill:none;" /> </svg> </div> <div class="galleryimage"> <img src="https://via.placeholder.com/250x150.png" id="image-gallery" class="images" width="250" height="150"/> <svg width="250" height="150"> <image href="https://via.placeholder.com/250x150.png" width="250" height="150"/> <polygon id="x" points="30,30 200,40 100,120 50,110" style="stroke:#f00; fill:none;" /> </svg> </div> </div>