ti-enxame.com

jquery append não está funcionando com o elemento svg?

Assumindo isso:

<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>

Por que eu não vejo nada?

193
1521237

Quando você passa uma string de marcação para $, ela é analisada como HTML usando a propriedade innerHTML do navegador em um <div> (ou outro container adequado para casos especiais como <tr>). innerHTML não pode analisar SVG ou outro conteúdo não HTML e, mesmo que pudesse, não seria capaz de dizer que <circle> deveria estar no namespace SVG.

innerHTML não está disponível no SVGElement - é uma propriedade apenas do HTMLElement. Nem existe atualmente uma propriedade innerSVG ou outra maneira (*) para analisar o conteúdo em um SVGElement. Por esse motivo, você deve usar métodos de estilo DOM. O jQuery não oferece acesso fácil aos métodos de namespace necessários para criar elementos SVG. Realmente, o jQuery não é projetado para uso com o SVG e muitas operações podem falhar.

O HTML5 promete permitir que você use <svg> sem um xmlns dentro de um documento HTML simples (text/html) no futuro. Mas isso é apenas um hack parser (**), o conteúdo SVG ainda será SVGElements no namespace SVG e não HTMLElements, então você não poderá usar innerHTML mesmo que eles olha como parte de um documento HTML.

No entanto, para os navegadores de hoje, você deve usar X HTML (adequadamente servido como application/xhtml+xml; salvar com a extensão de arquivo .xhtml para testes locais) para obter SVG para trabalhar em tudo. (De certa forma, faz sentido: o SVG é um padrão adequadamente baseado em XML.) Isso significa que você teria que escapar dos símbolos < dentro do bloco de script (ou incluir em uma seção CDATA) e incluir a declaração XHTML xmlns. exemplo:

<!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>

*: bem, há o LS do Nível 3 do DOM parseWithContext , mas o suporte ao navegador é muito ruim. Editar para adicionar: no entanto, embora não seja possível injetar marcação em um SVGElement, você pode injetar um novo SVGElement em um HTMLElement usando innerHTML e, em seguida, transferi-lo para o destino desejado. Provavelmente será um pouco mais lento:

<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>

**: Eu odeio a maneira como os autores do HTML5 parecem estar com medo do XML e determinados a usar recursos baseados em XML na bagunça que é HTML. XHTML resolveu esses problemas anos atrás.

236
bobince

O resposta aceita mostra um caminho muito complicado. Como Forresto afirma em sua resposta , " parece adicioná-los no DOM Explorer, mas não na tela " e a razão para isso é namespaces diferentes para html e svg.

A solução mais fácil é "atualizar" todo svg. Depois de anexar o círculo (ou outros elementos), use isto:

$("body").html($("body").html());

Isso faz o truque. O círculo está na tela.

Ou se você quiser, use um div contêiner:

$("#cont").html($("#cont").html());

E envolva seu svg dentro do div do container:

<div id="cont">
    <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>
</div>

O exemplo funcional:
http://jsbin.com/ejifab/1/edit

As vantagens desta técnica:

  • você pode editar o svg existente (que já está no DOM), por exemplo. criado usando Raphael ou como no seu exemplo "codificado" sem script.
  • você pode adicionar estruturas de elementos complexos como strings, por exemplo. $('svg').prepend('<defs><marker></marker><mask></mask></defs>'); como você faz no jQuery.
  • depois que os elementos são acrescentados e tornados visíveis na tela usando $("#cont").html($("#cont").html()); seus atributos podem ser editados usando jQuery.

EDITAR:

A técnica acima trabalha apenas com SVG "codificado" ou DOM manipulado (= document.createElementNS etc.). Se Raphael for usado para criar elementos, (de acordo com meus testes) a vinculação entre objetos Raphael e DOM SVG será interrompida se $("#cont").html($("#cont").html()); for usado. A solução para isso é não usar $("#cont").html($("#cont").html()); e, em vez disso, usar um documento SVG fictício.

