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

Question

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

是否可以使用 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>