Question

而不是执行以下操作：

<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>

我会更喜欢做这样的事情

<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，我应该能够将我的所有图像存储在一个文件中，这个文件可以在整个网站中下载并在整个网站中使用。

Answer 1

是的，但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>

Answer 2

html文档中只能有一个根节点。然而，有各种方法可以达到你想要的效果。

一种方法是SVG Stacks，它的工作方式是将所有绘图放在彼此之上，然后只显示你想要使用CSS看到的那些。

另一种方法可能是像这样的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>

然后使用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>

所有这些都意味着你在UA中使用了更多的内存，因为整个svg文件被加载了3次，你每次只看到它的一部分。

Answer 3

参考：

<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：

<?xml version="1.0" encoding="UTF-8" ?>
<!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" 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>

我可以在一个文件中包含多个SVG图像吗？

3 个答案: