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

Question

我正在寻找基于浏览器宽度动态更改svg形状的最佳方法。将宽度设置为100％会拉伸形状以适应浏览器的宽度，但也会缩放或扭曲形状...我要做什么：sketch

是否可以使用Javascript执行此操作，或者有更好的方法吗？ HTML画布？谢谢！

Answer 1

您正在寻求一种涉及SVG的替代方法时，这里就是一个。不幸的是，我不会说它比使用画布更容易。

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

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

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

和右梯形

使用绘图命令构造它们很简单-只是将它们并排将无法完成工作。

这里的诀窍是使四分之一圆成为固定大小-例如80 x 80像素-并且不不能给梯形一个尺寸。相反，我们需要使用形状的URL填充普通background-image元素的CSS <div>属性。这也可以在线完成。要使其延伸到浏览器窗口，我们需要使其宽度为剩余空间的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>