Question

我有一个d3代码jsfiddle。 Upper text here在除FF外的所有浏览器中均可见。

这是完整的代码：

var data = [2000, 400]; 
var chart = d3.select("#container").append("svg") 
  .attr("class", "chart")
  .attr("width", 800) // bar has a fixed width
  .attr("height", 300)
    .style("padding-top", "20px")

var x = d3.scale.linear() 
  .domain([0, d3.max(data)])
  .range([10, 100]);

chart.selectAll("rect") 
  .data(data)
  .enter()
  .append("rect")
  .attr("y", 18)
  .attr("x", 10)
  .attr("width", function(d){
  return x(d) - 10
  })
  .attr("height", 10)


var text = [0];
var data = ['Upper text here']

chart.selectAll("text") 
  .data(text)
  .enter()
  .append("text")
  .attr("x",x)
  .attr("dy", ".25em") 
  .append('tspan')
  .text('Upper text here')
  .attr('x', x)
  .attr("y", function(_, i) {
    return i === 1 ? 42 : -9;
  })
  .attr('dy', '.35em')

不确定，这是什么错误。

Answer 1

在SVG 1.1中，<svg>元素上的溢出属性默认为隐藏。
在SVG 2中，建议将其默认设置为可见。

Chrome似乎已实施了此拟议的SVG 2更改，但Firefox可能不会。

您确实应该在SVG画布内绘制，而不要依赖可见的溢出，因为它具有很大的性能影响，因为浏览器无法再假定最大SVG画布边界是外部SVG元素的高度和宽度。

如果您确实必须画出界限，那么只需显式设置溢出即可获得一致的跨浏览器行为，例如

var chart = d3.select("#container").append("svg") 
  .attr("class", "chart")
  .attr("width", 800) // bar has a fixed width
  .attr("height", 300)
  .attr("overflow", "visible")
    .style("padding-top", "20px")

tspan始终隐藏在FF上

1 个答案: