<object> を用いたインタラクティブなSVG？

サポート インストール
9

徐々に理解が進んでいます。質問をするには、かなりの準備が必要です。

SVG

私は SVG を生成する Web サーバーを持っています。この質問では、非常にシンプルなテスト SVG を生成します…

<svg xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" viewBox="0 0 100 100">
<path d="M50,4L4,50L50,96L96,50Z" stroke="#40638C" stroke-width="3"></path>
<path d="M50,5L5,50L50,95L95,50Z" stroke="#333" fill="#40638C" stroke-width="3"></path>
<path d="M37,42c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#40495E" fill="#40495E"></path>
<path d="M35,40c-1,0,11-20,13-20c1,0,15,20,13,20h-9c0,8,9,22,12,25l-4,4l-8,-7v13h-10v-35z" stroke="#333" fill="#555"></path>
</svg>

これは単に見た目が凝った「マージ」記号です。4 つの PATH 要素が含まれている点に注意してください。

インライン化

SVG を投稿に含めるために、テーマ経由で追加された JavaScript を使用しています。

最終目標は、適切なプラグインを作成することですが、今は概念実証（PoC）を構築しようとしています。そのため、単にテーマのカスタマイズにある <head> セクションに貼り付けています。

<script type="text/discourse-plugin" version="0.8">
var UMB = {
    svgload: function(base, target) {
        var url = base + $(target).text();
        $(target).html('');
        $.ajax({
            method: "GET",
            url: url,
            async: false,
            dataType: "text",
            success: function(data) { $(target).append(data); }
        });
        alert('loaded!');
        $(target).children('path').each(function(){alert('here is a path element');});
    },
}
$.fn.umbdv = function() {
    this.each(
        function() {
            UMB.svgload('__URL_REDACTED__', this);
        }
    );
    return this;
};
api.decorateCooked(
  $elem => $elem.children('.cooked div[data-custom="umbdv"]').umbdv(),
  { id: 'umbdv' }
);
</script>

ここで…

var UMB = { は、至る所に巨大な無名関数を記述する必要を避けるための単なるグローバル変数です。

$.fn.umbdv = は、私が思うに JQuery を拡張する「プラグイン」と呼ばれるものです。

api.decorateCooked( を使うと、投稿がブラウザに送信される前に操作できます。

呪文（実装）

トピック内で、以下のように記述します…

<div data-custom="umbdv">/vtest</div>

この DIV に対して UMB.svgload('__URL_REDACTED__', this) が呼び出されます。

UMB.svgload() は /vtest という文字列を正しく解析し、URL を構成して AJAX リクエストを発行します。append(data) が正常に実行され、boop で SVG がインライン化されます…

Screen Shot 2021-01-24 at 10.50.45
Screen Shot 2021-01-24 at 10.50.452872×1584 728 KB

その後、UMB.svgload() 内の alert() が期待通りに発火します。（もちろん、これはデバッグ用のハックですよね？ :)）

質問（ようやく）

Discourse ホストのフォーラムには、スタッフ専用トピックがあり、そこでこの動作を確認できます。（私は、管理者として私のインストールに直接介入できる Discourse のスタッフやサポート担当者にお話ししています。）

https://forum.moversmindset.com/t/svg-experimentation-in-progress/1109

なぜ…

$(target).children('path').each(function(){alert('here is a path element');});

…が PATH 要素のいずれも選択しないのでしょうか？

何も起きません。エラーもなし。何もないのです。

次のステップ

この些細な alert() の概念実証が機能するようになったら、私は以下に進む予定です…

私が「操作している」DOM の断片は、UMB.svgload() が呼び出された時点では、実際のドキュメント DOM にまだ接続されていないことを認識しています。そのため、$(target)… が必要だと期待しています。

最終的には、はるかに複雑な SVG をインライン化することになり、より複雑な JQuery セレクタを使用する必要があります。$(target) 内の多くの要素を見つけて、他の UMB.… グローバル関数を呼び出すイベントハンドラ（例えば onclick など）をアタッチしたいと考えています。

「いいね！」 1