你能用 CSS 修改加载的 SVG 背景图像吗？

Question

我们首次将 SVG 用于基于 HTML5 的移动应用精灵文件（它们使处理视网膜和其他屏幕尺寸差异变得容易）。

我知道生成的 SVG 可以直接操作（因为它们是文本文件），但可以通过 CSS 或脚本修改 SVG 资产（在这种情况下，是通过 CSS 加载的背景图像）吗？

例如，我们可以加载一个全黑的 SVG 对象，然后将其更改为白色吗？

Answer 1

如果 SVG 文件作为图像加载（通过img 或background-image），您将无法访问它的 DOM。你也不能通过 CSS 设置样式。

如果您打算进行此类操作，您应该将 SVG 附加到 div。您仍然应该能够对该 div 执行类似精灵的操作。您将能够通过 CSS 或 javascript 设置样式。

---

SVG 应该是内联的。您可以将 SVG 复制并粘贴到曾经包含 background-image 的 div 中，或通过 ajax 请求将其加载到那里。

您可以使用left 或-webkit-transform: translate(...) 设置动画，而不是为background-position 设置动画。