WordPress 默认不执行 SVG 内联脚本，直接上传或通过 / 引用动画 SVG 通常失效；真正可行的方案是剥离 SVG 中的 JavaScript，改用纯 CSS 动画，并以内联方式插入 HTML。
wordpress 默认不执行 svg 内联脚本，直接上传或通过 ``/`
在 WordPress 中嵌入带动画的 SVG 文件，常遇到“SVG 上传成功但动画不播放”的问题——这并非 WordPress 配置或插件缺陷，而是 SVG 本身的交付方式与安全机制冲突所致。WordPress 媒体库默认禁用 SVG 中的 <script></script> 标签（即使启用了 SVG Support 插件），且 <img alt="如何在 WordPress 网站中正确嵌入带动画的 SVG 文件" > 和 <object></object> 标签会将 SVG 当作静态资源加载，完全忽略其中的内联脚本或 CSS 动画声明。
✅ 正确做法是：以内联 SVG（inline <svg></svg>）方式嵌入，并将动画逻辑从 SVG 内部迁移至主题 CSS 中。具体步骤如下：
Work Productivity Word Mail Workflow Helper
下载
构建并排查Microsoft Word邮件合并及DOCX模板工作流，使用合并域、内容控件、文档属性、重复区块、数据等
-
优化 SVG 源文件
使用设计工具（如 Figma、Illustrator）或在线优化器（如 SVGOMG）导出 SVG 时，禁用「Inline Styles」和「JavaScript」输出，选择「CSS Classes」或「Style Attributes」导出。目标是获得一个无<script></script>、无onclick、无内联style="animation:..."的精简 SVG，仅保留结构与 class 属性。例如：
<!-- 优化后的 SVG 片段（无脚本，含语义化 class） --> <svg class="animated-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path class="ring" d="M50,10 A40,40 0 1,1 50,90" /> <circle class="dot" cx="50" cy="50" r="6" /> </svg>
-
将动画移至主题 CSS
在 WordPress 主题的style.css或自定义 CSS（外观 → 自定义 → 额外 CSS）中添加对应动画规则：
.animated-icon .ring {
stroke: #3a7ebf;
stroke-width: 4;
fill: none;
stroke-dasharray: 251.2; /* 2 * π * 40 */
stroke-dashoffset: 0;
animation: rotateRing 2s linear infinite;
}
.animated-icon .dot {
fill: #ff6b6b;
animation: bounceDot 1.5s ease-in-out infinite;
}
@keyframes rotateRing {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes bounceDot {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.3); }
}-
以内联方式插入页面/文章
在 WordPress 编辑器中切换至「代码编辑器（HTML）」模式，直接粘贴优化后的<svg></svg>代码（不要用「自定义 HTML」区块包裹后再加 script——无需 JS）：
<div class="icon-container">
<svg class="animated-icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path class="ring" d="M50,10 A40,40 0 1,1 50,90" />
<circle class="dot" cx="50" cy="50" r="6" />
</svg>
</div>⚠️ 注意事项：
- ❌ 避免使用
<img src="xxx.svg" alt="如何在 WordPress 网站中正确嵌入带动画的 SVG 文件" >：浏览器将其视为图像，CSS/JS 动画全部失效； - ❌ 避免
<object></object>或<iframe></iframe>：跨域策略与脚本沙箱限制导致动画不可控； - ✅ 必须内联 SVG：确保 DOM 可访问、CSS 选择器可精准作用于内部元素；
- ✅ 推荐为 SVG 元素添加
class而非id：便于复用同一套 CSS 规则； - ? 安全提示：若需支持用户提交 SVG，务必使用
wp_kses()过滤，防止 XSS —— 但本文场景为开发者可控的静态资源，无需担忧。
最终效果：轻量（20 行 SVG）、高性能（CSS 硬件加速）、兼容性好（现代浏览器全覆盖），且完全符合 WordPress 安全规范。动画不再依赖被屏蔽的脚本，而由浏览器原生渲染引擎驱动，稳定可靠。
