主页 / 问题 / 1270158
Accepted
Sevastopol'
Asked:2022-04-14 21:14:17 +0000 UTC2022-04-14 21:14:17 +0000 UTC

如何在点击时绘制贝塞尔曲线？

  • 772

我有两个点 (A和B) 和连接它们的贝塞尔曲线。线条绘制动画在文档加载后立即开始。

svg path {
  fill: none;
  stroke: cornflowerblue;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: path 5s linear forwards;
}
@keyframes path {
  to {
    stroke-dashoffset: 0;
  }
}
<svg width="500" height="300" viewBox="15 15 150 50">

  <circle id="a" cx="26.5" cy="13.2" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  <circle id="b" cx="87.3" cy="23.8" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <text y="15" x="18" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">A</text>
  <text y="26" x="92" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">B</text>

  <path d="m 26.458333,13.229167 c 2.776366,16.871891 9.790064,18.199908 18.520833,13.229166 L 63.499999,13.229167 C 77.382834,4.1082137 88.663388,0.52362484 87.312499,23.8125 v 0"stroke="cornflowerblue" stroke-width="1" fill="none" id="mPath"></path>

</svg>

问题：如何在单击某个点时开始绘制一条线的动画A？有兴趣通过问题标签中指示的任何方式和技术详细描述此类实现和实现本身，这可以是 and CSS, and SMIL SVG, 以及使用 and JavaScript。

javascript

2 个回答

  1. 我们挂在带有id=a点击处理程序的元素上，然后我们寻找父元素svg并给它一个 class active，它开始动画（在 css 中path，我们svg用 class开始动画active）。

    document.getElementById('a').addEventListener('click', (e) =>
{
  e.target.closest('svg').classList.add('active');
});
    svg path {
  fill: none;
  stroke: cornflowerblue;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

svg.active path
{
  animation: path 5s linear forwards;
}

@keyframes path {
  to {
    stroke-dashoffset: 0;
  }
}
    <svg width="500" height="300" viewBox="15 15 150 50">

  <circle id="a" cx="26.5" cy="13.2" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  <circle id="b" cx="87.3" cy="23.8" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <text y="15" x="18" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">A</text>
  <text y="26" x="92" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">B</text>

  <path d="m 26.458333,13.229167 c 2.776366,16.871891 9.790064,18.199908 18.520833,13.229166 L 63.499999,13.229167 C 77.382834,4.1082137 88.663388,0.52362484 87.312499,23.8125 v 0"stroke="cornflowerblue" stroke-width="1" fill="none" id="mPath"></path>

</svg>

    • 7
  2. Best Answer

    纯 SVG SMIL

    线条绘制动画基于stroke-dashoffset从最大值减小到零的技术。因此，实现了线从零增长到全长的动画。

    • 计算最大行长，使用JS方法 getTotalLength()

    console.log(p1.getTotalLength());我们明白了~=91px

    • 接下来，您需要添加到 CSS 样式或直接添加到 SVG 路径
    stroke-dasharray="91" 
 stroke-dashoffset="91"
    • 接下来，我们编写将stroke-dashoffset减小为零的动画命令
    <animate attributeName="stroke-dashoffset" begin="a.click" dur="4s" to="0" fill="freeze" />

    , 在哪里 begin="a.click"是通过单击圆圈来启动动画的条件id="a"

    <svg width="500" height="300" viewBox="15 15 150 50">

  <circle id="a" cx="26.5" cy="13.2" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <circle id="b" cx="87.3" cy="23.8" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <text y="15" x="18" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">A</text>
  <text y="26" x="92" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">B</text>

  <path id="p1" stroke-dasharray="91" stroke-dashoffset="91" d="m 26.458333,13.229167 c 2.776366,16.871891 9.790064,18.199908 18.520833,13.229166 L 63.499999,13.229167 C 77.382834,4.1082137 88.663388,0.52362484 87.312499,23.8125 v 0" stroke="cornflowerblue" stroke-width="1" fill="none" id="mPath">
    <animate attributeName="stroke-dashoffset" begin="a.click" dur="4s" to="0" fill="freeze" /> 
  
  </path>

</svg> 
<script>
console.log(p1.getTotalLength());
</script>

    来回动画

    增加了values="91;0;0;91;91"，也就是从最大值-91到0和返回到0
    重复值\u200b\u200b在极端位置提供停顿

    <svg width="500" height="300" viewBox="15 15 150 50">

  <circle id="a" cx="26.5" cy="13.2" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <circle id="b" cx="87.3" cy="23.8" r="4" fill="cornflowerblue" cursor="pointer"></circle>
  
  <text y="15" x="18" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">A</text>
  <text y="26" x="92" fill="cornflowerblue" stroke="none" stroke-width="0.1" font-size="6px">B</text>

  <path id="p1" stroke-dasharray="91" stroke-dashoffset="91" d="m 26.458333,13.229167 c 2.776366,16.871891 9.790064,18.199908 18.520833,13.229166 L 63.499999,13.229167 C 77.382834,4.1082137 88.663388,0.52362484 87.312499,23.8125 v 0" stroke="cornflowerblue" stroke-width="1" fill="none" id="mPath">
    <animate attributeName="stroke-dashoffset" begin="a.click" dur="4s" values="91;0;0;91;91" fill="freeze" repeatCount="indefinite" restart="never"/> 
  </path>
</svg>

    • 4

相关问题