通过JavaScript添加SVG clip-path属性的问题
Problems with adding SVG clip-path attribute via JavaScript
我目前正在尝试在Google Gauge图表上获得圆锥形梯度。你可以看到我的尝试:https://jsfiddle.net/fqt8pjuw/
我在HTML画布上添加了一个量规图和一个锥形渐变。然后我添加一个路径元素到SVG-clipPath:
path-elements从仪表图中的红色条中获取路径。
最后,我创建了image-Element,并将所有元素添加到svg中的特定元素。
但遗憾的是,clip-path似乎不能正常工作。我没有像预期的那样得到路径,而是得到整个图像。
在某些函数上使用正确的命名空间可能会产生一些冲突。如果有人能帮我检查一下,我会很高兴的。
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>
SVG中的SVG名称空间(http://www.w3.org/2000/svg
)中没有属性。SVG名称空间中只有元素。
所以对于属性设置,除了xlink:href (SVG 1.1)和很少使用的xml:space属性(也是SVG 1.1)之外,一般都需要setAttribute。SVG 2将取消这两个异常,以便所有属性都可以使用setAttribute.
相关文章:
- JavaScript Pub/Sub属性访问问题
- 使用导航属性创建Kendo UI网格模型的问题
- 使用jQuery设置HTML5属性值时出现问题
- 将输入值设置为ng模型属性[Angular]时出现问题
- 我该如何解决这个问题?“未捕获的类型错误:无法读取 null 的属性'appendChild'”
- 奇怪的数据属性布尔问题
- HTML:密码字段中的HTML5占位符属性问题 - 显示正常文本
- 更改 img src 属性问题
- 访问Javascript对象属性问题
- 声明javascript对象属性问题
- 环回相关的模型属性问题
- 文本框只读属性问题与我的struts应用程序
- JavaScript中的搜索栏样式属性问题
- 框架"src"属性问题
- 类和属性问题
- Microsoft Edge上的SelectionStart属性问题
- Javascript压缩和对象属性问题
- CSS使用JavaScript在表中显示属性问题
- img属性问题re:IE-->赢得't显示图像的本机宽度,恢复为1px宽
- jQuery html属性问题