jquery ajouter de ne pas travailler avec un élément svg?

En supposant que cela:

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

Pourquoi ne puis-je pas voir quoi que ce soit?

Quel navigateur ?

OriginalL'auteur | 2010-09-04

233

Lorsque vous passez à une majoration de la chaîne en $, c'est analysée comme du HTML à l'aide du navigateur innerHTML propriété sur un <div> (ou autre récipient adapté pour les cas spéciaux comme <tr>). innerHTML peut pas analyser SVG ou d'autres non-contenu HTML, et même si elle le pouvait, elle ne serait pas en mesure de dire que <circle> était censé être dans la SVG d'espace de noms.

innerHTML n'est pas disponible sur SVGElement—c'est une propriété de La seulement. Il n'y a actuellement un innerSVG de la propriété ou de l'autre façon(*) pour analyser le contenu dans un SVGElement. Pour cette raison, vous devez utiliser les DOM-style méthodes. jQuery ne vous donne pas un accès facile à l'espace de noms méthodes nécessaires pour créer des éléments SVG. Vraiment jQuery n'est pas conçu pour une utilisation avec SVG, et de nombreuses opérations peuvent échouer.

HTML5 promesses pour vous permettre d'utiliser <svg> sans xmlns à l'intérieur d'une plaine HTML (text/html) document à l'avenir. Mais c'est juste un analyseur de hack(**), le contenu SVG sera toujours SVGElements dans le SVG espace de noms, et pas Élémentshtml, de sorte que vous ne serez pas en mesure d'utiliser innerHTML même s'ils look comme une partie d'un document HTML.

Cependant, aujourd'hui, pour les navigateurs, vous devez utiliser XHTML (bien servi que application/xhtml+xml; enregistrer avec le .xhtml extension de fichier de test local) pour obtenir SVG de travailler à tous. (Il sorte de sens de toute façon; SVG est un correctement norme XML.) Cela signifie que vous auriez à échapper à la < symboles à l'intérieur de votre bloc de script (ou le mettre dans une section CDATA), et inclure le XHTML xmlns déclaration. exemple:
```
<!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>
```
*: bien, il y a DOM Niveau 3 LS du parseWithContext, mais l'appui de navigateur est très pauvre. Modifier pour ajouter: toutefois, si vous ne pouvez pas injecter de la balise dans une SVGElement, vous pouvez injecter une nouvelle SVGElement dans un HTMLElement à l'aide de innerHTML, puis de les transférer à la cible souhaitée. Il va probablement être un peu plus lent:
```
<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>
```
**: Je déteste la façon dont les auteurs de HTML5 semblent avoir peur de XML et déterminé au chausse-pied XML basés sur des caractéristiques dans le crufty désordre qu'est le HTML. XHTML résolu ces problèmes il y a des années.

Cette réponse est toujours d'actualité! J'ai juste eu un bug bizarre où les éléments à afficher dans le Chrome élément de l'inspecteur, mais ne serait pas rendu. Si je RMB>edit as html sur la balise html et appuyez sur entrée tout s'affiche (mais tous les écouteurs d'événements disparaissent). Après la lecture de cette réponse, j'ai changé mon createElement appels à createElementNS et maintenant tout fonctionne!
Vous pouvez manipuler les éléments SVG avec jquery une fois qu'ils sont créés à l'aide de la méthode DOM createElementNS. Vous pouvez modifier la makeSVG fonction de 'return $(el)" et maintenant, vous avez un élément svg qui peuvent utiliser les méthodes jquery.
Ah! C'est pourquoi il ne fonctionne pas. J'ai essayé la même chose avec les deux bibliothèques différentes, l'une en jQuery et un D3.js. J'ai eu exactement sur le même sortie de la source en HTML en utilisant les deux, mais le jQuery éléments générés ne serait pas rendre tout le D3-générés fait! Je recommande d'utiliser D3: d3.select('body').append('svg').attr('width','100%');
DOM Niveau 3 LS ne l'a jamais fait pour les navigateurs. À l'origine Mozilla-seulement DOMParser est maintenant plus largement pris en charge, bien que, et jQuery a $.parseXML.
C'est toujours d'actualité. bobince déteste le gâchis de HTML5, je déteste le gâchis de tout le web, parce que nulle part, vous pouvez trouver le bon code sans hacks en raison de ce désordre. WWW devrait être renommé WWM World Wide Mess.

OriginalL'auteur bobince
136

La accepté de répondre à montre trop compliqué. Comme Forresto revendications sa réponse, "il ne semble pas à les ajouter dans les DOM explorer, mais pas sur l'écran" et la raison pour ce qui est des espaces de noms différents pour le html et svg.

La méthode la plus simple solution de contournement consiste à "actualiser" ensemble svg. Après l'ajout de cercle (ou d'autres éléments), utilisez ceci:
```
$("body").html($("body").html());
```
Cela fait l'affaire. Le cercle est à l'écran.

