SVG 그라데이션 버그 : 줌 후 그라디언트가 변경됨

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가 : 로버트의 답변을 사용하여, 나는 내가 원하는 결과를 얻을 수 있었다.

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

여기

How to create a <style> tag with Javascript

내가 사용하는 코드 : 내부의

를 들어 내가 여기 자바 스크립트를 사용하여 동적으로 스타일 요소를 만드는 방법을 배울 필요 - 루프 :

... 
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 속성은 고유해야합니다. 너는 그렇지 않다, 속성 라인 그라디언트가있는 여러 요소가있다.