Question

I am using   inside a <pre> tag (e.g. <pre>Foo 10</pre>) and this shows correctly in Safari (v12.0.3) as two lines but as Foo10 in Chrome 72.0.3626.109 (on Mac OS High Sierra) and Microsoft Edge 42.17134.1.0 (on Windows 10).

Mozilla Developer Guide says that   is "phrasing content" that is allowed in <pre>.

The original code is being generated by the R htmlWidgets and networkD3 packages and I've tracked the Javascript code that is generating the <pre> code to sankeyNetwork.js (generates Sankey diagrams).

I've taken the auto-generated html file and stripped out as much as possible to just highlight this issue. When you open this html file and hover of the left bar, you should see "Foo" and "10 ($)" on two lines. In Safari, this works but in Chrome and Edge, it does not. If you hover over the "Bar" bar (no pun intended), you will always see "Bar" and "10 ($)" on two lines because we just use a newline instead of   in the <pre> block.

Here's the html file:

<!DOCTYPE html>
<html style="width: 100%; height: 100%;">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div>

<svg viewBox="0,0,1134,633" style="width: 100%; height: 100%;">
<g transform="translate(20,20)">

<g class="node" transform="translate(0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<rect height="593" width="30" style="fill: rgb(31, 119, 180); stroke: rgb(15, 58, 88); opacity: 0.9; cursor: move;">
<title><foreignObject><body><pre>Foo<br>10 ($)</pre></body></foreignObject></title></rect>
<text x="36" y="296.5" dy=".35em" text-anchor="start" style="font-size: 10px; font-family: Arial;">Foo</text></g>

<g class="node" transform="translate(1064,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<rect height="593" width="30" style="fill: rgb(174, 199, 232); stroke: rgb(85, 98, 114); opacity: 0.9; cursor: move;">
<title><foreignObject><body><pre>Bar
10 ($)</pre></body></foreignObject></title></rect>
<text x="-6" y="296.5" dy=".35em" text-anchor="end" style="font-size: 10px; font-family: Arial;">Bar</text></g>

</g>
</svg>
</div>

</body>
</html>

The simple fix is to change sankeyNetwork.js and replace   with \n and I will raise this on the networkD3 GitHub page.

Any idea as to why Chrome and Edge are not rendering the   tag correctly?

Answer 1

我已转载了您的问题。经过测试，我发现问题可能是由于标签造成的。

这是我的测试代码。

    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" style="cursor: help;">
            <!--<pre>Foo<br>10 ($)</pre>-->
            <title>
                <pre>Foo<br>10 ($)</pre>
            </title>
        </circle>
    </svg>

您可以从屏幕快照中看到br的内部和外部显示不同。所以我认为也许是问题所在。

我已经检查了MDN文档https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title，但似乎没有任何解释。真奇怪。

<br/> <pre> works in Safari but not Chrome or Edge?

1 个答案: