如何在 Liferay 的网页内容中使用 svg 图标答案

【问题标题】：How to use svg icons in a web content of Liferay如何在 Liferay 的网页内容中使用 svg 图标
【发布时间】：2019-07-01 09:54:46
【问题描述】：

我使用 liferay 7.1 (ga2) 并且正在开发一个主题（带有主题生成器）。我对网页内容中的 svg 图标有疑问。

我添加了一个目录 images（在 /src 中），其中包含一个 svg 目录，该目录又包含（一个精灵）svg 图标。

在网页内容中，我想调用这些 svg 图标，例如使用 HTML 语句：

<svg class="icon">
   <use xlink:href="./images/svg/sprite.svg#icona1"></use>
</svg>

我尝试了不同的路径（href）。主要问题是我一保存网页内容，Liferay 就会自动将之前的代码翻译成：

<svg class="icon">
</svg>

因此，与路径相关的部分（'use'标签）被删除。当然，这些图标是不可见的。

为什么？我应该怎么做才能在网页内容中包含 svg 图标？

谢谢

弗朗切斯科

【问题讨论】：

【解决方案1】：

好的，我解决了。

问题不在于编辑器，也不在于liferay。

问题是，如果我编译和构建引导主题，在 /dist 目录（引导主题）我有 sprite.svg，而在 /src（引导主题）我有单独的图标。我加载了各个图标。

相反，如果我将 sprite.svg（bootstrap 主题）复制到 /src/images/svg（liferay 主题）中，那么一切正常。也来自网络内容。

谢谢大家。

弗朗西斯科

【讨论】：

【解决方案2】：

@Victor 是正确的。

我还要补充一点，这些是所见即所得的编辑器，而不是 HTML 编辑器。源真的不应该手动编辑。源视图只是为了方便。

如果您想要显式标记，请使用Web Content Structure。

【讨论】：

【解决方案3】：

您的问题与路径或是否使用 Liferay 标签无关（如果通过编辑器将标签包含在这些项目中，标签甚至不会产生任何影响）。这似乎是一个简单的编辑器问题，这是您问题的根本原因。

您需要将编辑器配置为接受 use 标记，并避免在清理 Web 内容项时将其删除，然后再保存。

【讨论】：