foreignObject 中的背景图像隐藏了 Firefox 上的其他 svg 元素答案

【问题标题】：Background image inside foreignObject hides other svg elements on FirefoxforeignObject 中的背景图像隐藏了 Firefox 上的其他 svg 元素
【发布时间】：2017-09-07 00:03:58
【问题描述】：

我在使用 d3 创建的可视化效果中添加横幅时遇到问题。我想添加横幅，然后在横幅顶部添加文本。这适用于 Chrome（文本呈现在图像的“顶部”），但在 Firefox 上看起来图像正在呈现在文本的顶部。有人知道为什么这适用于 Chrome 而不是 Firefox，有没有一种方法可以在 Firefox 中实现相同的结果？

    var margin = {
    top: 155,
    right: 3,
    bottom: 3,
    left: 3
  },
  width = $(window).width() - margin.left - margin.right,
  height = $(window).height() - margin.top - margin.bottom,
  formatNumber = d3.format(",d"),
  transitioning;

var x = d3.scale.linear()
  .domain([0, width])
  .range([0, width]);

var y = d3.scale.linear()
  .domain([0, height])
  .range([0, height]);

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
  .style("shape-rendering", "crispEdges");

var grandparent = svg.append("g").attr("class", "grandparent");

grandparent.append("rect")
  .attr("y", -margin.top)
  .attr("width", width)
  .attr("height", margin.top);

grandparent.append("foreignObject")
.attr("y", -margin.top)
  .attr("width", width)
  .attr("height", margin.top)
  .append("xhtml:div")
  .attr("class", "bannerDiv");

grandparent.append("text")
  .attr("x", 6)
  .attr("y", (-1 / 8) * margin.top)
  .attr("dy", ".75em")
  .style("fill", "#A5D867")
  .text("The text here");

function text(text) {
  text.attr("x", function(d) {
      return x(d.x) + 6;
    })
    .attr("y", function(d) {
      return y(d.y) + 6;
    });
}

请参阅此 jsfiddle 以获取示例： https://jsfiddle.net/rmw6snj6/

【问题讨论】：

使用带有图案填充的矩形来显示图像。
@RobertLongson 出于好奇，Chrome 和 Firefox 之间行为差异的任何（已知）原因？
是的，听起来像一个错误，它是已知的吗？这意味着foreignObject 内容总是在顶部？啊也许bugzilla.mozilla.org/show_bug.cgi?id=984312

标签： javascript html css d3.js svg

【解决方案1】：

这是 Firefox 中的一个已知错误：https://bugzilla.mozilla.org/show_bug.cgi?id=984312

在错误报告中，一种解决方法是将foreignObject 的转换设置为translate(0,0)

input:checked + svg foreignObject {
  transform: translate(0, 0);
}
.bannerDiv {
  width: 100%;
  height: 100%;
  background-image: url('http://www.newdesignfile.com/postpic/2011/10/header-banner-design_64599.jpg');
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
}

body {
  background: #bbb;
}

<label>workaround</label><input type="checkbox" checked/>
<svg width="535" height="484">
  <g transform="translate(3,155)" style="shape-rendering: crispedges;">
    <g class="grandparent">
      <rect y="-155" width="529" height="155"></rect>
      <foreignObject y="-155" width="529" height="155">
        <div class="bannerDiv"></div>
      </foreignObject>
      <text x="6" y="-19.375" dy=".75em" style="fill: rgb(165, 216, 103);">The text here</text>
    </g>
  </g>
</svg>

【讨论】：