SVG Gradient Bug：缩放后渐变会发生变化

Question

我在页面上有几百个svg容器。每个容器都有一条粗线，每条线都有一个不同的渐变。 （我已经用d3.js.动态完成了这个）

但是当我放大图像时，所有渐变都会变为第一个svg容器上的渐变。

为什么会发生这种情况，更重要的是如何阻止这种情况发生？

谢谢！

编辑：这是代码：

<style id="css">
.line {                         
    fill: none;                 
    stroke: url(#line-gradient);    
    stroke-width: 10px;          
}
</style>

<script>
var myData = <%= @myData %>


for (i = 0; i < myData.length; i++) { 

var margin = {top: 20, right: 20, bottom: 30, left: 50};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

//Make an SVG Container
var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 20);

//Set the gradient
svgContainer.append("linearGradient")                
       .attr("id", "line-gradient")            
       .attr("gradientUnits", "userSpaceOnUse")    
       .attr("x1", 0).attr("y1", 0)         
       .attr("x2", 200).attr("y2", 0)      
   .selectAll("stop")                      
       .data(myData[i])                  
   .enter().append("stop")         
       .attr("offset", function(d) { return d.offset; })   
       .attr("stop-color", function(d) { return d.color; })
       .attr("stop-opacity", function(d) { return d.opacity; });

//Draw the line
var circle = svgContainer.append("line")
                         .attr("class", "line")
                         .attr("x1", 5)
                         .attr("y1", 5)
                         .attr("x2", 200)
                         .attr("y2", 5)
                         .attr("stroke-width", 2)
                         .attr("stroke", "black");
}
</script>

Edit2：使用罗伯特的回答，我得到了我想要的结果。我需要学习如何使用javascript动态创建样式元素，我在这里找到：

http://www.phpied.com/dynamic-script-and-style-elements-in-ie/

在这里

How to create a <style> tag with Javascript

我使用的代码：

在for循环中：

...
var ss1 = document.createElement('style');
var def = '.line'+i+' {\
    fill: none;\
    stroke: url(#line-gradient'+i+');\
    stroke-width: 10px;\
}';
ss1.setAttribute("id", "css");
var hh1 = document.getElementsByTagName('header')[0];
hh1.appendChild(ss1);
var tt1 = document.createTextNode(def);
ss1.appendChild(tt1);
...
svgContainer.append("linearGradient")                
       .attr("id", "line-gradient" + i)
...
var circle = svgContainer.append("line")
                         .attr("class", "line"+i)
...

Answer 1

页面上的所有id属性必须是唯一的。你的不是，你有多个具有属性行渐变的元素。