通過JavaScript添加SVG剪輯路徑屬性的問題

我目前正在嘗試在Google衡量圖表上獲得類似錐形漸變的內容。你可以看到我在那個小提琴上的嘗試：https://jsfiddle.net/fqt8pjuw/通過JavaScript添加SVG剪輯路徑屬性的問題

我在HTML畫布上添加了一個測量圖和圓錐形漸變。然後，我將一個路徑元素添加到SVG剪輯路徑中：

此路徑元素從量表中的紅色條獲取路徑。

最後，我創建image-Element並將所有元素添加到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>

來源

2016-09-28 svennergr

有在SVG SVG的命名空間（http://www.w3.org/2000/svg）沒有屬性。 SVG名稱空間中只有元素。

所以對於一般的屬性設置，你希望setAttribute除了xlink：href（SVG 1.1）和很少使用的xml：space屬性（也是SVG 1.1）。 SVG 2將取消這兩個例外，以便所有屬性都可以通過setAttribute進行設置。

來源

2016-09-28 21:22:02

謝謝羅伯特！只是爲了展示我想達到的目標：https://jsfiddle.net/fqt8pjuw/4/也許它會幫助某人。 – svennergr

通過JavaScript添加SVG剪輯路徑屬性的問題

回答

相關問題