☰

SVG 文本溢出，以省略号呈现

tag-icon • tag-icon svg overflow
SVG 文本溢出，以省略号呈现

这是我在 draw.io 中绘制的 SVG。

https://drive.google.com/file/d/1hVWrAL8CysF9wlDvZa3D3XfXwNy4Y3iV/view?usp=sharing

我使用 MWEinkscapelatex=false来保存字体：

\documentclass{report}
\usepackage{svg}

\begin{document}

\begin{figure}
    \centering
    \includesvg[scale=0.85,inkscapelatex=false]
        {./parser_sequence.svg}
\end{figure}

\end{document}

输出：

溢出文本

如何才能使文本完整呈现而不出现省略号？

答案1

原始 SVG 包含以下几行：

<switch>
<foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
   <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 696px; margin-left: 468px;">
      <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
         <div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; background-color: #ffffff; white-space: nowrap; ">
         InputStream as Text
         </div>
      </div>
   </div>
</foreignObject>
<text x="468" y="696" fill="#000000" font-family="Helvetica" font-size="13px" text-anchor="middle">
InputStream a...
</text>
</switch>

该svg包（以及包用于进行转换的 Inkscape 本身）不使用标签foreignObject，而是使用text其下方带有省略号的对象。包在终端日志中生成有关此问题的警告：

WARNING: unknown type: svg:foreignObject

请注意，某些编辑器不显示此日志，因此您可能会错过警告（它们不会打印在日志文件中，只会打印在终端中）。

要在 LaTeX 文档中显示完整字符串，您可以编辑 svg 的源代码。除了修改文本之外，x稍微更改一下坐标以更好地定位字符串也很有用。

修改后的代码：

<text x="480" y="696" fill="#000000" font-family="Helvetica" font-size="13px" text-anchor="middle">
InputStream as Text
</text>

生成的pdf：

在此处输入图片描述

请注意，使用相同的机制，SVG 会在输出中打印有关 SVG 支持的警告消息（如屏幕截图所示）。您也可以编辑它 - 或者修剪生成的 pdf，但编辑源代码似乎更容易。

来自 draw.io 本身的一些背景信息： https://drawio.freshdesk.com/support/solutions/articles/16000042487-why-text-in-exported-svg-images-may-not-display-correctly（重点是我的）

当您在 IE 或某些 SVG 编辑器中查看导出为 SVG 图像的图表时，文本可能无法正确显示。

diagrams.net 使用 SVG 中称为外来对象的东西来允许在形状上使用复杂的 HTML 标签。

如果您在 IE11 或更早版本中使用 diagrams.net，我们可以动态地解决这个问题。但是，在 IE 中查看 SVG 图像文件时，导出的 SVG 将不会显示所有标签，并且大多数 SVG 编辑器（例如 Inkscape 和 Illustrator）以及一些在线服务（如 Wordpress）。相反，如果您尝试在 WordPress 中查看 SVG 文件，您将看到错误 [查看器不支持]，或解析错误。

我们意识到了这个问题，并花了大量时间研究解决方案。然而，这个问题非常复杂，我们目前还没有解决办法。我们将继续调查。

同时，考虑将图表导出为 PDF 文件因为这也是一种矢量格式，或者在按照以下步骤将图表导出为 SVG 之前，禁用图表中所有标签的格式化文本和自动换行。

  1. 右键单击绘图画布的空白区域，然后从上下文菜单中选择“全选”。
  2. 在格式面板的文本选项卡中，取消选中格式化文本选项。
  3. 右键单击绘图画布的空白区域，然后选择“选择顶点”。
  4. 在格式面板的“文本”选项卡中，取消选中“自动换行”选项。

注意：禁用这些格式选项后，您仍然可以整体设置标签文本的样式。您无法对标签的各个部分应用不同的格式。

相关内容