实时编辑嵌入网站中的 SVG 文本

Question

我正在嵌入式 SVG 中进行一些查找和替换。我正在创建的网络打印服务的一部分。 我在 SVG 中有文本标签，例如 {name}、{title}、{phone} 等。

我编写了一个脚本来替换这些值，并且它实时更新嵌入的 SVG。目前工作正常。

它使用 jQuery SVG 插件来加载 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);
}

但还是有一些错误。例如，由于我正在创建隐藏的 div 来存储 SVG 文本的先前值，因此可能会出现一种情况，即在两个文本框中键入相同的内容会创建两个相同的 ID，然后进一步键入会更新嵌入的 SVG 中的两个文本元素。它也不喜欢其中有空格的标签，例如 {full name} 与 {name}。

关于如何清理这整个事情有什么建议吗？我知道我应该能够检测标签（搜索 {}），然后获取与它们关联的文本或 tspan id 并以这种方式更新节点值，但是，我有严重的编码块，无法完全开始它！

Answer 1

设法将其精简为：

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

它正在做我想要的事情。

希望这可以帮助其他想要在嵌入式 SVG 中进行文本替换的人:)