html改图片左侧对齐,左对齐SVG左对齐，右对齐以创建边图像_html_开发99编程知识库...

你還沒有為子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">