Dynamisch ändern, text SVG-Datei

Habe ich die externe SVG-Datei enthält den 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>

Muss ich den text dynamisch ändern Punktzahl von JS-Datei habe ich bereits versucht, aber nicht in der Lage, den text zu ändern sich dynamisch.
was ich versucht habe ist:-

var list = layerNamed('score').getElementsByTagName("g");
var textNode = document.createTextNode("Score:-1");
list.appendChild(textNode);
  • Nicht verwandt , aber wenn Sie gehen, um mit zu arbeiten svg ausgiebig probieren d3.js.
  • Longson ich habe versucht, über den text auch, aber hat nicht funktioniert..
InformationsquelleAutor Mukesh Gupta | 2016-02-09
  1. 3

    Können Sie den folgenden code verwenden, um den text zu ändern in vorhandenen text element.

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

    Beispiel unten:

    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

    Gibt es ein paar Probleme in Ihrem code.

    1) layerNamed('score').getElementsByTagName("g") gibt eine Sammlung aller Elemente mit dem angegebenen tag-Namen als NodeList-Objekt. Die Knoten zugegriffen werden kann, die durch index-Nummern. Der index beginnt bei 0.

    So, um auf die erste g-element, sollten Sie den code wie unten gezeigt.

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

    2) Es besteht keine Notwendigkeit für das anfügen eines neuen text-element für die Aktualisierung der text-Inhalte. Nur Zugriff auf den text und tspan und Aktualisierung der text-Inhalte von 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

    Für Ihren konkreten Beispiel, hier ist, wie Sie den text festlegen, mit beiden raw-JavaScript und 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
Schreibe einen Kommentar