SVG梯形（多边形），点相对于其他点和渐变答案

【问题标题】：SVG trapezoid (polygon) with points relative to other points and gradientSVG梯形（多边形），点相对于其他点和渐变
【发布时间】：2016-08-13 10:00:16
【问题描述】：

在寻找制作这种形状的方法时，我已经用尽了很多选择，我开始认为这可能是不可能的。基本上我想要一个响应式的全宽梯形上面有渐变。我已经使用 SVG 完成了大部分工作，但是 Y 轴上收缩的点是相对于视图框而言的，因此当梯形垂直拉伸或水平收缩时，事情开始看起来很不稳定：

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>

  <style>
    * {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
    }
    body,
    html {
      /* background:red; */
    }
    .trap-container {
      position: relative;
      width: 100%;
    }
    .trap-container svg {
      position: absolute;
    }
    .trap-content {
      position: relative;
      color: black;
      padding: 40px 20px;
    }
  </style>

</head>

<body>

  <div class="trap-container">

    <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="yellow" stop-opacity="1" />
          <stop offset="100%" stop-color="orange" stop-opacity="1" />
        </linearGradient>
      </defs>
      <polygon points="0,10 100,0 100,100 0,90" fill="url(#grad1)">
      </polygon>
    </svg>

    <div class="trap-content">
      This DIV works fine with minimal content. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
    </div>

  </div>

  <br />
  <br />

  <div class="trap-container">

    <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="yellow" stop-opacity="1" />
          <stop offset="100%" stop-color="orange" stop-opacity="1" />
        </linearGradient>
      </defs>
      <polygon points="0,10 100,0 100,100 0,90" fill="url(#grad1)">
      </polygon>
    </svg>

    <div class="trap-content">
      But stretch it out and the trapezoid angles are off because they are relative. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here.
      Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing
      some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some
      content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content here. Testing some content
      here. Testing some content here.
    </div>

  </div>

</body>

</html>

有没有办法在 SVG 多边形中创建一个相对于另一个点定位的点？例如，使一个点的 y 位置比另一个点低 10 个像素。我相信我可以使用一些 javascript 来完成此任务，但如果没有它，我会很高兴找到解决方案。

【问题讨论】：

目前您可以做到这一点的唯一方法是观察调整大小事件并使用 Javascript 更新您的梯形。那是假设您找不到使用拉伸矩形并将三角形作为顶部和底部背景颜色的旧技巧。
好吧，我就是这么想的，可惜没有办法引用 svg 中的其他点。

标签： css svg polygon gradient responsive

【解决方案1】：

几个月前，我遇到了类似的问题，但有边距。
我用谷歌搜索了一下，发现了一个名为 calc 的 CSS 功能。
您可以通过以下方式学习：
w3schools、developer.mozilla.org、css-tricks.com

【讨论】：

如果 calc 不适合你（或者如果它让一切变得太复杂），那么 JS 是我唯一能想到的其他东西