SVG 中的多行 <title> (Internet Explorer) |换行符、表格

Question

我想使用 <title> 标签向我的 SVG 路径添加多行工具提示。

它在 Chrome 中完美运行，但我尝试过的换行符在 Internet Explorer 中导致 space。

同样在 Internet Explorer 中，多行在 title="" 属性中起作用。

下面的代码片段在 svg 和按钮上具有相同的多行提示。在 IE 中成为运行。

<svg height="100" width="100">
    <path d="M45 0 L15 80 L75 80 Z">
        <title>test&#xA;test</title>
        <!--<title>test&#xA;test</title>-->
        <!--<title>test&#10;test</title>-->
        <!--<title>test&#13;test</title>-->
    </path>
</svg>
<div><button title="test&#xA;test">It works here</button><div>

Answer 1

在IE浏览器中，使用<br>标签在SVG元素中添加换行符；在 Microsoft Edge 和 Chrome 浏览器中使用 
 添加换行符。

代码如下：

<svg height="100" width="100">
    <path d="M45 0 L15 80 L75 80 Z">
        <title>test&#xA;<br>test</title>
        <!--<title>test&#xA;test</title>-->
        <!--<title>test&#10;test</title>-->
        <!--<title>test&#13;test</title>-->
    </path>
</svg>
<div><button title="test&#xA;test">It works here</button></div>

这样的输出：

IE浏览器：

Chrome 浏览器：

Answer 2

在 ReactJS 中，这对我有用：

<svg><title>text1+{'\n'}text2</title></svg>

SVG 中的多行 <title> (Internet Explorer) |换行符、表格

Multiline in SVG <title> (Internet Explorer) | Linebreak, tabulations

html

internet-explorer

svg

tooltip