基本網址和谷歌geochart

Question

我在我的網站上使用<base href="/"> 。 這是使用谷歌地理圖表的角度項目。 但我有傳說的漸變問題。 沒有顏色，它是空的。 我正在嘗試在回調上使用代碼：

    $(element).find('svg').each(function () {
        $(this).find("g").each(function () {
            if ($(this).attr('clip-path')) {
                if ($(this).attr('clip-path').indexOf('url(#') == -1) return;
                $(this).attr('clip-path', 'url(' + document.location + $(this).attr('clip-path').substring(4))
            }
        });
        $(this).find("rect").each(function () {
             if ($(this).attr('fill')) {
                 if ($(this).attr('fill').indexOf('url(#') == -1) return;
                 $(this).attr('fill', 'url(' + document.location + $(this).attr('fill').substring(4))
             }
        });
    });

這是工作，但當我在地圖上的某些東西上盤旋時，傳奇再次被打破。 我無法移除基本網址，因為它需要角度上的漂亮網址。 你可以在那里看到這個問題： http ： //jsfiddle.net/w5DYt/47/

有解決方案嗎

Answer 1

問題是：您將URL分配給特定元素，但是當您查看控制台時，您會看到當您懸停區域時將刪除這些元素，並且將創建新的圖例。

可能的方法：

使用全局樣式覆蓋fill-attributes：

function fixGoogleCharts(element){
    return function () {               
    var  rules=[],
         pre=element+' svg ';
      $('svg defs>*[id]',$(element)).each(function(){
        switch(this.tagName.toLowerCase()){
          case 'lineargradient':
            rules.push(pre + '[fill^="url(#"]{fill:url('+location.href+'#'+this.id+') !important;}');
              break;
          default:break;

        }
      });
      $('head').append('<style>'+rules.join('')+'</style>');

    }
}

小提琴： http ： //jsfiddle.net/w5DYt/57/

（注意：它只是設置全局css的快速而骯臟的方式，但對我而言，它適用於所有經過測試的瀏覽器...... Chrome，FF，Opera，IE，Safari ......以正確的方式看看insertRule ）