Question

我希望有一个包含SVG的干净简单的HTML页面。我可以将SVG放入HTML中，但这会使文件变得庞大而丑陋。我只是将SVG保存在单独的文件中，并以某种方式将它们链接到页面中。

我发现你可以使用这样的标签：

<object data="vector.svg"></object>

但这并不允许我在外部设置svg的样式。我必须将所有样式嵌入SVG本身，这是我不想做的。

有没有办法在外部加载SVG，但仍然在外部CSS文件中设置样式？

Answer 1

您可以拥有外部CSS文件，只需将其包含在SVG文件中即可。在<svg>元素之前粘贴xml-stylesheet，例如

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>   
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>

在支持html的UA中，您还可以使用html link元素来包含外部CSS文件。您甚至不需要将其包装在foreignObject元素中，因为它不会被渲染。