首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >SVG中的内联文本编辑

SVG中的内联文本编辑
EN

Stack Overflow用户
提问于 2012-02-16 17:50:09
回答 3查看 26.8K关注 0票数 27

我在网站中呈现一个内联SVG,并且必须使用户能够以所见即所得的方式在该SVG中添加和修改文本。基本上,我需要像svg-edit这样工作的东西。然而,我不需要一个完整的所见即所得编辑器,但只需要内联文本编辑部分。我看过svg-edit的源代码,似乎很难只提取其中的一部分。

因此,我正在寻找一种简单的方法(可能使用第三方库)来实现内联SVG文本编辑。我已经考虑过在聚焦时将SVG文本替换为HTML文本输入,但是文本在编辑模式中呈现时必须与在生成的SVG中呈现的完全一样。

EN

回答 3

Stack Overflow用户

发布于 2014-10-30 11:38:10

我做了一个小提琴,在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;
    }
});
票数 18
EN

Stack Overflow用户

发布于 2012-04-13 20:07:02

下面是一个示例,您可以从textnode获取和更改文本。我建议编写一个JavaScript函数,将一个可编辑的div或类似的东西放在textnode的位置,并在保存时将textnode替换为divinnerHTML

当你成功的时候,请在这里发布最终的代码。

<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>
票数 0
EN

Stack Overflow用户

发布于 2021-08-09 02:15:32

这是一个演示,它可以编辑已经存在的文本(而不是创建新的文本条目):https://jsfiddle.net/qkrLy9gu

<!DOCTYPE html>
<html>
<body>

<svg height="100" width="200">
    <circle cx="50" cy="50" r="40" fill="red"/>
    <text x="50" y="50" onclick="edittext(this)">a circle [click to edit]</text>
</svg> 

<script>
function edittext(svgtext){
    var input = document.createElement("input");
    input.value = svgtext.textContent
    input.onkeyup = function(e){    
        if (["Enter", "Escape"].includes(e.key)) {this.blur(); return};
        svgtext.textContent = this.value
    }
    input.onblur = function(e){       
        myforeign.remove()
    }

    var myforeign = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')
    myforeign.setAttribute("width", "100%");
    myforeign.setAttribute("height", "100%");
    myforeign.append(input);
    
    svg = svgtext.parentNode
    svg.append(myforeign);

    input.focus()
}
</script>
 
</body>
</html>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9308938

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档