通过 JavaScript 添加 SVG 剪辑路径属性的问题

Question

我目前正在尝试在 Google 仪表图上获得类似圆锥形渐变的东西。你可以看到我的尝试 fiddle: https://jsfiddle.net/fqt8pjuw/

我要在 HTML canvas 处添加仪表图表和圆锥形渐变。然后我将路径元素添加到 SVG-clipPath:

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

最后我创建了图像元素并将所有元素添加到 svg 中的特定元素。

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

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

google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Test1', 80],
          ['Test2', 80],
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 0, redTo: 100,
          minorTicks: 5
        };

        chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);


        canvas = document.createElement('canvas'),
            d = canvas.width = canvas.height = 200,
            ctx = canvas.getContext('2d');

        //document.body.appendChild(canvas);

        ctx.translate(d/2, d/2);
        ctx.rotate(-Math.PI/2-Math.PI/8-Math.PI/16);
        ctx.scale(-1,1);
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';

        for(var i=0; i<=360; i++) {
            ctx.save();

            ctx.rotate(Math.PI * i/180);
            ctx.translate(-ctx.lineWidth/2, ctx.lineWidth/2);

            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.strokeStyle = 'hsl(' + i + ',100%,50%)';

            ctx.lineTo(0, d);
            ctx.stroke();
            ctx.closePath();

            ctx.restore();
        }

        svgEl=chart.ga.getElementsByTagName("svg");
        pathEl=svgEl[0].getElementsByTagName("path")[0];
        clipPath=pathEl.getAttribute("d");

        xmlns = "http://www.w3.org/2000/svg";

        cp=document.createElementNS(xmlns,"clipPath");
        cp.setAttribute("id", "cp1");
        cp.setAttributeNS(xmlns, "clipPathUnits","userSpaceOnUse");

        p=document.createElementNS(xmlns, "path");
        p.setAttributeNS(xmlns, "d", clipPath);
        //p.setAttribute("transform","translate(40,40)");
        //p.setAttribute("style", "opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1");

        cp.appendChild(p);

        img=document.createElementNS(xmlns, "image");
        img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', canvas.toDataURL()+" ");
        img.setAttributeNS(xmlns, "clip-path","url(#cp1)");
        img.setAttribute("width", 200);
        img.setAttribute("height",200);
        img.setAttribute("x", 0);
        img.setAttribute("y",0);
        img.setAttribute("transform","translate(-40,-40)");

        svgEl[0].getElementsByTagName("defs")[0].appendChild(cp);


        svgEl[0].childNodes[1].insertBefore(img, svgEl[0].childNodes[1].childNodes[3]);
      }

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 400px; height: 120px;"></div>

Answer 1

SVG 中的 SVG 命名空间 (http://www.w3.org/2000/svg) 中没有属性。只有元素在 SVG 命名空间中。

因此，对于一般的属性设置，除了 xlink:href (SVG 1.1) 和很少使用的 xml:space 属性（也是 SVG 1.1）之外，您需要 setAttribute。 SVG 2 将消除这两个异常，以便能够使用 setAttribute 设置所有属性。

通过 JavaScript 添加 SVG 剪辑路径属性的问题

Problems with adding SVG clip-path attribute via JavaScript

javascript

svg

clip-path