Javascript 响应修改svg弧的最快方法？

我正在使用SVG创建大量广泛使用圆弧的矩形。当尝试使SVG具有响应性时，问题就出现了，因为当SVG位于viewBox中且缩放不好时，弧坐标将保持不变

目前，我提出了一个“概念证明”。调整父容器的大小后，SVG路径将被删除，然后重新绘制。我现在正在测试height属性，我已经将它设置为

vw

单元

---

正如您所看到的，它是有效的，但是在resize上删除和重新绘制SVG路径的想法似乎非常缓慢，特别是如果有更多的SVG路径的话。我认为修改现有的路径要有效得多，而不是从头开始不断地删除和重新绘制它们。我想知道是否可以将事件侦听器附加到每个弧坐标，并在调整容器大小时更改这些图形

我也愿意接受其他方法的建议，这些方法可以加快速度，如果重新绘制SVG是唯一可行的选择，那么在

中重新创建此实现可能更有意义？我希望最终将鼠标悬停事件附加到每个路径，所以我不确定在这方面使用canvas是否有优势

希望问题清楚，如果需要我进一步解释，请让我知道

代码如下

---

var doc=单据；
变量时间=[‘时间’、10、11、12、13、14、15、16]
函数getNode（n，v）{
n=document.createElements（“http://www.w3.org/2000/svg“，n）；
对于（v中的var p）
n、 setAttributeNS（null，p.replace（/[A-Z]/g，函数（m，p，o，s）{
返回“-”+m.toLowerCase（）；
})，v[p]）；
返回n
}
//创建时间列表
函数createList（）{
对于（var i=0；i（高度/16）*n；
var container=doc.getElementById（'标题'）
var calcY='6.25'
变量y；
如果（高度<高度）{
y=（calcY/rHeight）.toString（）
var fixHeight=（calcY-y）*2；
perc=（n）=>（（高度/16）*n）+固定高度）
}否则{
y=calcY
perc=（n）=>（（高度/16）*n））
}
var rectA=getNode（'path'{
d:'m0'+y+
‘a6.25’+y+‘0.01 6.25’+y+
‘h87.5’+
‘a6.25’+y+0.01 6.25’+y+
v'+perc（4.5）.toString（）+
‘a6.25’+y+‘0.01-6.25’+y+
‘h-43.75’+
‘a6.25’+y+‘0-6.25’+y+
v'+perc（1）.toString（）+
‘a6.25’+y+‘0.01-6.25’+y+
‘h-31.25’+
‘a6.25’+y+‘0.01-6.25’+y，
填充：“钢蓝”
})
var rectB=getNode（'path'{
d:'m0'+（高度-y）.toString（）+
‘a6.25’+y+‘06.25’+y+
‘h87.5’+
‘a6.25-’+y+‘06.25-’+y+
“v-”+perc（7.5）.toString（）+
“a-6.25-”+y+“0-6.25-”+y+
‘h-43.75’+
“a-6.25'+y+”0-6.25'+y+
v'+perc（1）.toString（）+
“a-6.25'+y+”0.01-6.25'+y+
‘h-31.25’+
'a6.25'+y+'0-6.25'+y，
填充：“深红色”
})
var rects=[rectA，rectB]
for（设i=0；i
#标题{
位置：相对位置；
宽度：200px；
高度：40vw；
利润率：15px 15px；
}
#标题#时代{
宽度：50%；
身高：100%；
浮动：左；
}
#标题#时报.信息{
宽度：100%；
高度：5.7vw；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#标题#svg{
宽度：50%；
身高：100%；
浮动：左；
}
#标题#svg.标题{
高度：25px；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

直肠
你可以通过使用百分比和遮罩来模仿你的画。这样，它将是“响应”和规模，以任何大小你想要的，而不改变你的路径在所有。。。
抚摸是可能的，但会非常棘手；-）


函数changeSize（）{
var w=数学.random（）*200+100
var h=Math.random（）*200+100
setAttribute（“宽度”，w）
setAttribute（“高度”，h）
}
更改大小

“在调整大小时删除并重新绘制SVG的想法看起来可能非常慢”可能是吗？你试过了吗？@Jordan在plunk中，在问题中显示了代码。有一个实现可以在resize上删除并重新绘制SVG路径。即使只有一个元素，对我来说似乎也很慢，而且我听说（除非我弄错了）应该避免不断地将东西移除和绘制到DOM上。虽然我很乐意接受我错了，如果是这样的话，我不是SVG专家，所以我相信你的话。让一个调整大小的事件监听器保存对每个
元素的引用并更新它们的
d
属性如何？为什么不扩展您的示例使其具有