Edición de texto en línea en SVG

Represento un SVG en línea en un sitio web, y tengo que permitir al usuario agregar y modificar textos en ese SVG, de forma WYSIWYG. Básicamente, necesito algo que funcione como svg-edit. Sin embargo, no necesito un editor WYSIWYG completo, sino solo la parte de edición de texto en línea. He visto el código fuente de svg-edit y parece ser muy difícil extraer solo esa parte de él.Edición de texto en línea en SVG

Así que lo que estoy buscando es una manera fácil (tal vez con una biblioteca de terceros) para implementar la edición de texto SVG en línea. Ya pensé en reemplazar el texto SVG con una entrada de texto HTML cuando estaba enfocado, pero el texto debe mostrarse en el modo de edición exactamente como se representa en el SVG resultante.

Fuente

2012-02-16 Sebastian Noack

Aquí hay un ejemplo en el que puede obtener y cambiar el texto de un nodo de texto. Sugiero escribir una función de JavaScript que ponga un div editable o algo así en lugar del textonodo y cuando se guarde reemplace el textonodo con el innerHTML del div.

Por favor, publique aquí el código final cuando tenga éxito.

<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>

Fuente

2012-04-13 12:07:02 peter

que he estado buscando por algo similar, pero no han encontrado nada, así que mi compañero y tesis de maestría decidí a escribir nuestra propia solución. Actualmente funciona bastante bien en Chrome y bastante bien en Firefox.

Demostración: http://engelfrost.github.io/svg-input-elements/

Código: https://github.com/engelfrost/svg-input-elements

Fuente

2012-05-10 06:56:11

hice un violín que creó el texto editable donde se haga clic en un SVG. Un último paso sería tomar el texto HTML y ponerlo en un elemento SVG.

http://jsfiddle.net/brx3xm59/

Código sigue:

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

Fuente

2014-10-30 03:38:09

he añadido algunas características más que esto, como ser capaz de hacer clic en los nodos de texto a editar, introduzca/ESC para aceptar/cancelar, etc. http: //jsfiddle.net/gordonwoodhull/undr1kx6/44/ – Gordon

Edición de texto en línea en SVG

Respuesta

Cuestiones relacionadas