我目前有一個僅顯示約 50% 的 svg 路徑。我怎樣才能讓它顯示100％？這是我的代碼：
<div className="svgPathContainer">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M82 88L0 0H123V170H0L82 88Z" fill="#F9B300" />
</svg>
</div>
我將 className="svgPath" 設定為：
.svgPathContainer{
width: 100%;
height: 100%;
}
這也是一個僅顯示 50% 的 svg 示例： https ://codesandbox.io/s/svg-scaling-fff1q?file=/src/App.js:93-357
問題：為什么 svg 路徑不能縮放到 .svgPathContainer 的 100%？
uj5u.com熱心網友回復：
viewBox就像畫布大小。因此，此視圖框之外的圖形將被剪裁。像css溢位：隱藏。您的繪圖的寬度為 123 像素，高度為 170 像素。因此，您必須將視圖框更改為該值。檢查我們的一些檔案。
如果要保持 100 x 100 像素的視圖框，則需要更改繪圖元素大小（路徑）。
視圖框與比例無關。這只是畫布大小。一個矩形剪輯，其中包含 SVG 元素的寬度、高度和偏移量 (xywh)。SVG 標簽的寬度和高度屬性用于縮放渲染影像。
<div className="svgPathContainer">
<svg width="100%" height="100%" viewbox="0 0 123 170" preserveAspectRatio="none">
<path d="M82 88L0 0H123V170H0L82 88Z" fill="#F9B300" />
</svg>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/411149.html
標籤：
上一篇：如何將漸變應用于顏色而不是純色值