javascript - 将Child追加到SVG定义以在Geocart API的标记中创建图像背景

Question

我正在尝试稍微调整一下谷歌图表 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);

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

Answer 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/