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

我在嵌入式SVG中进行了一些查找和替换。打印服务的一部分，我正在创建。我有像{name}，{title}，{phone}等SVG文本标记嵌入在网站中的SVG中的实时编辑文本

我写了一个脚本来替换这些值，它实时更新嵌入式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标识，并以这种方式更新节点值，但是，我有严重的编码块，并且不能开始它！

来源

2011-03-18 Eric Warnke

只要你知道，IE浏览器的渲染SVG在浏览器的支持非常有限。 – 2011-03-18 23:29:03

是的，我知道它的确如此。我想我最终会使用svgweb。实际上，虽然我不支持IE客户端。这将主要是学生使用我的服务。 – 2011-03-19 03:40:29

管理修剪下来到这一点：

// 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的:)

来源

2011-03-19 03:55:07

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

回答

相关问题