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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我已删除了旋转变换，因此您可以看到它是正确的。

SVG奇怪的填充

1 个答案: