Question

我从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解决方案不起作用，因为原因限制相同。

Answer 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区域，所以他们有不同的坐标。您必须向左和向上显式翻译它们以调整其位置。好的，我想你明白了。

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

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

2 个答案: