我正在尝试在Google ColumnChart中添加一些渐变效果，通过为绘制列的SVG矩形添加渐变实现。以下代码将在iframe svg>defs中添加渐变，并且在我目前关心的所有浏览器（Firefox，IE和Chrome的较新版本）中正确地替换rects的填充属性。
我的问题是每当我悬停或选择柱形图（或图例）时，颜色就会重置回原始颜色。我是一个SVG新手，我还没有弄清楚如何在哪里或通过什么方式重置颜色。
因此，我的问题是是否有人知道如何（使用javascript/jquery）停止、覆盖或以某种方式操纵重置颜色的代码？如果可能的话，我希望保留“交互”部分（工具提示等）。
我的问题是每当我悬停或选择柱形图（或图例）时，颜色就会重置回原始颜色。我是一个SVG新手，我还没有弄清楚如何在哪里或通过什么方式重置颜色。
因此，我的问题是是否有人知道如何（使用javascript/jquery）停止、覆盖或以某种方式操纵重置颜色的代码？如果可能的话，我希望保留“交互”部分（工具提示等）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
google.load("jquery", "1.7.1");
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
var rowData = [['Year', 'North', 'West', 'South'],
['2010', 197, 333, 298 ],
['2011', 167, 261, 381 ]];
var data = google.visualization.arrayToDataTable(rowData);
visualization = new google.visualization.ColumnChart(document.getElementById('visualization'));
google.visualization.events.addListener(visualization, 'ready', function(){
var svgns = "http://www.w3.org/2000/svg";
var gradients = [["red","#C0504D","#E6B8B7"],
["green","#9BBB59","#D8E4BC"],
["blue","#4F81BD","DCE6F1"]];
var svg_defs = $("#visualization iframe").contents().find('defs');
// add gradients to svg defs
for(var i = 0; i < gradients.length; i++){
var grad = $(document.createElementNS(svgns, "linearGradient")).
attr({id:gradients[i][0],x1:"0%",x2:"0%",y1:"0%",y2:"100%"});
var stopTop = $(document.createElementNS(svgns, "stop")).
attr({offset:"0%","stop-color":gradients[i][1]});
var stopBottom = $(document.createElementNS(svgns, "stop")).
attr({offset:"100%","stop-color":gradients[i][2]});
$(grad).append(stopTop).append(stopBottom);
svg_defs.append(grad);
}
// #3366cc, #dc3912, #ff9900 - replace default colors with gradients
$("#visualization iframe").contents().find('rect[fill="#3366cc"]').attr({'fill':'url(#blue)','stroke-width':0.4,'stroke':'#000000'});
$("#visualization iframe").contents().find('rect[fill="#dc3912"]').attr({'fill':'url(#blue)','stroke-width':0.4,'stroke':'#000000'});
$("#visualization iframe").contents().find('rect[fill="#ff9900"]').attr({'fill':'url(#blue)','stroke-width':0.4,'stroke':'#000000'});
});
// Create and draw the visualization.
visualization.draw(data,{width:600, height:400});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
更新
当我查看DOM以寻找可能存储这些颜色代码的位置（并在此找到使用它们的函数）时，我发现了以下内容（设置它们将实现我的目标）：
//fill
visualization.qa.l.e[0].Hm.O = "url(#blue)";
visualization.qa.l.e[1].Hm.O = "url(#red)";
visualization.qa.l.e[2].Hm.O = "url(#green)";
// stroke
visualization.qa.l.e[0].Hm.Jb = "#000000";
visualization.qa.l.e[1].Hm.Jb = "#000000";
visualization.qa.l.e[2].Hm.Jb = "#000000";
// fill-opacity
//visualization.qa.l.e[0].Hm.$b = 0.5;
//visualization.qa.l.e[1].Hm.$b = 0.5;
//visualization.qa.l.e[2].Hm.$b = 0.5;
// stroke-width
visualization.qa.l.e[0].Hm.H = 0.4;
visualization.qa.l.e[1].Hm.H = 0.4;
visualization.qa.l.e[2].Hm.H = 0.4;
// stroke-opacity
//visualization.qa.l.e[0].Hm.nc = 0.5;
//visualization.qa.l.e[1].Hm.nc = 0.5;
//visualization.qa.l.e[2].Hm.nc = 0.5;
但这只是一个临时解决方案，因为我相信下一次Google更新可视化代码时，这些变量名将会改变（我不认为有人是故意选择这些变量名的，压缩/混淆工具下一次可能会选择不同的变量名 - 但谁知道呢 - 也许不会）。
所以，如果有人知道一种更加永久的方法，不需要手动查找和设置变量名，我会很高兴。否则，这可能是我现在最好的选择。
更新2（2012年3月1日）
就拿这个例子来说。变量现在已经移动了：
//fill
visualization.da.C.d[0].en.S = "url(#blue)";
MutationObserver更改甘特图上的条形颜色。链接 - WhiteHat