Modifica del testo incorporata in SVG

Rendo un SVG in linea in un sito Web e devo consentire all'utente di aggiungere e modificare testi in tale SVG, in un modo WYSIWYG. Fondamentalmente ho bisogno di qualcosa che funzioni come svg-edit. Tuttavia non ho bisogno di un editor WYSIWYG completo, ma solo della parte di modifica del testo inline. Ho guardato il codice sorgente di svg-edit e sembra essere molto difficile estrarre solo quella parte di esso.Modifica del testo incorporata in SVG

Quindi quello che sto cercando è un modo semplice (magari con una libreria di terze parti) per implementare la modifica del testo SVG in linea. Ho già pensato di sostituire il testo SVG con un input di testo HTML quando focalizzato, ma il testo deve essere sottoposto a rendering in modalità di modifica esattamente come viene visualizzato nell'VVG risultante.

fonte

2012-02-16 Sebastian Noack

Ecco un esempio in cui è possibile ottenere e modificare il testo da un textnode. Suggerisco di scrivere una funzione JavaScript che mette un modificabile div o qualcosa del genere al posto del textnode e quando viene salvato sostituisce il textnode con lo innerHTML dello div.

Si prega di inviare il codice finale qui quando ci riesci.

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

fonte

2012-04-13 12:07:02 peter

Sono stato alla ricerca di qualcosa di simile, ma non ho trovato nulla, così io e il mio compagno tesi di laurea deciso di scrivere la nostra soluzione. Attualmente funziona piuttosto bene in Chrome e piuttosto bene in Firefox.

Demo: http://engelfrost.github.io/svg-input-elements/

Codice: https://github.com/engelfrost/svg-input-elements

fonte

2012-05-10 06:56:11

ho fatto un violino che ha creato testo modificabile, ovunque si sceglie in uno SVG. Un ultimo passo sarebbe quello di afferrare il testo HTML e inserirlo in un elemento SVG.

http://jsfiddle.net/brx3xm59/

Codice segue:

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

fonte

2014-10-30 03:38:09

ho aggiunto un paio di caratteristiche per questo, come essere in grado di fare clic su nodi di testo per modificarli, ENTER/ESC per accettare/annullare, ecc http: //jsfiddle.net/gordonwoodhull/undr1kx6/44/ – Gordon

Modifica del testo incorporata in SVG

risposta

Problemi correlati