Esse SVG simulado é primeiro uma representação textual do documento SVG e contém apenas os elementos necessários. Se quisermos, por exemplo. para adicionar um elemento de filtro ao documento do Raphael, o manequim pode ser algo como <svg id="dummy" style="display:none"><defs><filter><!-- Filter definitons --></filter></defs></svg>. A representação textual é primeiro convertida em DOM usando o método $ ("body"). Append () do jQuery. E quando o elemento (filtro) está no DOM, ele pode ser consultado usando os métodos jQuery padrão e anexado ao documento SVG principal que é criado pelo Raphael.

Por que esse boneco é necessário? Por que não adicionar um elemento de filtro estritamente ao documento criado por Raphael? Se você tentar usando por exemplo. $("svg").append("<circle ... />"), é criado como elemento html e nada está na tela como descrito nas respostas. Mas, se todo o documento SVG for anexado, o navegador manipula automaticamente a conversão do espaço de nomes de todos os elementos no documento SVG .

Um exemplo ilumina a técnica:

// Add Raphael SVG document to container element
var p = Raphael("cont", 200, 200);
// Add id for easy access
$(p.canvas).attr("id","p");
// Textual representation of element(s) to be added
var f = '<filter id="myfilter"><!-- filter definitions --></filter>';

// Create dummy svg with filter definition 
$("body").append('<svg id="dummy" style="display:none"><defs>' + f + '</defs></svg>');
// Append filter definition to Raphael created svg
$("#p defs").append($("#dummy filter"));
// Remove dummy
$("#dummy").remove();

// Now we can create Raphael objects and add filters to them:
var r = p.rect(10,10,100,100);
$(r.node).attr("filter","url(#myfilter)");

Demonstração de trabalho completa desta técnica está aqui: http://jsbin.com/ilinan/1/edit .

(Eu ainda não tenho ideia, porque $("#cont").html($("#cont").html()); não funciona ao usar o Raphael. Seria muito curto.)

137
Timo Kähkönen

A cada vez mais popular D biblioteca manipula as esquisitices de acrescentar/manipular svg muito bem. Você pode querer considerar usá-lo em oposição aos hacks jQuery mencionados aqui.

HTML

<svg xmlns="http://www.w3.org/2000/svg"></svg>

Javascript

var circle = d3.select("svg").append("circle")
    .attr("r", "10")
    .attr("style", "fill:white;stroke:black;stroke-width:5");
36
nategood

JQuery não pode anexar elementos a <svg> (parece adicioná-los no DOM Explorer, mas não na tela).

Uma solução é anexar um <svg> com todos os elementos que você precisa para a página e, em seguida, modificar os atributos dos elementos usando .attr().

$('body')
  .append($('<svg><circle id="c" cx="10" cy="10" r="10" fill="green" /></svg>'))
  .mousemove( function (e) {
      $("#c").attr({
          cx: e.pageX,
          cy: e.pageY
      });
  });

http://jsfiddle.net/8FBjb/1/

25
forresto

Eu não vi alguém mencionar este método, mas document.createElementNS() é útil nesta instância.

Você pode criar os elementos usando o Javascript do Vanilla como nós DOM normais com o namespace correto e, em seguida, jQuery-os-los de lá. Igual a:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
    circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');

