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中的內聯文本編輯

回答

相關問題