appendChild 到 SVG defs 以在 Marker for Geochart API 中创建图像背景答案

【问题标题】：appendChild to SVG defs to create Image Background in Marker for Geochart APIappendChild 到 SVG defs 以在 Marker for Geochart API 中创建图像背景
【发布时间】：2012-09-26 21:56:12
【问题描述】：

我正在尝试稍微调整一下 google chart api，以便可以使用图像更改默认圆形标记。我正在考虑通过设置要使用的 svg 圆圈的图像模式来做到这一点。我应该很接近，但由于某种原因它似乎不起作用。

完整代码在这里：http://jsfiddle.net/PVkbM/1/

这是部分代码。

google.visualization.events.addListener(chart, 'ready', function () {


    var patt = document.createElement('pattern');
    patt.setAttribute('id', 'img1');
    patt.setAttribute('patternUnits', 'userSpaceOnUse');
    patt.setAttribute('width', '20');
    patt.setAttribute('height', '20');
    patt.setAttribute('x', '0');
    patt.setAttribute('y', '0');


    var image = document.createElement('image');
    image.setAttribute('xlink:href', 'https://www.google.com/images/srpr/logo3w.png');
    image.setAttribute('x', '0');
    image.setAttribute('y', '0');
    image.setAttribute('width', '24');
    image.setAttribute('height', '24');

    var defs = document.getElementsByTagName('defs')[0];

    patt.appendChild(image);
    defs.appendChild(patt);

    //This works
     //document.getElementsByTagName('circle')[0].setAttribute("fill", "#FFF");     

  document.getElementsByTagName('circle')[0].setAttribute("fill", "url(#img1)");

 });    

 chart.draw(data, options);

据我所知，代码在中添加了新的，但它不起作用。我错过了什么吗？

【问题讨论】：

标签： javascript svg google-visualization appendchild

【解决方案1】：

image.setAttribute('xlink:href', 'https://www.google.com/images/srpr/logo3w.png');

需要

image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://www.google.com/images/srpr/logo3w.png');

您还需要在 SVG 命名空间中创建元素，例如

var image = document.createElement('image');

应该是

var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');

还有图案。

http://jsfiddle.net/PVkbM/34/

【讨论】：