HTML5 SVG مشكلة jQuery في Firefox 3.6

StackOverflow https://stackoverflow.com/questions/3131391

  •  01-10-2019
  •  | 
  •  

سؤال

هنا ملف HTML الخاص بي (مطلوب jQuery وتمكين HTML5 في Firefox حول: config)

<!DOCTYPE html>

<html>
    <head>
        <script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                    $('svg').append("<rect x='100px' y='0px' height='100px' width='100px' fill='red' />");
            })
        </script>
    </head>
    <body>
        <svg viewbox="0 0 300px 600px">
            <rect x='0px' y='0px' height='100px' width='100px' fill='blue' />
        </svg>
    </body>
</html>

المشكلة هي أنني لا أستطيع رؤية Red Rectangle عند تحميل هذه الصفحة. في Firebug ، يكون مربع المستطيل الأحمر مثل هذا المظلم.

هل كانت مفيدة؟

المحلول

لذلك ، يبدو أنها مشكلة في مساحة الاسم ، والرمز التالي يعمل

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                    rect = document.createElementNS('http://www.w3.org/2000/svg', "rect");
                    rect.setAttribute("x", "100");
                    rect.setAttribute("y", "0");
                    rect.setAttribute("width", "100");
                    rect.setAttribute("height", "100");
                    rect.setAttribute("fill", "red");
                    $('svg').append(rect);
            })
        </script>
    </head>
    <body>
        <svg viewbox="0 0 200 100" width="200px" height="100px">
            <rect x='0px' y='0px' height='100px' width='100px' fill='blue' />
        </svg>
    </body>
</html>

نصائح أخرى

أولاً ، تفتقد إلى HTML5 Doctype الذي يتم تنفيذه مثل ذلك

<!DOCTYPE html>

في الجزء العلوي من المستند الخاص بك.

ثم تحتاج إلى إضافة مستند جاهز!

$(document).ready(function(){
    //The code here runs when the document is fully loaded into the DOM.
    //Create a blank rect, add its attributes
    the_box = $("<rect/>")
      .attr('x','100px').attr('y','0px')
      .attr('height','100px').attr('width','100px')
      .attr('fill','red');

      //Append the jQuery variable to the selector.
      $('svg[viewbox]').append(the_box);
});

امنح ذلك.

في وقت متأخر قليلاً ، ولكن بدلاً من إضافة مساحة الاسم إلى المستند باستخدام jQuery ، يمكنك إضافته كسممة على <svg> بطاقة شعار:

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300px 600px">
  ...
</svg>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top