's svg elemanı ile çalışmıyor ekleme jquery?

SORU

4 EYLÜL 2010, CUMARTESİ

's svg elemanı ile çalışmıyor ekleme jquery?

Bu varsayarsak:

<html>
<head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
 });
 </script>
</head>
<body>
 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
 </svg>
</body>

Neden hiçbir şey görmüyor musun?

CEVAP

4 EYLÜL 2010, CUMARTESİ

Zaman geçirmek bir biçimlendirme dizesi $, ayrıştırılmış olarak HTML tarayıcı kullanarak innerHTML özelliği <div> (veya başka uygun bir konteyner için özel durumlar gibi <tr>). innerHTML <circle> SVG ad olması gerektiğini söylemek mümkün olmazdı bile olmayan ya da HTML SVG diğer içerik ve ayrıştırabilir.

innerHTML SVGElement HTMLElement sadece bir özellik mevcut değil. Ne var şu anda innerSVG mülkiyet veya diğer bir şekilde(*) SVGElement içerik ayrıştırmak için. Bu nedenle DOM tarzı yöntemleri kullanmak gerekir. sen jQuery namespaced yöntemleri SVG öğeleri oluşturmak için gerekli kolay erişim vermez. Gerçekten bir WordPress kullanmak kullanım için tasarlanmış SVG ile değil pek çok işlem başarısız olabilir.

HTML5 düz bir HTML (text/html) içinde xmlns bir belge olmadan<svg> kullanmak için gelecek vaat ediyor. Ama bu sadece bir çözümleyici hack(**), SVG içerik yine de SVGElements içinde SVG ad ve HTMLElements, bu yüzden olacak kullanabilme innerHTML bile olsabakbir HTML belge parçası gibi.

Ancak, bugünün tarayıcılar için *X*HTML (düzgün application/xhtml xml; ile Kaydet .olarak görev kullanmalısınız yerel test için dosya uzantısı xhtml) tüm çalışma SVG. (Biraz mantıklı zaten yapar; SVG XML tabanlı düzgün bir standarttır.) Bu senaryoyu engellemek (ya da bir CDATA bölümü içine) içine < semboller kaçış ve XHTML dahil etmek zorundasın demektir xmlns beyan. örnek:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
    <svg id="s" xmlns="http://www.w3.org/2000/svg"/>
    <script type="text/javascript">
        function makeSVG(tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs)
                el.setAttribute(k, attrs[k]);
            return el;
        }

        var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
        document.getElementById('s').appendChild(circle);
        circle.onmousedown= function() {
            alert('hello');
        };
    </script>
</body></html>

*: iyi, parseWithContext ama tarayıcı desteği çok kötüdür DOM Düzey 3 MI var. Edit ekleme: bir SVGElement biçimlendirme içine enjekte edemezsin iken ancak, bir HTMLElement innerHTML, sonra istediğiniz hedef aktarmak kullanarak yeni bir SVGElement enjekte edebilirsin. Muhtemelen biraz daha yavaş olsa da olur:

<script type="text/javascript"><![CDATA[
    function parseSVG(s) {
        var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
        div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">' s '</svg>';
        var frag= document.createDocumentFragment();
        while (div.firstChild.firstChild)
            frag.appendChild(div.firstChild.firstChild);
        return frag;
    }

    document.getElementById('s').appendChild(parseSVG(
        '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/>'
    ));
]]></script>

**: HTML5 yazarları XML korkmuş gibi görünüyor ve HTML olduğunu crufty karışıklık içine XML tabanlı özellikleri ayakkabı çekeceği için kararlı bir şekilde nefret ediyorum. XHTML yıl önce bu sorunlar çözüldü.

Bunu Paylaş: