首頁 > web前端 > css教學 > 如何在父容器內實現響應式 SVG 縮放:解決 ViewBox 困境?

如何在父容器內實現響應式 SVG 縮放:解決 ViewBox 困境?

Susan Sarandon
發布: 2024-10-26 22:35:02
原創
675 人瀏覽過

How to Achieve Responsive SVG Scaling Within Parent Containers:  Solving the ViewBox Dilemma?

解決父容器內的SVG 縮放問題

問題:

問題:

SVG 元素是否如何可以配置為在其父容器內擴展或收縮,而不管容器的大小?儘管嘗試了設定 viewBox 屬性的常見解決方案,但當 SVG 中的元素具有預定義尺寸時,行為仍然不一致。

答案:

縮放的根本原因問題在於 viewBox 的定義。 viewBox 代表 SVG 繪圖的大小,而不是容器。為了實現響應式縮放,viewBox 應該以寬度為單位定義,而內部元素(例如本例中的 rect)應該定義為 viewBox 的百分比。 例如,如果 viewBox 是設定為“100 0 100 100”,則矩形的寬度和高度應定義為“10%”。這樣,無論父容器的大小如何,矩形將始終保持 SVG 總寬度的 10%。

Inkscape 配置:不幸的是,Inkscape 不會目前尚未提供將 SVG 文件中的所有元素設定為僅使用百分比尺寸的選項。這必須為每個元素手動完成。

以上是如何在父容器內實現響應式 SVG 縮放:解決 ViewBox 困境?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板