我正在使用路径制作svg,但在获取路径以填充svg自身空间时遇到问题。
这是一个例子
https://jsfiddle.net/k44y4b9L/2/
如您所见,svg为viewBox
设置为与svg中最后一个点相同的宽度,两者均为1366
在我看来,这意味着路径应占据svg的整个宽度,但事实并非如此。
在我的实际站点中,给svg窗口的宽度
<svg height="119" width="1366">
<path...
有人可以解释为什么svg路径未填充所提供的空间吗?如何使它这样做?
注意,svg是屏幕的整个宽度,只是路径不足。
我通过以下脚本制作了svg,但我认为问题不在脚本中,因为路径中的最后一个值等于svg的总宽度
for(let i = 0; i< points.length; i++) {
track = track + (points[i].distance / totalDistance) * layout.width + ' ' +
((maxHeight - points[i].height) / rangeHeight ) * svgHeight + ' L ';
}
return {
track: track = track + layout.width + ' ' + rangeHeight + ' L 0 ' + rangeHeight
}
});
最佳答案
我怀疑脚本是问题所在。绘图中的最后一个数据点位于
L 1314.6117266886256 77.66199637121403
在图表向下移动到屏幕之前
L 1366 1535.7468222475618
然后返回
L 0, 1535.7468222475618
因此填充将起作用。当前,绘图中的垂线被视口剪裁,因此它看起来像是垂直的,好像图形在x = 1314处截断了,而并没有并继续到x = 1366。可以通过将视口高度更改为数千并删除
height
标记上的svg
属性来证明这一点。为什么脚本未在1366处绘制数据点尚不清楚-我希望
points[points.length-1].distance
表示的距离与totalDistance
相同。也许一些明智的日志记录可以解决问题。请注意,在完成路径数据时,可以使用
rangeHeight
替换未缩放的svgHeight
值(与svg尺寸无关),例如:return {
track: track = track + layout.width + ' ' + svgHeight + ' L 0 ' + svgHeight
}