如何在Liferay的web内容中使用svg图标

我使用liferay 7.1（ga2），我正在开发一个主题（使用主题生成器）。我对web内容中的svg图标有问题

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

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

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

我尝试了不同的路径（href）。主要问题是，我一保存web内容，Liferay就会自动将以前的代码转换为：

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

因此，将删除与路径（“使用”标记）相关的零件。当然，图标是不可见的

为什么?？ 我应该如何在web内容中包含svg图标

多谢各位

---

​​​​​​​Francesco

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

在保存之前，您需要将编辑器配置为接受

use

标记，并在清除web内容项时避免将其删除

---

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

在保存之前，您需要将编辑器配置为接受

use

标记，并在清除web内容项时避免将其删除

@Victor是正确的

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

如果需要显式标记，请使用。

@Victor是正确的

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

如果需要显式标记，请使用。

好的，我解决了

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

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

相反，如果我在/src/images/svg（liferay主题）中复制sprite.svg（引导主题），那么一切都正常。也可以从web内容中获取

谢谢大家

弗朗西斯科好的，我解决了

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

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

相反，如果我在/src/images/svg（liferay主题）中复制sprite.svg（引导主题），那么一切都正常。也可以从web内容中获取

谢谢大家

---

Francesco

问题很可能是您用于图标的URL：它需要与页面相关，而不是与主题相关。选中，从哪个URL请求图标。很可能是404。与其他图标的URL进行比较…请@OlafKock这不是问题所在。我使用了正确的路径（绝对和相对），但是当我保存web内容时，“use”标记消失了。谢谢你试过Liferay标签吗？我认为有一个liferay ui标签（liferay ui:icon）可以用于呈现SVG。问题很可能是您用于图标的URL：它需要与页面相关，而不是与主题相关。选中，从哪个URL请求图标。很可能是404。与其他图标的URL进行比较…请@OlafKock这不是问题所在。我使用了正确的路径（绝对和相对），但是当我保存web内容时，“use”标记消失了。谢谢你试过Liferay标签吗？我认为可以使用liferay ui标记（liferay ui:icon）呈现SVG。