javascript - 如果使用 JavaScript 插入 SVG，为什么从 SVG 链接的 CSS 不会加载？

Question

我打算用 CSS 为 SVG 制作动画，它加载在对象元素内，因此存在于它自己的内容文档中，因此我的 HTML 文档的链接 CSS 不适用于那里。

幸运的是，SVG 有自己的方式来包含 CSS。<svg>你只需要在你的根元素之前放这样一行。

<?xml-stylesheet type="text/css" href="style.css" ?>

如果我手动包含此行并在元素内加载纯 HTML 的 SVG <object>，那么我的 CSS 规则将在 SVG 上实现。

但是，我尝试通过将 SVG 作为文本加载、插入样式表链接、从文本创建 blob、最后将 blob 的 URL 作为<object>元素的数据属性添加来在客户端自动化它。这显示了图像并在检查器中呈现了与纯 HTML 解决方案相同的 DOM 结构，但没有实现 CSS 规则。

即使在最简单的情况下，当我用 JS 加载一个已经包含样式表链接的 SVG 时，也不会应用规则。这在我关于故障的独立示例中进行了介绍。

这背后的原因是什么？有没有办法绕过这个限制，而不是直接在 HTML 中插入 SVG？

标签： javascripthtmlcsssvg