如何在 WordPress 网站中正确嵌入带动画的 SVG 文件-php教程-PHP中文网

WordPress 默认不执行 SVG 内联脚本，直接上传或通过 / 引用动画 SVG 通常失效；真正可行的方案是剥离 SVG 中的 JavaScript，改用纯 CSS 动画，并以内联方式插入 HTML。

wordpress 默认不执行 svg 内联脚本，直接上传或通过 ``/`

在 WordPress 中嵌入带动画的 SVG 文件，常遇到“SVG 上传成功但动画不播放”的问题——这并非 WordPress 配置或插件缺陷，而是 SVG 本身的交付方式与安全机制冲突所致。WordPress 媒体库默认禁用 SVG 中的 <script></script> 标签（即使启用了 SVG Support 插件），且和标签会将 SVG 当作静态资源加载，完全忽略其中的内联脚本或 CSS 动画声明。

✅ 正确做法是：以内联 SVG（inline ）方式嵌入，并将动画逻辑从 SVG 内部迁移至主题 CSS 中。具体步骤如下：

优化 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"></path><circle class="dot" cx="50" cy="50" r="6"></circle></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）」模式，直接粘贴优化后的代码（不要用「自定义 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"></path><circle class="dot" cx="50" cy="50" r="6"></circle></svg>
</div>

⚠️ 注意事项：