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

问题是：您将网址分配给特定元素，但是当您查看控制台时，您会看到当您悬停某个区域时将删除这些元素，并且会创建一个新图例。

可能的解决方案：

使用全局样式覆盖填充属性：

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）

基本网址和谷歌geochart

1 个答案: