如何在 html5 中使用包含大量单个 svg 的 svg 文件？答案

【问题标题】：How can I use an svg file with lots of individual svg's in html5?如何在 html5 中使用包含大量单个 svg 的 svg 文件？
【发布时间】：2013-06-21 07:11:21
【问题描述】：

我从http://svg-cards.sourceforge.net/ 下载了一个 svg 文件。它是一副基本的标准扑克牌。它的结构是这样的：

<defs>
    <g>
        <text></text>
    </g>
</defs>
<g>
    <g id="king_spade">
        <use></use>
    </g>
    ... //50+ more cards
</g>

自述文件说

您可以通过将文件渲染成像素图并剪裁每张卡片或将它们的名称与 DOM 接口一起使用来访问每个卡片

然后给出这个例子：

<g id="king_spade">
...
</g>

好的，很好，我看到了两者之间的关系，但我不明白如何只显示一张卡片，因为所有卡片都在同一个文件中。我所做的任何事情都渲染了整个 svg 文件（所有 55 张卡片！）

这包括：

<img>
<embed>
<object>

所以我的问题：我该如何做自述文件所建议的应该如此简单......如何在不首先显示整个文件的情况下访问组内的各个卡？

真正我正在寻找的几乎是一种像 css 一样使用它的方法。将其作为资源包含在我的脑海中，然后可以在文档的正文中执行 <g id="king_spade"></g> 并让黑桃王出现。我不能这样用吗？

编辑：我试图在 phonegap 应用程序中完成这一切，所以我没有连接到外部服务器。所有资源都将位于手机上，因此由于同源限制，下面的ajax 解决方案不起作用。

【问题讨论】：

您是在一个大的<svg> 元素中工作，还是只想在常规HTML 中添加一张卡片（例如，添加到<div>）？
@EgorNepomnyaschih 我更喜欢第二个选项。

标签： javascript html dom svg cordova

【解决方案1】：

我已经将卡片文件svg-cards.svg 下载到同一个文件夹中，并尝试了这样的操作：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $.ajax({
                url: "svg-cards.svg",
                type: "get",
                dataType: "text",
                success: function(svgText) {
                    var parser = new DOMParser();
                    parser.async = false;
                    var svgEl = $(parser.parseFromString(svgText, 'text/xml').documentElement);
                    svgEl.css("display", "none");
                    $("body").append(svgEl);
                    var kingSpade = $(svgEl).find("#king_spade").clone();
                    kingSpade.removeAttr("id");
                    $("#mysvg").append(kingSpade);
                }
            });
        </script>
    </head>
    <body>
        <svg width="500" height="500">
            <g id="mysvg" transform="translate(-2000,-500)"></g>
        </svg>
    </body>
</html>

它在 500x500 SVG 内显示黑桃卡。奇怪的是，他们的卡片都分布在 2178x1216 的区域上，所以他们有不同的坐标。您必须明确地向左和向上平移它们以调整它们的位置。好的，我想你明白了。

【讨论】：

在 Google Chrome 和 Mozilla Firefox 中测试
我正在尝试在本地应用程序中执行此操作（即没有服务器），因此这不是一个选项，因为我收到相同的来源访问被拒绝错误。有什么建议我该怎么做？
我没想到这会是个问题。请参阅下面单独答案中的解决方案。但这种方式不像第一个那样优雅，因为您需要将整个 SVG 复制粘贴到您的 HTML 中。如果您从事 Web 开发，我仍然建议您设置服务器。

【解决方案2】：

相同，但没有 AJAX

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function() {
                var svgEl = $("#sourcesvg");
                svgEl.css("display", "none");
                var kingSpade = $(svgEl).find("#king_spade").clone();
                kingSpade.removeAttr("id");
                $("#mysvg").append(kingSpade);
            });
        </script>
    </head>
    <body>
        <svg width="500" height="500">
            <g id="mysvg" transform="translate(-2000,-500)"></g>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
            height="1216.19" width="2178.18" viewBox="-.2 -236 2178.99 1216.19" id="sourcesvg">
            ...
            .....
            ...     // Entire source SVG goes here
            ....
        </svg> 
    </body>
</html>

【讨论】：