将组从 svg 文件嵌入到 html答案

【问题标题】：Embed group from svg file into html将组从 svg 文件嵌入到 html
【发布时间】：2012-09-20 18:51:11
【问题描述】：

我想从 SVG 文件中嵌入一个组，该组可以使用 id 进行标识。我幼稚的做法是：

1.嵌入

<embed src="cards/svg-cards.svg#joker_red"
  id="embsvg"
  width="300" height="220"  type="image/svg+xml"
  pluginspage="http://www.adobe.com/svg/viewer/install/"  
  viewBox="0 0 100 100"
 />

2。图片

<image id="i" x="10" y="20" width="80" height="80" 
   xlink:href="cards/svg-cards.svg#joker_red" />

3.对象

<object data="cards/svg-cards.svg#red_joker"></object>

我尝试了一些更愚蠢的变体，包括 USE 元素和 javascript。

svg 文档取自这里：Sourceforge

【问题讨论】：

这适用于 Firefox 不是吗？ jsfiddle.net/simurai/7GCGr 例如显示不同的图标。
是的，它完美地工作，并展示了如何以一种非常好的方式做我想做的事。不幸的是，它不适用于我的纸牌游戏：jsfiddle.net/7GCGr/142 它总是会显示所有卡片，无论 ID 是什么。在您的示例中，它只会显示组内容，如果没有给出组 ID，则不会显示任何内容。

标签： html image svg embed

【解决方案1】：

我自己发现的。

重要的是，给所有可见元素一个类属性，比如 class="card" 并指定 'svg .card { display: none }' 作为样式。那会让一切都消失。然后只有在svg文件名后面通过#选择的项目才会真正显示出来。

要显示的部分是组元素还是 svg 元素并不重要。

Robert 发布的代码就是这样做的，但对我来说，这门课的重要性并不明显。

【讨论】：