響應式 SVG 與 HTML/CSS/JS 中的合適圖像

Question

我有兩個關於響應能力的問題，我會盡可能清楚地解釋我的情況，如果需要，請不要猶豫，詢問任何細節。

我有以下 SVG，它從頂視圖模擬了絲網印刷機的簡單設計。

這些框架中的每一個都應該有一個<div></div>內部，一些圖像堆疊在絕對 position 上以形成某種前后畫廊。 SVG是這樣顯示的：

當用戶單擊任何箭頭圖標時， 90deg旋轉 90 度以顯示下一張或上一張圖像。 我用一些 CSS 和簡單的 JS 完成了這項工作。 我還得到了 position 圖像框架完美地位於 SVG 之上。問題是，一旦調整 window 的大小，圖像就會停止匹配框架的寬度和高度，並且 SVG 會失去其 position頂部或底部太多。 我在這里幾乎所有內容都主要使用 position 的百分比，但我知道對於此解決方案，這不是 go 的最佳方式。

我怎樣才能實現一個響應式包裝器，將 SVG 設置在頂部的一半，並保持底部框架可見，如 UI 設計中所示？ 當 SVG 增大或縮小時，如何調整圖像框的大小？ 非常感謝您的幫助，在此先感謝。

這是一個小提琴： https://jsfiddle.net/EvreuxPendragon/zcbm0n46/8/

Answer 1

我確信有很多方法可以解決這個問題（總是有），但我最近遇到了類似的問題，我使用 SVG 中的SVG <image>元素實現了它。這種方法的優點是image 元素使用 SVG viewbox 坐標調整大小和定位，它隨着 SVG 的變化而增長和縮小 - 因此它在 SVG 中保持正確定位。正如您在 jsfiddle 中所做的那樣，您可以使用 javascript 更改圖像 URL ( href )。

這是我在 SVG 框架內實現圖片交換的頁面： https://fintellect.io/ease電話框架是 SVG，隨着用戶滾動和新文本內容變得可見，電話框架內的圖像發生變化。

您可以在具有移動/響應功能的開發工具中查看它，以查看圖像在外部 SVG 調整大小時正確定位+大小。