SVG中的内联文本编辑如何实现?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (88)

我在网站中呈现内联SVG,并且必须允许用户以所见即所得的方式在该SVG中添加和修改文本。基本上我需要像svg-edit一样的东西。但是,我不需要完全所见即所得的编辑器,而只需要内联文本编辑部分。我已经看过svg-edit的源代码,并且似乎很难仅提取它的那部分内容。

所以我在寻找的是一种简单的方法(可能有第三方库)来实现内联SVG文本编辑。我已经考虑过在关注时用HTML文本输入替换SVG文本,但是在编辑模式下,文本必须完全按照它在最终SVG中呈现的样式呈现。

提问于
用户回答回答于

无论您、在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;
    }
});
用户回答回答于

扫码关注云+社区

领取腾讯云代金券