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>

OK、2 つの関係はわかりましたが、すべてのカードが同じファイルにあるため、1 枚のカードだけを表示する方法がわかりません。私が行ったことはすべて、svg ファイル全体 (55 枚すべてのカード!) をレンダリングしました。

それには以下が含まれます：

<img>
<embed>
<object>

だから私の質問: readme が示唆していることをどのように正確に行うのですか? 最初にファイル全体を表示せずに、グループ内の個々のカードにアクセスするにはどうすればよいですか?

本当に私が探しているのは、css のように使用する方法です。それをリソースとして頭に入れ、ドキュメントの本文で実行して、<g id="king_spade"></g>スペードのカードキングを表示させることができます. このままでは使えないのでしょうか？

編集: phonegap アプリケーション内でこれをすべて実行しようとしているため、接続している外部サーバーはありません。すべてのリソースは電話に配置されるajaxため、同じオリジンの制限により、以下のソリューションは機能しません。

4

2 に答える 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>
于 2013-06-26T04:10:29.880 に答える