0

我正在尝试绘制此 SVG 路径。

SVG 路径

我可以使用固定坐标的固定高度和宽度的 SVG Line 和 Curve 属性来实现它。

但是，我需要响应式地绘制它，这意味着路径的宽度、线之间的空间、每个点之间的距离以及两侧的曲线应该是响应式的。

它包含由数字表示的级别，如图所示，路径的长度应由给定的级别数确定。

在尝试响应式绘制时，我被困在

  1. 获取线条的起点和终点
  2. 获取曲线的控制点
  3. 响应式调整每个点之间的距离和曲线之间的空间
  4. 根据给定的级别数确定路径的长度

我正在尝试div通过一些数学计算使用基于 parent 宽度的百分比来完成这些。但是，由于其复杂性，它似乎打破了某些或其他情况。

除了这些，还有其他一些事情要做，但这是需要做的顶级版本。

是否有任何直接的方法或公式或计算来实现这一目标？（或）有没有其他方法来绘制这个？（或）是否有学习绘制这些类型的 SVG 路径的教程？

4

1 回答 1

0

创建路径后，您需要计算路径上数字和圆圈的位置。为此，您需要知道使用 getTotalLength() 方法计算的路径长度。接下来，您需要一个循环来计算路径上数字的位置。为此，我使用了该getPointAtLength() 方法。在每一点上，您都创建了一个新的圆形（使用）元素和一个新的文本元素。

请阅读代码中的注释。

//constants used to create a new element in svg
const SVG_NS = "http://www.w3.org/2000/svg";
const SVG_XLINK = "http://www.w3.org/1999/xlink";
//the total length of the path
let length= thePath.getTotalLength();
//the number of points on the path
let n = 15;
let step = length/n;


for(let i= 1; i<=n; i++){
//creates a new point on the path at a given length
let point = thePath.getPointAtLength(i*step);
  
//create a new use element (or a circle) and set the center of the circle on the calculated point
let use = document.createElementNS(SVG_NS, 'use');
use.setAttributeNS(SVG_XLINK, 'xlink:href', '#gc');
use.setAttribute("x", point.x);
use.setAttribute("y", point.y); 
//create a new text element on the same point. Thr text content is the i number
let text = document.createElementNS(SVG_NS, 'text');
text.setAttribute("x", point.x);
text.setAttribute("y", point.y); 
text.textContent = i;
//append the 2 new created elements to the svg
svg.appendChild(use);
svg.appendChild(text);  
}
svg {
  border: solid;
}
text {
  fill: black;
  font-size: 4px;
  text-anchor: middle;
  dominant-baseline: middle;
}
<svg viewBox="0 0 100 80" id="svg">
  <defs>
  <g id="gc">
    <circle fill="silver" r="3" />
  </g>
  </defs>
  <path id="thePath" fill="none" stroke="black" d="M10,10H70A10,10 0 0 1 70,30H20A10,10 0 0 0 20,50H70A10,10 0 0 1 70,70H20" />
</svg>

请注意，由于 svg 元素有一个 viewBox 属性，并且没有它占用所有可用宽度使其响应。

于 2021-06-19T10:46:32.000 回答