仅使用 x,y 坐标的 SVG 线性路径动画

Question

当我们需要闭合路径或多边形时，此代码笔工作正常，我有一组 x 和 y 坐标，我想编写一个函数来根据 x 和 y 坐标创建完整路径。但是我们如何将 x,y 坐标转换为 svg 可以理解的坐标。

https://codepen.io/manabox/pen/MWQGxb

        <svg x="0px" y="0px" width="150px" height="145px" viewBox="0 0 148.9 140.8">
          <polygon points="65.7,0 0,64.4 34.9,69.8 30.9,140.8 67.1,138.2 67.1,96.6 87.2,95.2 91.2,140.8 127.4,132.8 
            120.7,75.1 148.9,69.8 116.7,40.2 122.1,4 99.3,1.3 99.3,22.8 "/>
        </svg>

CSS：

            svg polygon {
              fill: none;
              stroke: #09d;
              stroke-width: 3;
              stroke-dasharray: 1000;
              stroke-dashoffset: 1000;
              -webkit-animation: dash 5s linear forwards;
              animation: dash 5s linear forwards;
            }
            @-webkit-keyframes dash {
              to {
                stroke-dashoffset: 0;
              }
            }
            @keyframes dash {
              to {
                stroke-dashoffset: 0;
              }
            }

Answer 1

您可以轻松连接坐标以与

<polyline>

或

<path>

元素一起使用。

示例 1：从坐标数组绘制折线

let coords = [
  [0, 50],
  [20, 10],
  [40, 30],
  [60, 90],
  [80, 20],
  [100, 50]
];

polyline.setAttribute("points", coords.join(" "));
polyline.classList.add("animateLine");

range.addEventListener("change", function(e) {
  //remove animation to use dynamic dashoffset value
  polyline.classList.remove("animateLine");
  let val = +e.currentTarget.value;
  polyline.setAttribute("style", `stroke-dashoffset:${100 - val}`);
});

svg {
  border: 1px solid #ccc;
  display: block;
  width: 75vmin;
}

polyline {
  stroke: red;
  stroke-width: 1px;
  fill: none;
  stroke-linecap: square;
  transition: 0.3s;
}

.animateLine {
  animation: dash 1s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg id="svg" viewBox="0 0 100 100">
  <polyline id="polyline" pathLength="100" stroke-dasharray="100" stroke-dashoffset="100" />
</svg>
<p>Value: <input id="range" type="range" min="0" max="100" value="0" step="10"></p>

上面的示例通过简单的

coords.join(" ")

方法连接所有坐标。
为了简化破折号偏移动画，我们应用了

pathLength="100"

。
这样，100 的破折号值（因此用于中风破折号偏移量或中风破折号数组）始终对应于我们路径的总长度 - 无论它实际有多长。

示例2：将坐标转换为

<path>

d属性

let coords = [
  [0, 50],
  [20, 10],
  [40, 30],
  [60, 90],
  [80, 20],
  [100, 50]
];

path.setAttribute('d', 'M' + coords.join(' '));
adjustViewBox(svg);

path.classList.add('animateLine');

range.addEventListener('change', function(e) {
  //remove animation to use dynamic dash value
  path.classList.remove('animateLine');
  let val = +e.currentTarget.value;
  path.setAttribute('style', `stroke-dasharray:${val} 100`)
})

function adjustViewBox(svg) {
  let bb = svg.getBBox();
  let [x, y, width, height] = [bb.x, bb.y, bb.width, bb.height];
  svg.setAttribute("viewBox", [x, y, width, height].join(" "));
}

svg {
  border: 1px solid #ccc;
  display: block;
  width: 75vmin;
}

path {
  stroke: red;
  stroke-width: 1px;
  fill: none;
  stroke-linecap: square;
  stroke-dasharray: 0 100;
  transition: 0.3s;
}

.animateLine {
  animation: dash 1s linear forwards;
}

@keyframes dash {
  to {
    stroke-dasharray: 100 100;
  }
}

<svg id="svg" viewBox="0 0 100 100">
  <path id="path" pathLength="100" stroke-dasharray="100"  />
</svg>
<p>Value: <input id="range" type="range" min="0" max="100" value="0" step="10"></p>

path.setAttribute('d', 'M' + coords.join(' '));

我们需要在

d

属性字符串前面添加一个“M”（起点命令）。

上面的示例将中风破折号数组更改为：

stroke-dasharray=0 100" // 0 %

到

stroke-dasharray="100 100" // 100 %

不需要 dashoffset – 第一个 dasharray 值是当前进度；第二个是你的间隙大小（只需将其保留为 100 个单位）

如果您的坐标数组是高度动态的，您可能需要某种方法来将 svg

<viewBox>

调整为当前渲染的数据。