我很抱歉成為n第一個提出這個問題的人。我已經窺探了一堆，還沒有破解它。
我希望能夠將“任何”svg 縮放到視口的全尺寸，居中。
例如，考慮以下 svg 元素：
<svg baseProfile="full" height="100%" version="1.1" width="100%"
xmlns="http://www.w3.org/2000/svg"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xlink="http://www.w3.org/1999/xlink"><defs />
<polygon fill="blue" points="0,0 10,0 10,10 0,10" />
</svg>
我只想將其居中并放大，直到它填滿整個瀏覽器的視口。最終結果應該是一個藍色的大方塊。由于大多數顯示幕的寬度大于高度，因此它應該居中并垂直填充瀏覽器......你知道，就像 9 英寸，而不是 2 毫米 ;-)
理想情況下，我還希望能夠擁有負坐標并擁有所有“剛剛處理”的東西（例如：中心！最大化！thnx！）
我嘗試了 CSS 技術的組合。我“用谷歌搜索”的方法似乎都不起作用。
我覺得“點”是像素，因此“全屏”仍然意味著 10x10 像素。也許這是錯誤的解釋。
一個可能或可能無關緊要的旁白：我正在使用 Python svgwrite包，它有自己的一組縮放、翻譯、旋轉的方法......但這些似乎都不適合我。
uj5u.com熱心網友回復：
您必須添加一個 viewBox，否則您將無法對其進行縮放。
在 SVG 內容中包含一個 'svg' 元素會創建一個新的 SVG 視口，所有包含的圖形都將在其中繪制；這隱含地建立了一個新的視口坐標系和一個新的用戶坐標系。此外，其中的百分比單位有了新的含義，因為已經建立了新的 SVG 視口。
https://www.w3.org/TR/SVG2/coords.html#EstablishingANewSVGViewport
svg {
position: absolute;
width: 100%;
height: 100%;
}<svg baseProfile="full" version="1.1" viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xlink="http://www.w3.org/1999/xlink"><defs />
<polygon fill="blue" points="0,0 10,0 10,10 0,10" />
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/430528.html
上一篇：React組件中的SVG