问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

而不是执行以下操作：

 <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 许可协议

Stack Overflow 翻译csshtmlsvg
阅读 474
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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 次，而你每次只看到它的一部分。

原文由 Robert Longson 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
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>

原文由 JayC 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题