SVG中的多行标题（Internet Explorer）| 换行，制表符

Question

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

在Chrome中它可以完美地工作，但是我尝试的换行符在Internet Explorer中会产生空格。

而且在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>

- MorganFR

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浏览器：

- Zhi Lv

Answer 2

在ReactJS中，以下代码适用于我：

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

- Dev M