SVG中的内联文本编辑

我在网站中呈现内联SVG，并且必须允许用户以所见即所得的方式在该SVG中添加和修改文本。基本上我需要一些像svg-edit一样的东西。但是，我不需要完全所见即所得的编辑器，而只需要内联文本编辑部分。我已经看过svg-edit的源代码，并且似乎很难仅提取它的那部分内容。SVG中的内联文本编辑

所以我正在寻找的是一种简单的方法（可能与第三方库）来实现内联SVG文本编辑。我已经考虑过在关注时用HTML文本输入替换SVG文本，但是在编辑模式下，文本必须完全按照它在最终SVG中的呈现方式呈现。

来源

2012-02-16 Sebastian Noack

下面是一个可以从textnode中获取和更改文本的示例。我建议编写一个JavaScript函数，将可编辑的div或类似的东西代替textnode，并在保存时用div的innerHTML替换textnode。

请您在成功时发布最终代码。

<html> 
    <head> 
    <script> 
    function svgMod(){ 
     var circle1 = document.getElementById("circle1"); 
     circle1.style.fill="blue"; 
    } 
    function svgMod2(){ 
     var circle1 = document.getElementById("circle1"); 
     t1.textContent="New content"; 
    } 
    </script> 
    </head> 
    <body> 
    <svg id="svg1" xmlns="http://www.w3.org/2000/svg" style="width: 800; height: 1000"> 
    <circle id="circle1" r="100" cx="134" cy="134" style="fill: red; stroke: blue; stroke-width: 2"/> 
    <text id="t1" x="50" y="120" onclick="alert(t1.textContent)">Example SVG text 1</text> 
    </svg> 
    <button onclick=circle1.style.fill="yellow";>Click to change to yellow</button> 
    <button onclick=javascript:svgMod();>Click to change to blue</button> 
    <button onclick=javascript:svgMod2();>Click to change text</button> 
    </body> 
</html>

来源

2012-04-13 12:07:02 peter

我一直在寻找类似的东西，但没有发现任何东西，所以我和我的硕士论文的合作伙伴决定写我们自己的解决方案。目前它在Chrome中运行得非常好，在Firefox中运行得也很好。

演示：http://engelfrost.github.io/svg-input-elements/

代码：https://github.com/engelfrost/svg-input-elements

来源

2012-05-10 06:56:11

我做了，无论你在SVG单击创建可编辑的文本小提琴。最后一步是抓住HTML文本并将其放入SVG元素中。

http://jsfiddle.net/brx3xm59/

代码如下：

var mousedownonelement = false; 

window.getlocalmousecoord = function (svg, evt) { 
    var pt = svg.createSVGPoint(); 
    pt.x = evt.clientX; 
    pt.y = evt.clientY; 
    var localpoint = pt.matrixTransform(svg.getScreenCTM().inverse()); 
    localpoint.x = Math.round(localpoint.x); 
    localpoint.y = Math.round(localpoint.y); 
    return localpoint; 
}; 

window.createtext = function (localpoint, svg) { 
    var myforeign = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject') 
    var textdiv = document.createElement("div"); 
    var textnode = document.createTextNode("Click to edit"); 
    textdiv.appendChild(textnode); 
    textdiv.setAttribute("contentEditable", "true"); 
    textdiv.setAttribute("width", "auto"); 
    myforeign.setAttribute("width", "100%"); 
    myforeign.setAttribute("height", "100%"); 
    myforeign.classList.add("foreign"); //to make div fit text 
    textdiv.classList.add("insideforeign"); //to make div fit text 
    textdiv.addEventListener("mousedown", elementMousedown, false); 
    myforeign.setAttributeNS(null, "transform", "translate(" + localpoint.x + " " + localpoint.y + ")"); 
    svg.appendChild(myforeign); 
    myforeign.appendChild(textdiv); 

}; 

function elementMousedown(evt) { 
    mousedownonelement = true; 
} 


$(('#thesvg')).click(function (evt) { 
    var svg = document.getElementById('thesvg'); 
    var localpoint = getlocalmousecoord(svg, evt); 
    if (!mousedownonelement) { 
     createtext(localpoint, svg); 
    } else { 
     mousedownonelement = false; 
    } 
});

来源

2014-10-30 03:38:09

我增加了一些更多的功能到这一点，喜欢的是可以点击的文本节点进行编辑，输入/ ESC接受/取消等HTTP： //jsfiddle.net/gordonwoodhull/undr1kx6/44/ – Gordon 2017-01-20 19:32:17

SVG中的内联文本编辑

回答

相关问题