0

Google チャート 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 に答える