而不是执行以下操作:
<html>
<body>
<embed src="circle.svg" type="image/svg+xml" />
<embed src="square.svg" type="image/svg+xml" />
<embed src="triangle.svg" type="image/svg+xml" />
</body>
</html>
我会prever做这样的事情
<html>
<body>
<embed src="shapes.svg" type="image/svg+xml" id="circle" />
<embed src="shapes.svg" type="image/svg+xml" id="square" />
<embed src="shapes.svg" type="image/svg+xml" id="triangle" />
</body>
</html>
带有一个看起来像这样的 svg 文件
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<svg id="circle">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
<svg id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
<svg id="triangle">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</svg>
似乎 SVG 只是 XML,我应该能够将所有图像存储在一个文件中,该文件一次性下载并在整个站点中使用。
原文由 Jeremy A. West 发布,翻译遵循 CC BY-SA 4.0 许可协议
html 文档中只能有一个根节点。然而,有多种方法可以实现您想要的。
一种方法是 SVG Stacks ,它的工作原理是将所有绘图放在彼此的顶部,然后使用 CSS 仅显示您想要查看的那个。
另一种方法可能是在不同的地方有一个像这样的 shapes.svg 的所有图纸
然后使用 svgView 只显示您想要的位。
所有这些都意味着你在 UA 中使用了更多的内存,因为整个 svg 文件被加载了 3 次,而你每次只看到它的一部分。