4

我从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由于同源限制，以下解决方案不起作用。

4

2 回答 2

3

我已将卡片文件下载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 的区域上，所以他们有不同的坐标。您必须明确地向左和向上平移它们以调整它们的位置。好吧，我想你明白了。

于 2013-06-24T17:45:44.143 回答
0

The same, but without 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>
于 2013-06-26T04:10:29.880 回答