foreignObject內的背景圖像隱藏了Firefox上的其他svg元素

我在使用d3創建的可視化中添加橫幅時遇到了問題。我想添加橫幅，然後在橫幅上添加文本。這適用於Chrome（文本呈現在圖片的「頂部」），但在Firefox上，它看起來像是在文本頂部呈現圖片。有人知道爲什麼這可以在Chrome瀏覽器中運行，但不是Firefox，並且有什麼方法可以在Firefox中獲得相同的結果？foreignObject內的背景圖像隱藏了Firefox上的其他svg元素

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/

來源

2017-09-07 rramos

使用帶圖案填充的矩形顯示圖像。 –

@RobertLongson出於好奇，Chrome和Firefox之間的這種行爲差異的任何（已知）原因？ –

是的，聽起來像一個bug，是否知道？這意味着'foreignObject'內容總是處於頂部？啊也許https://bugzilla.mozilla.org/show_bug.cgi?id=984312 – Kaiido

這是Firefox的一個已知的bug：https://bugzilla.mozilla.org/show_bug.cgi?id=984312

在bug報告，一個給定的解決方法是設置你的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>

來源

2017-09-07 00:56:00 Kaiido

這工作！謝謝！ – rramos

foreignObject內的背景圖像隱藏了Firefox上的其他svg元素

回答

相關問題