我有一个从D3输出数据的应用程序。输出如下：
<div class="horizontalBarGraphContainer"><h4 class="crux-component-title">Greatest Rocker</h4><div class="ct HorizontalBarContainer"><div class="ct HorizontalBarGraph"><div style="width: 100%; height: 410px; position: relative;"><svg width="988" height="410"><g style="transform: translateY(0px);"><rect width="708" y="0" x="240" height="45" fill="#4dbf9d">Tiny Tim</rect><foreignObject fill="#000" width="205" x="0" y="0" class="crux-label-style foreignObject" text-anchor="start">Tiny Tim</foreignObject><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="948">26</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="948" dy="55" text-anchor="end"></text></g><g style="transform: translateY(80px);"><rect width="626.3076923076923" y="0" x="240" height="45" fill="#4dbf9d">Elvis</rect><foreignObject fill="#000" width="205" x="0" y="0" class="crux-label-style foreignObject" text-anchor="start">Elvis</foreignObject><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="866.3076923076923">23</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="866.3076923076923" dy="55" text-anchor="end"></text></g><g style="transform: translateY(160px);"><rect width="544.6153846153846" y="0" x="240" height="45" fill="#4dbf9d">Ted Nugent</rect><foreignObject fill="#000" width="205" x="0" y="0" class="crux-label-style foreignObject" text-anchor="start">Ted Nugent</foreignObject><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="784.6153846153846">20</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="784.6153846153846" dy="55" text-anchor="end"></text></g><g style="transform: translateY(240px);"><rect width="544.6153846153846" y="0" x="240" height="45" fill="#4dbf9d">Iggy Pop</rect><foreignObject fill="#000" width="205" x="0" y="0" class="crux-label-style foreignObject" text-anchor="start">Iggy Pop</foreignObject><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="784.6153846153846">20</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="784.6153846153846" dy="55" text-anchor="end"></text></g><g style="transform: translateY(320px);"><rect width="381.2307692307692" y="0" x="240" height="45" fill="#4dbf9d">Jon Bon Jovi</rect><foreignObject fill="#000" width="205" x="0" y="0" class="crux-label-style foreignObject" text-anchor="start">Jon Bon Jovi</foreignObject><text class="ct count crux-numbers crux-numbers--medium" fill="#000" dy=".35em" dx="10" y="22.5" text-anchor="start" x="621.2307692307693">14</text><text class="ct user-answer crux-label-style crux-label-style--small" fill="#000" dx="621.2307692307693" dy="55" text-anchor="end"></text></g></svg></div></div></div></div>
在Chrome中，我看到了两个标题（在rect元素中）。但在Safari，Firefox，Edge和IE中我没有。有什么理由说这只适用于Chrome吗？
在此Codepen中展示和查看：https://codepen.io/serpicolugnut/pen/xWZwbb
答案 0 :(得分：3)
浏览器使用一些SVG 2实现SVG 1.1。不同的浏览器实现了SVG 2规范的不同部分。
SVG 2的无数变化之一是width and height parameters on foreignObject elements are now optional and can be set in CSS。 Chrome是第一个实现SVG 2这一部分的浏览器。
您的内容在foreignObject元素上缺少height属性，因此它目前仅在Chrome中呈现。