如何在HTML5中使用包含多个单独SVG的SVG文件？

Question

如何在HTML5中使用包含多个单独SVG的SVG文件？

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>

自述文件中提到：

您可以通过将文件呈现为一个 pixmap 并剪裁每个卡片，或者使用 DOM 接口的名称访问每个卡片。

然后给出了以下示例：

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

好的，我看到了这两者之间的关系，但我不明白如何只显示一张卡片，因为所有的卡片都在同一个文件中。无论我做什么，都会呈现整个svg文件（55张卡片！）

这包括：

<img>
<embed>
<object>

我的问题是：如何按照readme所述轻松地实现以下操作：如何在不显示整个文件的情况下访问组内的单个卡片？

实际上，我想要的是一种类似于css的方式。将其作为资源包含在头部，然后能够在文档正文中使用<g id="king_spade"></g>，然后会显示出黑桃国王牌。我不能这样使用吗？

编辑：我试图在phonegap应用程序内完成所有操作，因此没有连接到外部服务器。所有资源都位于电话上，因此下面的ajax解决方案由于同源限制而无法使用。

- Ryan

你是在一个大的<svg>元素内工作，还是只想将卡片添加到常规HTML中（例如<div>）？ - Egor Nepomnyaschih

@EgorNepomnyaschih 我更喜欢第二个选项。 - Ryan

2个回答

0

相同，但没有 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>

- Egor Nepomnyaschih

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Egor Nepomnyaschih · Accepted Answer

我已经下载了名为 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>

这个SVG图像里展示了一张黑桃国王的扑克牌，大小为500x500。奇怪的是，所有的扑克牌都散布在2178x1216的区域内，它们有不同的坐标。你需要明确地将它们向左和向上移动，以调整它们的位置。好的，我想你已经明白了。