Question

I’m doing some find and replace in embedded SVGs. Part of a web to print service I’m creating.
I have text tags inside the SVG like {name}, {title}, {phone}, etc.

I wrote a script to replace these values and it live updates the embedded SVG. It currently works alright.

It’s using the jQuery SVG plugin to load the SVG.

// Callback after loading external document
function loadDone(svg, error) {
  svg.configure({viewBox: '0 0 315 180', width: 579, height: 331}, true); //resize the svg. viewBox must be the same size as the initial width defined in the SVG
  var textElems = document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'tspan');
  var doc = document.getElementById('svgload').contentDocument;

  for (var i = 0; i < textElems.length; i++) {
    var id = textElems[i].childNodes[0].nodeValue;
    id = id.replace("{",""); //remove brackets {}
    id = id.replace("}","");
    alert(id);
    $("#formContainer").append('<p>' + capitalize(id) + ': <input type="text" id="' + id + '" class="replace" />\n');
    $("#formContainer").append('<input type="hidden" id="' + id + 'PrevVal" value="{' + id + '}" /></p>');
  }
    $('.replace').keyup(function() {
      var prevValID = $(this).attr("id") + "PrevVal"; //determine the hidden input id
      var oldVal = $("#"+prevValID).val(); //set oldVal to the hidden input value, first time it's {id}   
      var currentVal = $(this).val(); //set the currentVal to the user inputted value         
      changeText(oldVal,currentVal); //swap the oldVal with the currentVal
      $('#'+prevValID).attr("value",currentVal); //set the hidden input value to the last inputted user value

      svg.configure({viewBox: '0 0 315 180', width: 579, height: 331}, true); //"resize" to svg to clear the text. some browsers break the new text until the svg is "zoomed", or in this case, resized         
  });

  function changeText(oldVal,newVal) { //swap the values inside the SVG file
    for (var i = 0; i < textElems.length; i++) {
      if (textElems[i].childNodes[0].nodeValue == oldVal) {
        textElems[i].childNodes[0].nodeValue = newVal;
      }
    }
  } 
}
function capitalize(str) {  //capitalize first letter of words
  var firstLetter = str.slice(0,1);
  return firstLetter.toUpperCase() + str.substring(1);
}

There are some bugs though. For example, since I’m creating hidden divs to store the previous value of the SVG text one can create a situation where typing the same thing into two text boxes creates two identical IDs and then further typing updates both text elements in the embedded SVG. It also doesn’t like tags that have spaces in them, like {full name} versus {name}.

Any suggestions on how to clean this whole thing up? I know I should be able to detect tags (searching for {}) and then get the text or tspan id associated with them and update the node value that way, however, I’ve got severe coding block and can’t quite start on it!

Answer 1

Managed to trim it down to this:

// Callback after loading external document
function loadDone(svg, error) {
  svg.configure({viewBox: '0 0 315 180', width: 579, height: 331}, true); //resize the svg. viewBox must be the same size as the initial width defined in the SVG
  var textElems = document.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'tspan');
  var doc = document.getElementById('svgload').contentDocument;

  for (var i = 0; i < textElems.length; i++) {
    var textID = textElems[i].getAttribute('id');
    var textValue = textElems[i].childNodes[0].nodeValue;
      textValue = textValue.replace("{",""); //remove brackets {}
      textValue = textValue.replace("}","");
    $("#formContainer").append('<p style="text-transform:capitalize;">' + textValue + ': <input type="text" id="' + textID + '" class="replace" />\n');
  }

    $('.replace').keyup(function() {
      var textToChange = document.getElementById($(this).attr('id'));
      textToChange.childNodes[0].nodeValue = $(this).val();
      svg.configure({viewBox: '0 0 315 180', width: 579, height: 331}, true); //"resize" to svg to clear the text. some browsers break the new text until the svg is "zoomed", or in this case, resized
    });
}

And it’s doing exactly what I want.

Hopefully that helps anyone else looking to do text replacements in embedded SVG’s 🙂