你還沒有為子SVGs提供任何內容,因此你要做什麼是不清楚的。
我添加了一些矩形並刪除了 visibility="hidden" 以便它們可見。 唯一剩下的就是將第二個SVG定位到右邊,這很容易通過設置 x="50%" 來實現。
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="position: fixed; width: 100%; height: 100%; margin: 0;">
width="50%" height="50%"
preserveAspectRatio="xMidYMid meet"
viewBox="-100 -100 200 200">
x="50%"
width="50%" height="50%"
preserveAspectRatio="xMidYMid meet"
viewBox="-100 -100 200 200">
只要文檔比它寬,( 這些箱子互相互相 abut 。) 就能正常工作。 如果頁面比正方形寬,那麼兩個子SVGs也會如此,因為你已經將它們的寬度和高度設置為 50% 。
對此有兩種通用解決方案:
( a ) 給最外層的SVG設置平方或者高,或者( b ) 對齊子 SVGs,以便它們在頂點上對齊。
使用 preserveAspectRatio 屬性實現( b ) 。 將左子SVG放置在視口( xmaxymin"的右上角,以及它的視口( xMinYMin"左上角的右子 SVG 。
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="position: fixed; width: 100%; height: 100%; margin: 0;">
width="50%" height="50%"
preserveAspectRatio="xMaxYMin meet"
viewBox="-100 -100 200 200">
x="50%"
width="50%" height="50%"
preserveAspectRatio="xMinYMin meet"
viewBox="-100 -100 200 200">