通过JavaScript添加SVG片段路径属性的问题

我目前正试图在谷歌仪表图上获得类似圆锥梯度的东西。 你可以在小提琴上看到我的尝试：

我在HTML画布上添加了一个量规图表和一个锥形渐变。 然后，我将向SVG clipPath添加一个path元素：

此路径元素从仪表图表中的红色条获取路径

最后，我创建image元素并将所有元素添加到svg中的specifiy元素

但遗憾的是，剪辑路径似乎无法正常工作。我没有得到预期的路径，但整个图像

在某些函数上使用正确的名称空间可能会有一些冲突。如果有人能检查一下，我会很高兴的

google.charts.load（'current'，{'packages'：['gauge']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Label'，'Value']，
[Test1'，80]，
[Test2'，80]，
]);
变量选项={
宽度：400，高度：120，
redFrom:0，redTo:100，
米诺蒂克斯：5
};
chart=新的google.visualization.Gauge（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
canvas=document.createElement（'canvas'），
d=canvas.width=canvas.height=200，
ctx=canvas.getContext（'2d'）；
//document.body.appendChild（画布）；
ctx.翻译（d/2，d/2）；
ctx.rotate（-Math.PI/2-Math.PI/8-Math.PI/16）；
ctx.刻度（-1,1）；
ctx.lineWidth=2；
ctx.lineCap='圆形'；
对于（var i=0；i，SVG名称空间中没有属性（
http://www.w3.org/2000/svg
）中。SVG命名空间中仅包含元素

因此，对于属性设置，除了xlink:href（SVG 1.1）和很少使用的xml:space属性（也是SVG 1.1）之外，通常需要setAttribute。SVG 2将消除这两个例外，以便所有属性都可以使用setAttribute进行设置。
SVG命名空间中没有属性（
http://www.w3.org/2000/svg
）中。SVG命名空间中仅包含元素

因此，对于属性设置，除了xlink:href（SVG 1.1）和很少使用的xml:space属性（也是SVG 1.1）之外，通常需要setAttribute.SVG 2将消除这两种例外情况，以便所有属性都可以使用setAttribute进行设置。
谢谢Robert！只是为了展示我想要实现的目标：也许它会帮助某人。谢谢Robert！只是为了展示我想要实现的目标：也许它会帮助某人。