Modifier dynamiquement le texte d'un fichier SVG

J'ai externes SVG fichier qui contient le code

<g
     inkscape:groupmode="layer"
     id="layer9"
     inkscape:label="score"
     style="display:inline">
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        x="100.3568906"
        y="20.353357"
          id="text5833"
        sodipodi:linespacing="125%"><tspan
          sodipodi:role="line"
          id="tspan5834"
          x="300.3568906"
          y="20.353357">Score</tspan></text>

  </g>

J'ai besoin de changer dynamiquement le texte Score de fichier JS, j'ai déjà essayé, mais pas en mesure de modifier le texte de manière dynamique.
ce que j'ai essayé est:-

var list = layerNamed('score').getElementsByTagName("g");
var textNode = document.createTextNode("Score:-1");
list.appendChild(textNode);
  • Pas liées , mais si vous allez travailler avec svg largement essayer d3.js.
  • Longson j'ai essayé d'utiliser le texte aussi, mais ne fonctionne pas..
InformationsquelleAutor Mukesh Gupta | 2016-02-09
  1. 3

    Vous pouvez utiliser le code suivant pour modifier le texte à l'intérieur existant text élément.

    document.getElementById('textid').textContent = "new text";

    Exemple ci-dessous:

    JS:

    function changeText()
{
  document.getElementById('textid').textContent = "new text";
}

    HTML:

    <svg height="30" width="200">
  <text id="textid" x="0" y="15" fill="red">I love SVG!</text>
  Sorry, your browser does not support inline SVG.
</svg>

<button onclick="changeText()">Click here to change text</button>

    InformationsquelleAutor Sooraj Chandran
  2. 2

    Il y a quelques problèmes dans votre code.

    1) layerNamed('score').getElementsByTagName("g") renvoie une collection de tous les éléments avec le nom de la balise, comme un objet NodeList. Les nœuds peuvent être accessibles par des numéros d'index. L'indice commence à 0.

    Afin d'accéder à la première g élément de code comme indiqué ci-dessous.

    var list = layerNamed('score').getElementsByTagName("g")[0];

    2) Il n'est pas nécessaire pour l'ajout d'un nouvel élément de texte pour mettre à jour le contenu du texte. Juste accéder au texte et tspan et de mettre à jour le contenu du texte de tspan.

    var textNode = list.getElementsByTagName("text")[0].children[0];
textNode.textContent = "New Text";

    JS:

    var list = document.getElementsByTagName("g")[0]; //document.getElementById("#layer9");
var textNode = list.getElementsByTagName("text")[0].children[0];
textNode.textContent = "New Text";

    HTML:

    <svg height="30" width="800">
<g inkscape:groupmode="layer" id="layer9" inkscape:label="score" style="display:inline">
     <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" x="100.3568906" y="20.353357" id="text5833" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan5834" x="300.3568906" y="20.353357">Hello</tspan></text>

  </g>
</svg>

    InformationsquelleAutor Gilsha
  3. 1

    Pour votre exemple, voici comment définir le texte en utilisant les deux premières JavaScript et jQuery:

    updateText("tspan5834", "A different score");
//updateTextWithJQuery("tspan5834", "now using jquery"); //uncomment this line to see how jquery works

function updateText(tspanId, txt) {
  var spanEl = document.getElementById(tspanId);
  while( spanEl.firstChild ) {
    spanEl.removeChild( spanEl.firstChild );
  }
  spanEl.appendChild( document.createTextNode(txt) );
}

function updateTextWithJQuery(tspanId, txt) {
    $("#"+tspanId).text(txt);
}

    jsFiddle: https://jsfiddle.net/w91sn1dk/3/

    InformationsquelleAutor Ben