Question

我在嵌入式SVG中进行一些查找和替换。我正在创建的打印服务的Web的一部分。我在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中进行文本替换的人：）

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

1 个答案: