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

Posted 2023-03-04

【中文标题】SVG <title> 中的多行 (Internet Explorer) |换行符，表格

【英文标题】：Multiline in SVG <title> (Internet Explorer) | Linebreak, tabulations

【发布时间】：2020-04-07 01:38:09

【问题描述】：

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

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

在 Internet Explorer 中，多行也适用于 title="" 属性。

以下代码 sn-p 在 svg 和按钮上具有相同的 muliline 工具提示。在 IE 中运行。

<svg  >
    <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>

【参考方案1】：

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

代码如下：

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

【参考方案2】：

在 ReactJS 中这对我有用：

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