SVG 中無法解釋的額外垂直空間

Question

我在一個網站上使用內聯 SVG，但我遇到了一些問題，其中一些尺寸不同。 這是一個示例 CodePen （代碼也在下面）。 您可以看到第一個和第二個 SVG 具有完全相同的高度設置並且寬度是自動的，所以我希望它們填充框的高度並調整它們的寬度以匹配。 但是，如果您檢查內部<path>元素與包含<svg>元素的比較，您會發現 SVG 在它們周圍有某種填充，這就是大小不同的原因。

什么是額外的填充，我怎樣才能擺脫它？

 div { height: 50px; width: 50px; border: 1px red solid; } svg { height: 100%; width: auto; }

 <div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM8 9h8v10H8V9zm7.5-5l-1-1h-5l-1 1H5v2h14V4h-3.5z"></path> </svg> </div> <div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M16 1H4c-1.1 0-2.9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2.9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path> </svg> </div>

Answer 1

這通常是 svg 的工作原理。 你可以把 svg 想象成 canvas 和容器元素<div>是它的框架。 <path>就像在 canvas 上繪制一樣，繪制方式由名為d的屬性指定，例如， M6 19在 6px（水平）和 19px（垂直）處移動到 position。

svg 路徑

手動調整path以適應 svg(canvas) 非常困難。 我建議通過 illustator 之類的矢量圖形工具或通過調整 svg 元素的viewBox來調整它（就像在畫布上移動/調整所有繪圖的大小）

Answer 2

SVG元件是一種canvas，所有內部元件都絕對定位。 您的 viewbox 屬性定義了 svg 內坐標系的大小。

因此，您的路徑絕對位於視圖框坐標系中。 如果您希望路徑填充整個視圖框，則需要修改路徑本身的坐標。

如果你用一個矩形來簡化這個例子，它將是：

// fill the entire viewbox
<svg viewbox="0 0 24 24">
  <rect x="0" y="0" width="24" height="24" />
</svg>

與您正在談論的“填充”相比：

// give 2px around the rectangle
<svg viewbox="0 0 24 24">
  <rect x="2" y="2" width="22" height="22" />
</svg>

對於像這樣的復雜路徑，在草圖或插畫家等應用程序中更容易操作它們。

我希望我的示例可以幫助您解決問題。