Javascript 如何根据浏览器宽度更改SVG？

我正在寻找基于浏览器宽度动态更改svg形状的最佳方法。将宽度设置为100%会拉伸形状以跟随浏览器的宽度，但也会缩放或扭曲形状。。。我追求的是：

---

有没有可能用Javascript实现这一点，或者有更好的方法？HTML画布？谢谢

由于您正在寻找一种涉及SVG的替代方法，这里有一种。不幸的是，我不会说这比使用画布容易

无论如何，为了能够独立地拉伸形状的一部分，我们实际上需要将该形状一分为二。这样，左侧部分可以保持静止

如果我们看看你想要的形状：

我们可以很容易地看到有一个四分之一圆

和一个右梯形

使用绘图命令构建它们是相当简单的——简单地将它们并排放置并不能完成任务

这里的技巧是将四分之一圆设置为固定大小（例如80 x 80像素），并且根本不给梯形设置大小。相反，我们需要用指向形状的URL填充普通

元素的CSS

背景图像

属性。这也可以在线完成。要使其延伸到浏览器窗口，我们需要使其宽度为剩余空间的100%——这可以通过将元素的

overflow

属性设置为

hidden

来实现。现在只需使背景高度等于四分之一圆的高度，并将

背景重复

属性设置为

无重复

现在，浏览器将背景图像拉伸到静态四分之一圆旁边的剩余宽度和固定的80像素高度

下面是一个例子：

.svgB{
溢出：隐藏；
背景图像：url（“数据：image/svg+xml；utf8，”）；
背景重复：无重复；
背景尺寸：100%80px；
}
.svgB>*{
颜色：白色；
左侧填充：5px；
}
斯夫加先生{
浮动：左；
宽度：80px；
高度：80px；
}

这里有一些文字

您是说您永远不希望svg的高度更新，只希望svg的右侧拉伸以填充屏幕？基本上是的。。。我所追求的效果是在inholland.nl网站导航栏的形状/背景上使用的，该网站使用HTML画布来实现该效果，但我想知道是否有更简单的方法…感谢您的回复。是的，我的下一个想法是尝试这样的东西，把形状切成两部分。但我想我的问题写得很差。。。在考虑了更多之后，我搜索了“通过javascript控制svg d属性”，结果更像我所想的…（请参阅：）我只是更熟悉svg，所以向那个方向倾斜…有什么想法认为ti的方法可能比HTML5画布“更好”svg？由于这是针对导航条的，因此需要有内部（或下方）的元素（如inHolland示例…）