Ou si vous le souhaitez, utiliser un div conteneur:
```
$("#cont").html($("#cont").html());
```
Et enveloppez votre svg à l'intérieur du conteneur div:
```
<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>
```
Fonctionnel exemple:

http://jsbin.com/ejifab/1/edit

Les avantages de cette technique:
- vous pouvez modifier le format svg (qui est déjà dans les DOM), par exemple. créé à l'aide de Raphaël ou comme dans votre exemple "codés en dur" sans script.
- vous pouvez ajouter un élément complexe de structures comme des chaînes de caractères par exemple. $('svg').prepend('<defs><marker></marker><mask></mask></defs>'); comme vous le faites en jQuery.
- après que les éléments sont ajoutés et visible sur l'écran à l'aide $("#cont").html($("#cont").html()); leurs attributs peuvent être modifiés à l'aide de jQuery.
EDIT:

La technique ci-dessus fonctionne avec des "codés en dur" ou DOM manipulées ( = document.createElementNS etc.) SVG n'. Si Raphaël est utilisé pour la création des éléments, (d'après mes tests) le lien entre Raphael objets SVG et les DOM est cassé, si $("#cont").html($("#cont").html()); est utilisé. La solution de contournement est de ne pas utiliser $("#cont").html($("#cont").html()); à tous et au lieu d'utiliser mannequin document SVG.

Ce mannequin SVG est d'abord une représentation textuelle du document SVG et contient uniquement les éléments qui sont nécessaires. Si nous voulons par exemple. pour ajouter un élément de filtre à Raphaël document, le mannequin peut être quelque chose comme <svg id="dummy" style="display:none"><defs><filter></filter></defs></svg>. La représentation textuelle est d'abord converti en DOM à l'aide de jQuery $("body").append() de la méthode. Et lorsque l' (filter element) est dans les DOM, il peut être interrogé à l'aide de la norme méthodes jQuery et annexé le principal document SVG qui est créé par Raphael.

Pourquoi ce mannequin est nécessaire? Pourquoi ne pas ajouter un élément de filtre strictement à Raphaël document créé? Si vous essayez à l'aide par exemple. $("svg").append("<circle ... />"), il est créé comme élément html et rien n'est à l'écran, comme décrit dans les réponses. Mais si l'ensemble du document SVG est ajouté, puis le navigateur gère automatiquement l'espace de noms de la conversion de tous les éléments dans le document SVG.

Un exemple éclairer la technique:
```
//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>';

//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)");
```
Plein travail de démonstration de cette technique est ici: http://jsbin.com/ilinan/1/edit.

( J'ai (encore) aucune idée, pourquoi $("#cont").html($("#cont").html()); ne fonctionne pas lors de l'utilisation de Raphaël. Il serait très court hack. )

Merci, de votre façon de l'approche de trop travaillé.
Je suis avec mon (fait Maison) solution pour la manipulation de SVG et ont le même Problème que Raphaël, lors de l'utilisation de la "ré-truc" $(#image).code html ..., mais ma solution a été de re-init mis en cache certains éléments SVG (marquage rectangle, transformataion et ainsi de suite)
Vous êtes un magicien. J'ai été à la recherche à la accepté de répondre et j'étais comme un homme, cela va être une douleur. Ensuite, j'ai vu cela et c'est tout ce que j'en ai besoin pour dans une ligne courte. Merci!!!!
C'ÉTAIT, ME faisant PERDRE MON BILLES... je pensais comme par magie utiliser js DOM elms sur le SVG espace de noms, comme on pourrait le penser... mais j'ai l'inspecteur de balises à reconnaître les insertions... mais pas de dés jusqu'à maintenant!
A très bien fonctionné pour moi lors de l'ajout de mon polygone et le chemin des balises pour un nouveau parent balise svg. Merci!

OriginalL'auteur Timo Kähkönen
36

