Html 我可以在一个文件中包含多个 SVG 图像吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14630035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I have Multiple SVG images in a single file?
提问by Jeremy A. West
Instead of doing the following:
而不是执行以下操作：
<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>
I would prever to do something like this
我愿意做这样的事情
<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>
with a svg file that may look something like this
带有可能看起来像这样的 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>
It seems as an SVG is just XML I should be able to store all my images in a single file that downloades a single time and is used throughout the site.
似乎 SVG 只是 XML，我应该能够将所有图像存储在一个文件中，该文件下载一次并在整个站点中使用。
采纳答案by Robert Longson
You can only have a single root node in an html document. Nevertheless there are various ways to achieve what you want.
一个 html 文档中只能有一个根节点。然而，有多种方法可以实现您想要的。
One way is SVG Stackswhich works by having all the drawings on top of each other and then just displaying the one you want to see using CSS.
一种方法是SVG Stacks，它的工作原理是将所有绘图放在一起，然后仅使用 CSS 显示您想要查看的绘图。
Another way might be to have a shapes.svg like this with all the drawings in different places
另一种方法可能是在不同的地方有一个这样的shapes.svg，所有的图纸
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(0,0)">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</g>
<g transform="translate(0,200)">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0,400)">
<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" />
</g>
</svg>
And then use svgView to show just the bits you want.
然后使用 svgView 只显示你想要的位。
<html>
<body>
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px; height:100px" type="image/svg+xml" />
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>
<embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>
</body>
</html>
All of these do mean though that you use more memory in the UA as the whole svg file is loaded 3 times and you just see a part of it each time.
所有这些确实意味着您在 UA 中使用了更多内存，因为整个 svg 文件被加载了 3 次，并且每次您只能看到其中的一部分。
回答by JayC
Yes, but XML documents need a single root node. Yours has three. Try wrapping the three nodes in an svg element and move the namespace and version number to it. Seems to validate via http://validator.w3.org/check
是的，但是 XML 文档需要一个根节点。你的有三个。尝试将三个节点包装在一个 svg 元素中，并将命名空间和版本号移动到其中。似乎通过http://validator.w3.org/check验证
<?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>
回答by Stephen Sabatini
Reference:
参考：
<svg alt="">
<use xlink:href="shapes.svg#circle"></use>
</svg>
<svg alt="">
<use xlink:href="shapes.svg#square"></use>
</svg>
<svg alt="">
<use xlink:href="shapes.svg#triangle"></use>
</svg>
shapes.svg:
形状.svg：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="circle">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</symbol>
<symbol id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</symbol>
<symbol 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" />
</symbol>
</svg>
