如何在WordPress网站嵌入带动画的SVG文件？多种尝试均无效

我有一个带动画效果的SVG文件，尝试多种方法都无法在WordPress中正常显示动画，具体尝试过的方法如下：

• 方法1：使用<img>标签引用媒体库中的SVG

<img class="icon" src="url of the image uploaded on wordpress media" alt="icon">

• 方法2：使用<object>标签引用媒体库中的SVG

<object class="icon" type="image/svg+xml" data="url of the image uploaded on wordpress media"></object>

• 方法3：<object>标签嵌套<img>标签作为降级方案

<object class="icon" type="image/svg+xml" data="url of the image uploaded on wordpress media">
    <img class="icon" src="url of the image uploaded on wordpress media" alt="icon">
</object>

• 方法4：通过PHP函数引用主题目录下的SVG

<img class="icon" src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/icon.svg" alt="icon">

• 方法5：内联SVG代码，并将SVG中的脚本部分移至文件底部
• 方法6：尝试分离SVG数据并使用<animation>标签（操作繁琐且无效）

补充说明：曾看到资料指出WordPress媒体上传器无法支持动态SVG，即使内联渲染也不行，找过声称支持的工具也无效，且已安装SVG Support插件。

解决步骤 #

1. 校验SVG动画代码有效性 #

• 若使用<animate>、<animateTransform>等原生SVG动画标签，确保无外部资源依赖；
• 若包含<script>动画逻辑，避免操作外部DOM（如document全局对象），确保脚本在SVG内联后可独立执行。

2. 配置SVG Support插件 #

进入设置 > SVG Support：

• 勾选Advanced Mode（高级模式），开启内联SVG支持；
• 在Allowed Tags中添加<animate>、<animateTransform>、<script>（按需）等动画相关标签；
• 保存设置后重新上传SVG至媒体库。

3. 手动内联SVG #

• 复制SVG完整代码，粘贴到WordPress编辑器的代码模式下（避免可视化编辑器转义代码）；
• 移除xmlns:xlink等可能引发冲突的命名空间（若存在）；
• 通过SVG属性或CSS控制尺寸，确保显示正常。

4. 排查安全限制 #

• 检查.htaccess文件，确保仅保留AddType image/svg+xml svg svgz，无额外SVG权限限制；
• 临时禁用安全类插件（如Wordfence），排查是否为插件冲突导致。

5. 替代方案：SVG Sprite #

• 将动态SVG整合为Sprite文件，上传至主题目录；
• 使用<use>标签引用Sprite中的目标图标，完整保留动画代码。

内容的提问来源于stack exchange，提问作者DjNanos