edi*_*999 3 javascript css svg cross-browser d3.js
我有一个非常简单的代码,适用于Chrome,但不适用于Firefox:
JS
//Creating the svg element
svgContainer= d3.select("body")
.append("svg")
//fill it with blue and set it's width to 0
svgContainer
.style("background-color","blue")
.style("width",0);
//change the size again
svgContainer
.style("width",200)
HTML
<body>
</body>
在chrome中,矩形绘制,但不是在Firefox上.好像你不能再次改变样式元素的值.奇怪,不是吗？
这是一个JSFIDDLE http://jsfiddle.net/cUmXu/2/
编辑:实际上,您可以更改值,但如果您给宽度的第一个值为0,则不能更改.这虽然很奇怪.
第二次编辑:似乎在使用时
svgContainer
.style("width","200px")
有用.如果有人知道原因,请分享.
用你的代码
svgContainer
.style("width",200)
您创建了以下元素(Chrome):
<svg style="background-color: blue; width: 200px;"></svg>
在Firefox我们得到了
<svg style="background-color: blue; width: 0px;">
Chrome对Firefox的一些错误更加宽容.width可以有不同的单位,如%,em,pt,px ...所以你必须提供数字大于0的单位.但允许0没有单位,因为0em与0px相同.
长度是指距离测量值,在属性定义中表示.长度是一个维度.但是,对于零长度,单元标识符是可选的(即可以在语法上表示为'0').
所以,随着
svgContainer
.style("width", "200px")
我们也得到Firefox适当的宽度:
<svg style="background-color: blue; width: 200px;">
另请参见不带单位的CSS属性的后备