我如何使用一个svg文件与许多单独的svg's在html5中

How can I use an svg file with lots of individual svg's in html5?

本文关键字：svg html5 许多单 何使用 文件 一个      更新时间：2023-09-26

我从http://svg-cards.sourceforge.net/.这是一副基本的标准牌。它的结构看起来像这样：

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

相同，但没有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>
相关文章：