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

Question

我使用liferay 7.1（ga2），我正在开发一个主题（使用主题生成器）。我在网页内容中遇到svg图标问题。

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

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

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

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

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

因此，删除相对于路径（'use'标签）的部分。当然，图标不可见。

为什么？我该怎么做才能在网页内容中加入svg图标？

谢谢

弗朗切斯科

Answer 1

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

您需要将编辑器配置为接受use标记，并在保存之前清除Web内容项时将其删除。

Answer 2

@Victor是对的。

我还要补充一点，这些是WYSIWYG编辑器，而不是HTML编辑器。源实际上不应该手动编辑。 Source View仅为方便起见。

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

Answer 3

好的，Solvide。

问题不在于编辑器还是生命线。

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

相反，如果我在/ src / images / svg（liferay主题）中复制sprite.svg（bootstrap主题），那么一切都还可以。也来自网页内容。

谢谢你们。

弗朗切斯科