एसवीजी

में इनलाइन टेक्स्ट संपादन मैं वेबसाइट में एक इनलाइन एसवीजी प्रस्तुत करता हूं, और उपयोगकर्ता को उस वाईवीएसवाईवायजी तरीके से उस एसवीजी में ग्रंथों को जोड़ने और संशोधित करने में सक्षम होना है। असल में मुझे ऐसा कुछ चाहिए जो svg-edit जैसा काम करता है। हालांकि मुझे पूरी तरह से WYSIWYG संपादक की आवश्यकता नहीं है, लेकिन केवल इनलाइन टेक्स्ट संपादन भाग है। मैंने svg-edit के स्रोत कोड को देखा है और ऐसा लगता है कि इसका केवल उस भाग को निकालना बहुत कठिन लगता है।एसवीजी

तो जो मैं खोज रहा हूं वह इनलाइन एसवीजी टेक्स्ट संपादन को लागू करने के लिए एक आसान तरीका है (शायद किसी तृतीय पक्ष लाइब्रेरी के साथ)। मैंने ध्यान केंद्रित करते समय एसवीजी टेक्स्ट को एचटीएमएल टेक्स्ट इनपुट के साथ बदलने के बारे में पहले ही सोचा था, लेकिन पाठ को तब संपादित किया जाना चाहिए जब संपादन मोड में ठीक उसी प्रकार परिणामस्वरूप एसवीजी में प्रस्तुत किया जाता है।

स्रोत

2012-02-16 Sebastian Noack

यहां एक उदाहरण है जहां आप टेक्स्टनोड से टेक्स्ट प्राप्त और बदल सकते हैं। मैं एक जावास्क्रिप्ट फ़ंक्शन लिखने का सुझाव देता हूं जो एक संपादन योग्य div या टेक्स्टनोड के स्थान पर ऐसा कुछ रखता है और सहेजे जाने पर div के innerHTML के साथ टेक्स्ट नोड को प्रतिस्थापित करता है।

कृपया सफल होने पर यहां अंतिम कोड पोस्ट करें।

<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

मैं कुछ इसी तरह की तलाश कर रहा है लेकिन, कुछ भी नहीं मिला है तो मुझे और मेरे गुरु थीसिस साथी हमारे अपने समाधान लिखने का फैसला किया। वर्तमान में यह क्रोम में बल्कि फ़ायरफ़ॉक्स में अच्छी तरह से काम करता है।

डेमो: http://engelfrost.github.io/svg-input-elements/

कोड: https://github.com/engelfrost/svg-input-elements

स्रोत

2012-05-10 06:56:11

मैं एक बेला कि संपादन योग्य टेक्स्ट बनाया भी आप एक एसवीजी में क्लिक कर दिया। एक अंतिम चरण HTML पाठ को पकड़ना और इसे एक एसवीजी तत्व में रखना होगा।

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

एसवीजी

उत्तर

संबंधित मुद्दे