我可以在单个文件中有多个SVG图像吗？ [英] Can I have Multiple SVG images in a single file?
本文介绍了我可以在单个文件中有多个SVG图像吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
而不是执行以下操作：
< html>
< body>
< embed src =circle.svgtype =image / svg + xml/>
< embed src =square.svgtype =image / svg + xml/>
< embed src =triangle.svgtype =image / svg + xml/>
< / body>
< / html>
我会预先做这样的事
< html>
< body>
< embed src =shapes.svgtype =image / svg + xmlid =circle/>
< embed src =shapes.svgtype =image / svg + xmlid =square/>
< embed src =shapes.svgtype =image / svg + xmlid =triangle/>
< / body>
< / html>
使用类似这样的svg文件
<？xml version =1.0standalone =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/svgversion =1.1>
< svg id =circle>
< circle cx =100cy =50r =40stroke =black
stroke-width =2fill =red/>
< / svg>
< svg id =square>
< rect width =100height =100style =fill：rgb（0,0,255）; stroke-width：1; stroke：rgb（0,0,0）/>
< / svg>
< svg id =triangle>
< line x1 =50y1 =0x2 =0y2 =50style =stroke：rgb（255,0,0）; stroke-width：2/>
< line x1 =50y1 =0x2 =100y2 =50style =stroke：rgb（255,0,0）; stroke-width：2/>
< line x1 =0y1 =50x2 =100y2 =50style =stroke：rgb（255,0,0）; stroke-width：2/>
< / svg>
< / svg>
似乎SVG只是XML，我应该能够将所有的图像存储在一个文件
解决方案
在html文档中只能有一个根节点。
一种方法是 SVG Stacks ，它通过将所有的图纸放在彼此之上，然后只显示您想要使用CSS查看的图片。
另一种方式可能是在不同地方使用这样的shapes.svg
< svg xmlns = http://www.w3.org/2000/svgversion =1.1>
< g transform =translate（0,0）>
< circle cx =100cy =50r =40stroke =blackstroke-width =2fill =red/&
< / g>
< g transform =translate（0,200）>
< rect width =100height =100style =fill：rgb（0,0,255）; stroke-width：1; stroke：rgb（0,0,0）/>
< / g>
< g transform =translate（0,400）>
< line x1 =50y1 =0x2 =0y2 =50style =stroke：rgb（255,0,0）; stroke-width：2/>
< line x1 =50y1 =0x2 =100y2 =50style =stroke：rgb（255,0,0）; stroke-width：2/>
< line x1 =0y1 =50x2 =100y2 =50style =stroke：rgb（255,0,0）; stroke-width：2/>
< / g>
< / svg>
然后使用svgView显示你想要的位。
< html>
< body>
< embed src =shapes.svg＃svgView（viewBox（50,0100,100））style =width：100px; height：100pxtype =image / svg + xml/&
< embed src =shapes.svg＃svgView（viewBox（0,200,100,100））style =width：100px; height：100pxtype =image / svg + xml/&
< embed src =shapes.svg＃svgView（viewBox（0,400,100,100））style =width：100px; height：100pxtype =image / svg + xml/&
< / body>
< / html>所有这些都意味着你在UA中使用更多的内存，因为整个svg文件被加载了。 3次，你每次只是看到它的一部分。
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
<?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.
解决方案 You can only have a single root node in an html document. Nevertheless there are various ways to achieve what you want.
One way is SVG Stacks which works by having all the drawings on top of each other and then just displaying the one you want to see using CSS.
Another way might be to have a shapes.svg like this with all the drawings in different places
<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.
<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.
这篇关于我可以在单个文件中有多个SVG图像吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
