Javascript SVG渐变错误:缩放后渐变会改变
我在一个页面上有几百个svg容器。每个容器都有一条粗线,每条线都应用了不同的渐变。(我已经用d3.js动态地完成了这项工作。) 但是当我放大图像时,所有的渐变都会变成第一个svg容器上的渐变 为什么会发生这种情况,更重要的是,我如何才能阻止这种情况发生 谢谢 编辑:以下是代码:Javascript SVG渐变错误:缩放后渐变会改变,javascript,svg,d3.js,Javascript,Svg,D3.js,我在一个页面上有几百个svg容器。每个容器都有一条粗线,每条线都应用了不同的渐变。(我已经用d3.js动态地完成了这项工作。) 但是当我放大图像时,所有的渐变都会变成第一个svg容器上的渐变 为什么会发生这种情况,更重要的是,我如何才能阻止这种情况发生 谢谢 编辑:以下是代码: <style id="css"> .line { fill: none; stroke: url(#li
<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>
页面上的所有id属性都必须是唯一的。您的不是,您有多个具有属性行渐变的元素。发布您的代码。(你的图片链接被破坏了)我知道这是个问题。你能建议一个解决方案吗?嗯,是的,让所有的ID都是唯一的。你是否期待一些不那么明显的东西?我不知道如何为每个渐变/线条创建一个样式元素。不过我想出来了。谢谢你的回答。它把我引向了正确的方向。
...
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)
...