下面的 HTML 代碼顯示了我使用 SVG 顯示圖片然后在圖片上顯示多邊形的 HTML 代碼，這是使用 D3 使用影像分頁完成的。
如果我在 SVG 外部使用具有相同 id 和類的主標簽，則影像會以某種方式顯示，但只要我將其保留在 SVG 內，它就會顯示 SVG BOX，但不會顯示 SVG 內的影像
如果從javascript代碼中參考showImages（）函式，可以理解我有一個主標簽的原因
javascript 代碼顯示了 id 和 classes 在 HTML 代碼中的使用方式。另外，我希望影像以其原始大小和比例顯示，所以我應該在高度和寬度方面向 SVG 標簽和 img 標簽提供什么輸入，以防止它改變影像的大小。
我真的需要完成這件事，這是我的最后一次任務。請幫我！
<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>
...
uj5u.com熱心網友回復：
<img>可以使用SVG 外部的元素或使用SVG 內部的元素來顯示影像<image>。這是影像和 SVG 在容器中絕對定位的示例。
.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/488401.html
標籤：javascript html 图片 svg