0

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

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

4

1 回答 1

3

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/

于 2012-09-27T06:47:34.880 回答