tspan всегда скрыт на FF

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")