SVG 奇怪的填充

Question

我正在学习 svg，我正在尝试向我的页面添加一个 svg 形状，但我得到了一个有线填充 如何使 svg 路径采用 svg 元素的完整宽度和高度。

这里是代码：https://jsfiddle.net/Marshall7/z14z76h2/

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M60.3,40.2c-0.4-5.8-1-11.1-2-15.9c-0.4-2.1-0.9-4.1-1.4-6c-0.1-0.5-0.3-0.9-0.4-1.3c-2-6.5-4.3-10.4-6.9-11.6   c-2.8,1.3-5.1,5.6-7.2,12.9c-0.9,3.1-1.6,6.5-2.2,10.1c-1,6.4-1.5,13.5-1.6,21.3v2.2c0,7.9,0.6,15,1.6,21.4c0.6,3.5,1.3,6.9,2.2,10   c2.1,7.4,4.5,11.1,7.2,11.1c2.6,0,4.9-3.2,6.9-9.7c0.1-0.5,0.3-1,0.4-1.4c0.1-0.4,0.2-0.8,0.3-1.1c0.4-1.5,0.8-3.1,1.1-4.7   c0.6-3.1,1.1-6.3,1.5-9.8c0.5-4.8,0.8-10,0.9-15.5v-2.6C60.6,46.3,60.5,43.1,60.3,40.2z M49.7,91.8l0-40.2l-3.7,1.8l3.7-45.7   l0,40.2l3.7-1.8L49.7,91.8z"></path></g></svg>

CSS：

body{
    background: #fff;
}
svg{
    background: #777;
    height: 200px;
    transform: rotate(90deg);
    fill : red;
}

我不希望灰色区域的宽度保持自己。

Answer 1

如果您希望路径填充 SVG，那么您应该设置您的 viewBox 属性以匹配路径的边界框。是 viewBox 告诉浏览器如何缩放 SVG 的内容以填充 SVG 画布区域。

你的路径的边界框是：

x = 38.6
y = 5.4
w = 22.1
h = 89

因此，如果我们将这些值用于我们得到的边界框：

body{
  background: #fff;
}
svg{
  background: #777;
  height: 200px;
  fill : red;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="38.6 5.4 22.1 89" xml:space="preserve"><g><path d="M60.3,40.2c-0.4-5.8-1-11.1-2-15.9c-0.4-2.1-0.9-4.1-1.4-6c-0.1-0.5-0.3-0.9-0.4-1.3c-2-6.5-4.3-10.4-6.9-11.6   c-2.8,1.3-5.1,5.6-7.2,12.9c-0.9,3.1-1.6,6.5-2.2,10.1c-1,6.4-1.5,13.5-1.6,21.3v2.2c0,7.9,0.6,15,1.6,21.4c0.6,3.5,1.3,6.9,2.2,10   c2.1,7.4,4.5,11.1,7.2,11.1c2.6,0,4.9-3.2,6.9-9.7c0.1-0.5,0.3-1,0.4-1.4c0.1-0.4,0.2-0.8,0.3-1.1c0.4-1.5,0.8-3.1,1.1-4.7   c0.6-3.1,1.1-6.3,1.5-9.8c0.5-4.8,0.8-10,0.9-15.5v-2.6C60.6,46.3,60.5,43.1,60.3,40.2z M49.7,91.8l0-40.2l-3.7,1.8l3.7-45.7   l0,40.2l3.7-1.8L49.7,91.8z" id="foo"></path></g></svg>

我已经删除了旋转变换，所以你可以看到它是正确的。