基本网址和谷歌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 ）