Question

我需要弄清楚如何以 SVG 格式获取此图表。我几乎明白了，但我需要完美匹配每一面。当它上升和下降时。

<div class='chart'>
  <svg viewbox='0 0 560 260'>
    <defs>
      <linearGradient id="MyGradient">
          <stop offset="0%" stop-color="#92B6E5" />
          <stop offset="10%" stop-color="#92D2E5" />
          <stop offset="50%" stop-color="#82E5DE" />
          <stop offset="90%" stop-color="#F7C783" />
          <stop offset="100%" stop-color="#B5ADA5" />
      </linearGradient>
      <filter id='dropshadow'>
        <feGaussianBlur in='SourceAlpha' stdDeviation='3'></feGaussianBlur>
        <feOffset dx='0' dy='0' result='offsetblur'></feOffset>
        <feComponentTransfer>
          <feFuncA slope='0.2' type='linear'></feFuncA>
        </feComponentTransfer>
        <feMerge>
          <feMergeNode></feMergeNode>
          <feMergeNode in='SourceGraphic'></feMergeNode>
        </feMerge>
      </filter>
    </defs>
    <g class='datasets'>
      <path class='dataset' d='M 0 260 C 1 264 60 241 82 228 C 125 205 115 211 158 184 C 202 160 185 170 213 155 C 261 136 287 138 317 151 C 361 175 347 165 424 212 C 484 243 505 242 554 260 L 0 260 Z' id='dataset-1'></path>
    </g>
  </svg>
</div>

我只需要正确修改这部分：

<path class='dataset' d='M 0 260 C 1 264 60 241 82 228 C 125 205 115 211 158 184 C 202 160 185 170 213 155 C 261 136 287 138 317 151 C 361 175 347 165 424 212 C 484 243 505 242 554 260 L 0 260 Z' id='dataset-1'></path>

Answer 1

Chris W. 100% 正确，在 SVG 中处理复杂形状时，使用矢量编辑器（如 Adobe Illustrator、Inkscape 或 Affinity Designer）将使您的生活更加轻松。然而，对于像这样的简单形状，理解 SVG 曲线的内部工作原理并没有什么坏处。它不仅可以帮助您制作出数学上完美的形状，而且您的代码（通常）也会比编辑器生成的小得多。

我在此处展示的示例只是实现此形状的众多方法中的一种。我将简要解释该过程和一系列命令，但我还包含了您的形状的第二个副本，其中包含注释和其他形状以突出显示控制点正在执行的操作（这有助于我可视化 SVG 代码）。

首先它移动到 x0, y 100 处的一个点，并绘制一条相对三次曲线 (c)，其第一个控制点距起点 100 像素，没有垂直变化，第二个控制点距起点 180 像素和 90 像素起点。下面的 s 曲线假设它将反映在它之前的 c 曲线的前一个控制点，因此它只需要指定它的第二个控制点和终点，这两个点都相对于 c 曲线的终点指定并镜像前一个控制点c 曲线的点。其余部分是到 SVG 底部的绝对垂直线 (V)，到左下角 (H) 的绝对水平线和关闭路径的 Z。 SVG 很棒，希望对您有所帮助。

svg {overflow: visible;}

<p>The shape</p>
<div class='chart'>
  <svg viewbox='0 0 560 110'>
    <path d="
      M0 100
      c100 0, 180 -90, 280 -90
            s180 90, 280 90
            V110
            H0
      Z
    " style="fill: #ccc"/>
  </svg>
</div>
<p>With visual control points and comments</p>
<div class='chart'>
  <svg viewbox='0 0 560 110'>
    <path d="
      M0 100
      c100 0, 180 -90, 280 -90
            s180 90, 280 90
            V110
            H0
      Z
    " style="fill: #ccc"/>
        
        <!-- M0 100 -->
        <circle cx="0" cy="100" fill="green" r="2" />
        
        <!-- c100 0 -->
        <circle cx="100" cy="100" fill="red" r="2" />
        <line x1="0" y1="100" x2="100" y2="100" stroke="red" />
        
        <!-- 180 -90, 280 -90 -->
        <circle cx="180" cy="10" fill="red" r="2" />
        <line x1="180" y1="10" x2="280" y2="10" stroke="red" />
        <circle cx="280" cy="10" fill="red" r="2" />
        
        <!-- Assumed to be a reflection of the previous control point by the following s curve -->
        <line x1="280" y1="10" x2="380" y2="10" stroke="blue" />
        <circle cx="380" cy="10" fill="blue" r="2" />
        
        <!-- s180 90 the second control point of the s curve (the only one you specify)-->
        <line x1="460" y1="100" x2="560" y2="100" stroke="red" />
        <circle cx="460" cy="100" fill="red" r="2" />
        
        <!-- 280 90 this is the end point of the s curve -->
        <circle cx="560" cy="100" fill="purple" r="2" />
        
  </svg>
</div>

绘制 SVG 密度图

1 个答案: