Question

我想用CSS操作SVG，我刚刚学会了我可以为SVG元素添加一个ID并执行此操作，但将SVG放入HTML中非常麻烦。我的问题是，如果我使用图像标记加载SVG，并将ID添加到SVG文件的代码中，ID是否会以相同的方式工作？

Answer 1

您可能已经或可能没有意识到，CSS不能跨文档边界工作。因此，如果您的SVG位于单独的文件中，则无法在HTML中使用CSS对其进行样式设置。无论是<img>还是<object>。

如果您想使用CSS为SVG设置样式，您有两种选择：

（1）在HTML中内联SVG，或

（2）将CSS样式表添加到SVG文件本身。您可以使用<style>元素，也可以从SVG引用外部样式表：

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

但是，如果您使用<img>或background-image嵌入SVG，则此类外部引用将无效。有特殊的隐私规则禁止它。从<img>引用的所有图像文件都必须是自包含的。