如何實(shí)現(xiàn)SVG縮放時(shí)保持屏幕中心點(diǎn)不變? svg縮略圖
Bukalapak印尼優(yōu)選跨境問答2025-06-243900
在SVG中,可以通過設(shè)置viewBox
屬性來控制縮放時(shí)屏幕中心點(diǎn)的變化。viewBox
屬性定義了一個(gè)矩形,該矩形表示SVG的視口邊界,即SVG內(nèi)容在屏幕上的顯示區(qū)域。
例如,如果你想讓SVG在水平方向上保持中心點(diǎn)不變,可以設(shè)置viewBox
屬性為:
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
在這個(gè)例子中,viewBox
屬性的值是0 0 100 100
,這意味著SVG的內(nèi)容將在寬度和高度上都保持100像素,而不會隨著窗口大小的改變而改變。這樣,無論窗口如何縮放,SVG的中心點(diǎn)(即圓心)都將保持在屏幕的中心。
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理,出于傳遞更多信息之目的,不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明,如有侵權(quán),聯(lián)系刪除。