SVG تفاعلي باستخدام <object>؟

الدعم تثبيت
9

استمررتُ في فهم هذا الأمر ببطء. يتطلب هذا السؤال إعدادًا كبيرًا:

SVG

لدي خادم ويب يولد ملفات SVG. وفي هذا السؤال، يولد ملف 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>

إنه مجرد رمز “دمج” بمظهر فخم. لاحظ أنه يحتوي على أربعة عناصر PATH.

التضمين (Inlining)

لدمج ملف SVG في منشور، أستخدم بعضًا من كود JavaScript المضاف عبر قالب موقعي.

الهدف النهائي هو إنشاء إضافة (plugin) مناسبة. لكنني أحاول فقط بناء نموذج أولي (proof-of-concept). لذا فقد تم لصقه ببساطة في قسم <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('تم التحميل!');
        $(target).children('path').each(function(){alert('هنا عنصر path');});
    },
}
$.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 = { هو مجرد متغير عام (global variable) لتجنب وجود دوال مجهولة ضخمة في كل مكان.

$.fn.umdv = هي ما أعتقد أنه يُسمى “إضافة” (plugin) توسع مكتبة JQuery.

api.decorateCooked( تتيح لي التلاعب بالمنشور قبل إرساله إلى المتصفح.

العبارة السحرية (Incantation)

في موضوع ما، أكتب بعد ذلك…

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

يتم استدعاء UMB.svgload('__URL_REDACTED__', this) لهذا الـ DIV.

تفهم 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

ثم يتم تشغيل alert() الخاص بي داخل UMB.svgload()، تمامًا كما هو متوقع. (من الواضح أنها حيلة تصحيح أخطاء، أليس كذلك؟ :))

السؤال (أخيرًا)

لدي موضوع خاص بالموظفين فقط في منتدى Discourse المضيف لدي حيث يمكنك رؤية هذا في العمل. (أتحدث إلى موظفي دعم Discourse الذين يمكنهم الدخول إلى تثبيتتي كمسؤولين.)

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

لماذا لا…

$(target).children('path').each(function(){alert('هنا عنصر path');});

…يحدد أيًا من عناصر PATH؟

لا يفعل شيئًا—لا توجد أخطاء. لا شيء.

الخطوة التالية

إلى أين سأذهب إذا نجحت في جعل هذا alert() البسيط كنموذج أولي يعمل…

أدرك أن جزء الـ DOM الذي أعمل عليه “ليس بعد” متصلًا بـ DOM المستند الفعلي (في النقطة التي يتم فيها استدعاء UMB.svgload()). لهذا السبب أتوقع أن يكون $(target)… هو ما أحتاجه.

في النهاية، سأقوم بتضمين ملفات SVG أكثر تعقيدًا بكثير، وسأحتاج إلى استخدام محددات JQuery أكثر تعقيدًا. أريد العثور على العديد من العناصر داخل $(target) وإضافة معالجات للأحداث (مثل onclick) التي ستدعو وظائف عامة أخرى UMB.….

إعجاب واحد (1)