var $circle = $(circle).attr({ //All your attributes });

$(svg).append($circle);

A única desvantagem é que você deve criar cada elemento SVG com o namespace correto individualmente ou não funcionará.

14
Chris Dolphin

Encontrei uma maneira fácil que funciona com todos os navegadores que eu tenho (Chrome 49, Edge 25, Firefox 44, IE11, Safari 5 [Win], Safari 8 (MacOS)):

// Clean svg content (if you want to update the svg's objects)
// Note : .html('') doesn't works for svg in some browsers
$('#svgObject').empty();
// add some objects
$('#svgObject').append('<polygon class="svgStyle" points="10,10 50,10 50,50 10,50 10,10" />');
$('#svgObject').append('<circle class="svgStyle" cx="100" cy="30" r="25"/>');

// Magic happens here: refresh DOM (you must refresh svg's parent for Edge/IE and Safari)
$('#svgContainer').html($('#svgContainer').html());
.svgStyle
{
  fill:cornflowerblue;
  fill-opacity:0.2;
  stroke-width:2;
  stroke-dasharray:5,5;
  stroke:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="svgContainer">
  <svg id="svgObject" height="100" width="200"></svg>
</div>

<span>It works if two shapes (one square and one circle) are displayed above.</span>
9
Matthieu Charbonnier

Eu posso ver o círculo no firefox, fazendo duas coisas:

1) Renomeando o arquivo de html para xhtml

2) Mude o script para

<script type="text/javascript">
$(document).ready(function(){
    var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    obj.setAttributeNS(null, "cx", 100);
    obj.setAttributeNS(null, "cy", 50);
    obj.setAttributeNS(null, "r",  40);
    obj.setAttributeNS(null, "stroke", "black");
    obj.setAttributeNS(null, "stroke-width", 2);
    obj.setAttributeNS(null, "fill", "red");
    $("svg")[0].appendChild(obj);
});
</script>
8
Topera

Baseado na resposta do @ chris-dolphin, mas usando a função auxiliar:

// Creates svg element, returned as jQuery object
function $s(elem) {
  return $(document.createElementNS('http://www.w3.org/2000/svg', elem));
}

var $svg = $s("svg");
var $circle = $s("circle").attr({...});
$svg.append($circle);
5
Jonas Berlin

Se a string que você precisa anexar for SVG e você adicionar o namespace adequado, será possível analisar a string como XML e anexá-la ao pai.

var xml = jQuery.parseXML('<circle xmlns="http://www.w3.org/2000/svg" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
$("svg").append(xml.documentElement))
4
jdesjean

A resposta aceita por Bobince é uma solução curta e portátil. Se você não precisa apenas anexar SVG mas também manipulá-lo, você pode tentar o biblioteca JavaScript "Pablo" (eu escrevi). Será familiar para os usuários do jQuery.

Seu código de exemplo seria semelhante a:

$(document).ready(function(){
    Pablo("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});

Você também pode criar elementos SVG em tempo real, sem especificar a marcação:

var circle = Pablo.circle({
    cx:100,
    cy:50,
    r:40
}).appendTo('svg');
3
Premasagar

Eu sugeriria que poderia ser melhor usar ajax e carregar o elemento svg de outra página.

$('.container').load(href + ' .svg_element');

Onde href é a localização da página com o svg. Desta forma, você pode evitar quaisquer efeitos nervosos que podem ocorrer a partir da substituição do conteúdo html. Além disso, não esqueça de desembrulhar o svg depois que ele for carregado:

$('.svg_element').unwrap();
1
Dan185

Isso está funcionando para mim hoje com FF 57:

function () {
    // JQuery, today, doesn't play well with adding SVG elements - tricks required
    $(selector_to_node_in_svg_doc).parent().prepend($(this).clone().text("Your"));
    $(selector_to_node_in_svg_doc).text("New").attr("x", "340").text("New")
        .attr('stroke', 'blue').attr("style", "text-decoration: line-through");
}

Faz:

this SVG image as seen in Firefox 57

0
paul_h
 var svg; // if you have variable declared and not assigned value.
 // then you make a mistake by appending elements to that before creating element    
 svg.appendChild(document.createElement("g"));
 // at some point you assign to svg
 svg = document.createElementNS('http://www.w3.org/2000/svg', "svg")
 // then you put it in DOM
 document.getElementById("myDiv").appendChild(svg)
 // it wont render unless you manually change myDiv DOM with DevTools

// to fix assign before you append
var svg = createElement("svg", [
    ["version", "1.2"],
    ["xmlns:xlink", "http://www.w3.org/1999/xlink"],
    ["aria-labelledby", "title"],
    ["role", "img"],
    ["class", "graph"]
]);
function createElement(tag, attributeArr) {
      // .createElementNS  NS is must! Does not draw without
      let elem = document.createElementNS('http://www.w3.org/2000/svg', tag);             
      attributeArr.forEach(element => elem.setAttribute(element[0], element[1]));
      return elem;
}
// extra: <circle> for example requires attributes to render. Check if missing.
0
4baad4