在 Elementor 中启用 SVG 支持

小部件图标控件现在允许您从图标库中的图标中进行选择或上传您自己的 SVG 图标。我们建议上传没有任何内联样式的 SVG ,以便利用 Elementor 样式控件的全部功能。https://www.youtube.com/embed/JKqqOl2AHpQ?feature=oembed&enablejsapi=1&origin=https%3A%2F%2Felementor.com


什么是 SVG? #

可缩放矢量图形 (SVG) 是一种基于 XML 的矢量图像格式,用于支持交互性和动画的二维图形。

SVG 文件的工作方式与图标类似。您可以放大或缩小它们,而不会损失任何分辨率或模糊度。它们非常轻巧,可让您的页面保持精简。

如何使用 #

单击出现在任何带有图标控件的小部件上的上传 SVG按钮,打开 WordPress 媒体库管理器。上传您要使用的 SVG。

重要安全通知! #

从未知来源上传 SVG 文件可能会构成潜在的安全威胁。我们建议您仅从受信任的来源上传文件,并在您了解并接受所涉及的安全风险后启用此功能。

Elementor 的 SVG 模块将尽最大努力清理上传到您网站的文件,但最好仅从已知和受信任的来源上传 SVG 文件。

上传 SVG 文件后,Elementor 会清理文件,删除任何可能的恶意代码,只留下所需图像的骨架。上传完成后,您可以预览图像并使用原生 WordPress 媒体库对其进行过滤,仅显示 SVG 文件。SVG 作为内联代码插入到页面中。

一次性启用 SVG 流程 #

首次尝试上传 SVG 图标时,您会看到一条警告消息,提醒您上传任何文件(包括 SVG 文件)可能存在潜在的安全风险。如果您了解所涉及的风险并同意继续,请单击启用按钮。

单击启用按钮后,您将被带到Elementor > 设置 > 高级页面。 

  1. 启用 SVG 上传:从下拉列表中选择启用
  2. 单击保存更改按钮。

启用 SVG 上传后,返回页面继续编辑。


覆盖内联样式 #

理想情况下,您应该从 Illustrator 等应用程序中导出 SVG 文件,而不使用任何内联样式,以允许 Elementor 设置图标样式。 

但是,如果您上传的 SVG 具有宽度或高度内联样式,您可以使用 SVG 图标在任何小部件的“高级”选项卡中添加此 CSS 来覆盖它:selector svg { width: 100% !important; height: 100% !important; }

这将允许 Elementor 控制图标的大小。

注意:创建或编辑用于上传的 SVG 时,将填充/描边颜色设置为 #000000 非常重要,这样颜色选择器控件才能在编辑器中运行。

Powered by BetterDocs

发表评论

您的电子邮箱地址不会被公开。

Scroll to Top