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

Question

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

是否可以使用 Javascript 或有更好的方法来做到这一点？ HTML画布？ 谢谢！

Answer 1

当您采用涉及 SVG 的替代方法时，这里有一个。 不幸的是，我不会说它比使用画布更容易。

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

如果我们看一下您所追求的形状：

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

和一个正确的梯形

使用绘图命令构建它们是相当简单的 - 只是将它们并排放置并不能完成这项工作。

这里的技巧是使四分之一圆具有固定大小 - 例如 80 x 80 像素 - 并且根本不给梯形一个大小。 相反，我们需要使用形状的 URL 填充普通<div>元素的 CSS background-image属性。 这也可以在线完成。 要使其拉伸到浏览器窗口，我们需要使其宽度为剩余空间的 100% - 这可以通过将元素的overflow属性设置为hidden 。 现在只需使背景的高度等于四分之一圆的高度并将background-repeat属性设置为no-repeat 。

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

下面是一个例子：

 .svgB { overflow: hidden; background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 5 5' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><polygon points='0,0 5,0 5,2.5 0,5' style='fill:grey;'/></svg>"); background-repeat: no-repeat; background-size: 100% 80px; } .svgB>* { color: white; padding-left: 5px; } .svgA { float: left; width: 80px; height: 80px; }

 <div class="svgA"> <svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg"> <path fill="black" d="M5,5 a5,5 0 0,1 -5,-5 L5,0" /> </svg> </div> <div class="svgB" style="height:80px;"> <p>Here's some text</p> </div>