html - 如何将 SVG 与 HTML 分开？

Question

我想要一个包含 SVG 的干净简单的 HTML 页面。我可以将 SVG 放到 HTML 中，但这会使文件变得又大又难看。我宁愿将 SVG 保存在单独的文件中，并以某种方式将它们链接到页面中。

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

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

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

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

Answer 1

你可以有一个外部 CSS 文件，你只需要从 SVG 文件中包含它。贴一个xml-stylesheet在根之前 <svg>元素例如

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

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