De plus en plus populaire D3 bibliothèque gère les bizarreries de l'ajout/la manipulation de svg très bien. Vous pouvez envisager d'utiliser plutôt le jQuery hacks mentionnés ici.

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");
```
belle réponse. il m'a aidé pour certaines question ici.
jQuery également étouffe sur la configuration de/pour obtenir des classes de SVG. Juste un aparté.
Merci!!!! Belle réponse!

OriginalL'auteur nategood
25

JQuery ne peut pas ajouter des éléments à <svg> (il ne semble pas à les ajouter dans les DOM explorer, mais pas sur l'écran).

Une solution de contournement consiste à ajouter un <svg> avec tous les éléments que vous avez besoin de la page, puis de modifier les attributs des éléments à l'aide de .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/

Merci, m'a beaucoup aidé! C'est une très bonne approche. Au lieu d'ajouter <circle> ou d'autres éléments individuellement à l'aide de complexité et lenteur des DOM-méthodes (par exemple. createDocumentFragment() ou createElementNS()), ajouter l'ensemble du document svg dans du conteneur. Au lieu de $('body'), il peut être bien sûr, certains $('div') également. Et après que le document svg est sur les DOM et peut être interrogé de manière connue à l'aide par exemple. $('c').attr('fill','rouge').
J'ai fait un exemple supplémentaire de ceci: jsbin.com/inevaz/1 . Il obtient tigre.svg code source à partir d'internet à iframe et il peut être copié et Collé à textarea. Le contenu du textarea est ensuite utilisé comme source pour les svg qui est alors accessible par DOM (pour changer de style de trait).
C'est super, je ne sais pas pourquoi tout le monde vote pour les autres réponses qui ne fonctionnent tout simplement pas.
C'était la meilleure réponse pour moi aussi. J'ai besoin d'un svg avec un <utiliser xlink:href="#icône"> et ce fut la plus courte de travail réponse.

OriginalL'auteur forresto
12

Je n'ai pas vu quelqu'un à la mention de cette méthode, mais document.createElementNS() est utile dans ce cas.

Vous pouvez créer les éléments à l'aide de vanille Javascript, DOM normal nœuds avec l'espace de noms correct et jQuery-identifier à partir de là. Comme:
```
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);
```
Le seul inconvénient est que vous devez créer chaque élément SVG avec le droit de l'espace de noms individuellement ou il ne fonctionnera pas.

Timo réponse (en haut voté) a travaillé dans Chrome, mais pas IE. Cette réponse a résolu le problème pour les deux navigateurs!
Nice! Bon à savoir

OriginalL'auteur Chris Dolphin

Je peux voir cercle dans firefox, faire 2 choses:

1) changement de nom du fichier de html à xhtml

2) Modifier le script pour

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

Huit ans plus tard et c'est toujours utile!

OriginalL'auteur Topera

@Chris-dauphin 's réponse mais en utilisant la fonction d'assistance:

//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);

Vous pouvez bien sûr aussi faire: $svg.append($s('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'));

OriginalL'auteur Jonas Berlin

4

Si la chaîne que vous devez ajouter est le SVG et vous ajoutez le bon espace de noms, vous pouvez analyser la chaîne de caractères au format XML et l'ajouter à la mère.
```
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))
```
OriginalL'auteur jdesjean
3

La accepté de répondre par Bobince est un court, solution portable. Si vous avez besoin non seulement ajouter SVG, mais également les manipuler, vous pouvez essayer de le La bibliothèque JavaScript "Pablo" (je l'ai écrit). Il va se sentir familier pour les utilisateurs de jQuery.

Votre exemple de code pourrait alors ressembler à ceci:
```
$(document).ready(function(){
    Pablo("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
```
Vous pouvez également créer des éléments SVG à la volée, sans en préciser le balisage:
```
var circle = Pablo.circle({
    cx:100,
    cy:50,
    r:40
}).appendTo('svg');
```
OriginalL'auteur Premasagar
1

Je voudrais suggérer qu'il pourrait être préférable d'utiliser de l'ajax et de charge de l'élément svg à partir d'une autre page.
```
$('.container').load(href + ' .svg_element');
```
Où href est l'emplacement de la page avec le svg. De cette façon, vous pouvez éviter toute nervosité des effets qui peuvent se produire à partir de remplacer le contenu html. Aussi, n'oubliez pas de déballer le svg après il est chargé:
```
$('.svg_element').unwrap();
```
OriginalL'auteur Dan185

 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.

OriginalL'auteur 4baad4

-1

Ce travail est pour moi aujourd'hui avec 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");
}
```
Fait:

Ce n'est pas éléments SVG vous êtes à la précédente, c'est le contenu du texte.
Que peut-être, mais elle a rendu après chargement initial de la page de manière statique inline SVG.
Alors quoi, c'est pas la question posée, qui est d'environ svg éléments, et pas le contenu du texte.
$(this).clone() est le clonage d'un élément SVG (et c'est les enfants s'il y en a). Regarder au-delà de l'utilisation de text(). Je vais prendre un seul tspan qui avait "Votre Nouveau" chez elle, et de se retrouver avec deux tspans, l'un avec "Votre" (noir) et l'un des "Nouveaux" (bleu w/ line-through). Jeez, en baisse à partir de 0 vote à -1 🙁

OriginalL'auteur paul_h
-1

Un moyen beaucoup plus simple est de tout simplement de générer votre SVG dans une chaîne de caractères, créer un wrapper de l'élément HTML et insérez la chaîne svg dans l'élément HTML à l'aide $("#wrapperElement").html(svgString). Cela fonctionne très bien sur Chrome et Firefox.

pas de travail pour moi, essayé ce couple de fois

OriginalL'auteur Jakob Jenkov

Vous devez vous connecter pour publier un commentaire.