将路径宽度更改为 svg 容器的 100%答案

【问题标题】：change path width to 100% of svg container将路径宽度更改为 svg 容器的 100%
【发布时间】：2020-10-22 21:11:55
【问题描述】：

我有一个 svg 背景图像，但路径不是 svg 宽度的 100%。我也尝试过更改 preserveaspectratio，但没有奏效。

<svg x="0" y="0" viewBox="0 0 2227 1601" >
<path  d="M2166.88,40.32V1441.8l-323.83-195.25a347.4,347.4,0,0,0-352.44-3.72l-5.15,3-397.67,228.46a347.4,347.4,0,0,1-360.61-8.79L61,1038.23V40.32Z"/></svg>

【问题讨论】：

这能回答你的问题吗？ Make SVG path take full width and height of screen
你需要使用这个viewBox="viewBox="61 40 2105 1482"。为了知道使用什么值，您需要使用getBBox() 获取路径的边界框并使用这些值
@enxaneta 它移到了左上角，但宽度仍然不是 100%
@SimoneRossaini 在我的情况下不起作用

标签： html css svg

【解决方案1】：

正如我所说，您需要更改 viewBox 属性的值。在下一个示例中，svg 元素具有溢出：可见，因此您可以看到没有溢出。

let bb = thePath.getBBox();

theSVG.setAttributeNS(null,"viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`)

svg{border:solid; width:200px; overflow:visible}

<svg id="theSVG" x="0" y="0" viewBox="0 0 2227 1601" >
<path id="thePath"  d="M2166.88,40.32V1441.8l-323.83-195.25a347.4,347.4,0,0,0-352.44-3.72l-5.15,3-397.67,228.46a347.4,347.4,0,0,1-360.61-8.79L61,1038.23V40.32Z"/>
</svg>

如果您需要在路径周围添加某种空白，您可以这样做：

theSVG.setAttributeNS(null,"viewBox", `${bb.x - padding} ${bb.y - padding} ${bb.width + 2* padding} ${bb.height + 2 * padding}`)

let bb = thePath.getBBox();
let padding = 30;

theSVG.setAttributeNS(null,"viewBox", `${bb.x - padding} ${bb.y - padding} ${bb.width + 2* padding} ${bb.height + 2 * padding}`)

svg{border:solid; width:200px; overflow:visible}

<svg id="theSVG" x="0" y="0" viewBox="0 0 2227 1601" >
<path id="thePath"  d="M2166.88,40.32V1441.8l-323.83-195.25a347.4,347.4,0,0,0-352.44-3.72l-5.15,3-397.67,228.46a347.4,347.4,0,0,1-360.61-8.79L61,1038.23V40.32Z"/>
</svg>

【讨论】：