时间戳

首页 > 解决方案 > 如何以编程方式在 svg 路径中​​构建曲线？

javascript - 如何以编程方式在 svg 路径中​​构建曲线？

问题描述

我正在尝试使用 SVG 构建折线图，但我很难让路径具有漂亮的曲线。正如互联网告诉我的那样，实现这一目标的最佳方法是使用Qand T，但我并没有真正得到预期的结果。

这是我构建的两个版本，第一个没有曲线，但第二个由于某种原因溢出了 svg 容器。

*, *:after, *:before {
  box-sizing: border-box;
  position: relative;
  
  font-family: 'Montserrat', sans-serif;
}

svg {
  width: 30vmin; height: 30vmin;
  fill: none;
  position: relative;
  z-index: 3;
  
  border: 2px solid red;
}

path {
  stroke-width: 3px;
  
  // stroke-dasharray: 4;
}

button {
  left: 0; top: 0;
  position: absolute;
}

html, body {
  overflow: hidden;
  width: 100%; height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: space-around;
  
  margin: 0; padding: 0;
  
  background-color: #333ddd;
}
<svg viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,16.372727272727275 Q7.6923076923076925,29.09090909090908 15.384615384615385,29.09090909090908 23.076923076923077,2.7363636363636346 30.76923076923077,42.73636363636363 38.46153846153846,69.0909090909091 46.15384615384615,56.37272727272727 53.84615384615385,56.37272727272727 61.53846153846154,82.73636363636363 69.23076923076923,95.45454545454545 76.92307692307692,82.73636363636363 84.61538461538461,82.73636363636363 92.3076923076923,42.73636363636363 T100,42.73636363636363" fill="none" stroke="white" vector-effect="non-scaling-stroke"></path></svg>

<svg viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,16.372727272727275 Q 7.6923076923076925,29.09090909090908 15.384615384615385,29.09090909090908 T 23.076923076923077,2.7363636363636346 30.76923076923077,42.73636363636363 38.46153846153846,69.0909090909091 46.15384615384615,56.37272727272727 53.84615384615385,56.37272727272727 61.53846153846154,82.73636363636363 69.23076923076923,95.45454545454545 76.92307692307692,82.73636363636363 84.61538461538461,82.73636363636363 92.3076923076923,42.73636363636363 100,42.73636363636363" fill="none" stroke="white" vector-effect="non-scaling-stroke"></path></svg>

<svg viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,16.372727272727275 7.6923076923076925,29.09090909090908 15.384615384615385,29.09090909090908 23.076923076923077,2.7363636363636346 30.76923076923077,42.73636363636363 38.46153846153846,69.0909090909091 46.15384615384615,56.37272727272727 53.84615384615385,56.37272727272727 61.53846153846154,82.73636363636363 69.23076923076923,95.45454545454545 76.92307692307692,82.73636363636363 84.61538461538461,82.73636363636363 92.3076923076923,42.73636363636363 100,42.73636363636363" fill="none" stroke="white" vector-effect="non-scaling-stroke"></path></svg>

任何想法我做错了什么或如何更好地解决这个问题？

标签： javascripthtmlcsssvg

解决方案

推荐阅读