为什么从SVG链接的CSS赢了'；如果SVG是用JavaScript插入的，是否加载？

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

幸运的是，SVG有自己的方式来包含CSS。您只需要在根

元素前面放一行这样的代码

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

如果我手动包含这一行并在

元素中加载带有纯HTML的SVG，那么我的CSS规则将在SVG上实现

但是，我尝试在客户端将SVG作为文本加载，插入样式表链接，从文本创建blob，最后添加blob的URL作为

元素的数据属性，从而实现自动化。这显示了图像，并在inspector中呈现了与纯HTML解决方案相同的DOM结构，但没有实现CSS规则

即使在最简单的情况下，当我加载一个带有JS的SVG时（它已经包含stylsheet链接），规则也不会被应用。这在我的《关于小故障》中有介绍

---

这背后的原因是什么？有没有一种方法可以绕过这一限制，而不直接将SVG插入HTML？

只有当标记中的

SVG

是这样时，才会应用SVG元素的外部样式。不是作为

对象

，不是作为

图像

，而是作为

。否则，必须将样式定义为SVG元素的内联样式（在根元素之后）。另见@Lain谢谢你提供的信息。但是，请查看我关于glitch的示例，其中外部样式应用于SVG，即使它在

对象

元素中显示，至少在我的浏览器中是这样：Chromium v66.0.3359.181和Firefox v59.0.2是的，该示例昨天抛出了404，现在它可以工作了。根据这一点，只要外部样式在对象中定义并且svg是“内联”的，它就可以工作。您的被定义为blob，我假设它与base64的处理方式相同-浏览器中没有标记，只是结果。我建议它的行为类似于使用XHR请求某些服务器资源，至少根据此来源：通过XHR请求，也可以将其添加为内联svg。这取决于如何处理获取的XHR。无论如何，我认为基线是，只有当浏览器在DOM中具有未编码的标记时，它才能正常工作，这可以通过向其添加svg标记或直接将其作为对象数据引用来实现。