هل من الممكن معالجة مستند SVG مضمن في مستند HTML باستخدام JavaScript؟

Question

لقد قمت بإنشاء صورة SVG، أو أشبه بتطبيق صغير، لعرض الرسوم البيانية للبيانات.أريد تضمين هذا في صفحة HTML، وطرق الاتصال على صورة SVG.

مثال:

<object id="img" data="image.svg" width="500" height="300"/>
<script>document.getElementById("img").addData([1,23,4]);</script>

هل من الممكن على الإطلاق استدعاء الأساليب في مستند SVG؟إذا كان الأمر كذلك، فكيف يمكنني إعلان الطرق التي سيتم عرضها في ملف SVG، وكيف يمكنني استدعاؤها من مستند HTML؟

Answer 1

حل:

بصيغة SVG:

<script>document.method = function() {}</script>

في html (باستخدام النموذج الأولي لإضافة مستمعي الأحداث):

<script>$("img").observe("load", function() {$("img").contentDocument.method()});

تحتاج إلى الاستماع إلى حدث التحميل على الصورة.بمجرد تحميل الصورة، يمكنك استخدام element.contentDocument للوصول إلى متغير المستند في مستند svg.وأي طرق تضاف إلى ذلك ستكون متاحة.

Answer 2

الأمور في الواقع أبسط مما تتوقع.لا تحتاج حقًا إلى قراءة برنامج تعليمي معقد لفهم المفهوم، ولا يتعين عليك أيضًا استخدام JQuery.هنا هو التخطيط الأساسي:

• وظيفة JavaScript في مستند HTML الخاص بك.

  <script type="text/javascript">
  function change(){
      var s=document.getElementById("cube");
      s.setAttribute("stroke","0000FF");
  }
  </script>
  

• عنصر SVG الذي نحاول التعامل معه.

  <svg width=100 height=100 style='float: left;'>
    <rect x="10" y="10" width="60" height="60" id="cube" onclick="change()" stroke=#F53F0C stroke-width=10 fill=#F5C60C />
  </svg>
  

• زر مضمن من شأنه أن يؤدي إلى التغيير.لاحظ أنه في مثالي، يمكن أيضًا تشغيل الحدث من خلال النقر على المكعب نفسه.

  <button onclick="change()">Click</button>
  

Answer 3

منذ بضع سنوات، طُلب مني إنشاء لعبة للاعبين تعتمد على تقنية Ajax باستخدام SVG.قد لا يكون هذا هو الحل الذي تبحث عنه بالضبط، ولكنه قد يساعدك في الاستماع إلى الأحداث في SVG الخاص بك.إليك وحدة التحكم SVG:

لمعلوماتك، تم سحب SVG وإسقاطه (كان Stratego)

/****************** Track and handle SVG object movement *************/
var svgDoc;
var svgRoot;
var mover='';       //keeps track of what I'm dragging

///start function////
//do this onload
function start(evt){
    //set up the svg document elements
    svgDoc=evt.target.ownerDocument;
    svgRoot=svgDoc.documentElement;
    //add the mousemove event to the whole thing
    svgRoot.addEventListener('mousemove',go,false);
    //do this when the mouse is released
    svgRoot.addEventListener('mouseup',releaseMouse,false); 
}

// set the id of the target to drag
function setMove(id){ mover=id; }

// clear the id of the dragging object
function releaseMouse(){ 
    if(allowMoves == true){ sendMove(mover); }
    mover=''; 
}

// this is launched every mousemove on the doc
// if we are dragging something, move it
function go(evt){
    if(mover != '' && allowMoves != false) {
        //init it
        var me=document.getElementById(mover);

        //actually change the location
        moveX = evt.clientX-135; //css positioning minus 1/2 the width of the piece
        moveY = evt.clientY-65;
        me.setAttributeNS(null, 'x', evt.clientX-135);
        me.setAttributeNS(null, 'y', evt.clientY-65);
    }
}

function moveThis(pieceID, x, y) {
    $(pieceID).setAttributeNS(null, 'x', x);
    $(pieceID).setAttributeNS(null, 'y', y);
}

كان تطبيقي عبارة عن SVG + JavaScript خالصًا، ولكن هذا هو جوهره.

Answer 4

وأود أن أشير د.David Dailey هو أكثر معلومات SVG / JS الرائعة التي ستجدهاhttp://srufaculty.sru.edu/david.dailey/svg/

Answer 5

لقد استكشفت ملف svg بواسطة JavaScripts.انظر المدونة: تحجيم رسومات SVG باستخدام JavaScripts

Answer 6

انظر أيضا البرنامج المساعد مسج SVG

Answer 7

للحصول على الدعم في IE6، قم بإلقاء نظرة على SVGWeb.

توجد أمثلة حول كيفية التعامل مع SVG باستخدام JavaScript في نموذج التعليمات البرمجية المرفق مع المكتبة.

يوجد أيضًا قدر لا بأس به من المعلومات في أرشيفات القائمة البريدية.