SVG 中的内联文本编辑
Posted
技术标签:
【中文标题】SVG 中的内联文本编辑【英文标题】：Inline text editing in SVG 【发布时间】：2012-02-16 09:50:09 【问题描述】：我在网站中呈现内联 SVG，并且必须使用户能够以所见即所得的方式在该 SVG 中添加和修改文本。基本上我需要像svg-edit 这样的东西。但是我不需要一个完全所见即所得的编辑器，而只需要内联文本编辑部分。我查看了 svg-edit 的源代码，似乎很难只提取其中的一部分。
所以我正在寻找一种简单的方法（可能使用第三方库）来实现内联 SVG 文本编辑。我已经考虑过在获得焦点时用 html 文本输入替换 SVG 文本，但是在编辑模式下必须完全按照生成的 SVG 中呈现的方式呈现文本。
【问题讨论】：
【参考方案1】：我制作了一个小提琴，它可以在您单击 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;
);
【讨论】：
我为此添加了更多功能，例如能够单击文本节点进行编辑、输入/esc 接受/取消等。jsfiddle.net/gordonwoodhull/undr1kx6/44 解决方案基于使用foreignObjectdeveloper.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject【参考方案2】：
编辑：更新示例以使用 Edge。客户端边界框的属性在那里有所不同 - 这可能是下面报告的旧版 iPad 和 Safari 的问题。我已经在 Edge、Chrome、FF、Safari (Mac) 和 Chrome、FF、Safari(iPad) 上对此进行了测试。在 Edge 上，光标已损坏，但仍可进行编辑。
我意识到这是一个老问题，但是如果您不想实现自己的输入元素行为，我们仍然可以使用 contentEditable 技巧。如果您使用单个 svg 文本节点（而不是 HTML 外部对象）作为正在编辑的文本的覆盖，您可以获得真正的 WSYWIG，因为您可以使用与原始文本相同的字体等。您还可以选择可以编辑的元素。是的，光标在 Safari 中很奇怪。可以在此处找到演示这一点的小提琴：
https://jsfiddle.net/AaronDavidNewman/ta0jhw1q/
HTML/SVG：
<div id="yyy">
<div id="xxx">
<svg viewBox="0 0 500 500">
<text x="0" y="25" id="target1" font-size="1.8em">Change me</text>
<text x="0" y="50" id="targetx" font-size="1.8em">You can't edit me</text>
<text x="0" y="75" id="target2" font-size="1.8em">Edit me</text>
<text x="0" y="100" id="targety" font-size="1.8em">You can't edit me</text>
<text x="0" y="125" id="target3" font-size="1.8em">Improve me</text>
</svg>
</div>
<div id="aaa" contentEditable="true" class="hide">
<svg viewBox="0 0 500 50">
<text x="0" y="50" id="input-area" font-size="1.8em"></text>
</svg>
</div>
</div>
// Create in-place editable text elements in svg. Click inside the element
// to edit it, and away to stop editing and switch to another element
var editing = false;
var svgns = "http://www.w3.org/2000/svg";
$('body').css('overflow','hidden');
// Poll on changes to input element. A better approach might be
// to update after keyboard events
var editElement = function(aaa, xxx)
setTimeout(function()
xxx.textContent = aaa.textContent;
if (editing)
editElement(aaa, xxx);
, 250);
// Make sure the input svg element is placed directly over the
// target element
var fixOffset = function(aaa, xxx)
var svg = $('#xxx').find('svg')[0];
$('.underEdit').remove();
var rect = xxx.getBoundingClientRect();
var offset = aaa.getBoundingClientRect();
$('#aaa').css('left', rect.left + (rect.left - offset.left));
$('#aaa').css('top', rect.top + (rect.top - offset.top));
var bb = xxx.getBBox();
var margin = 10;
// Based on a click in the element svg area, edit that element
var editId = function(id)
var aaa = document.getElementById('input-area');
var xxx = document.getElementById(id);
var rect = xxx.getBoundingClientRect();
$('#aaa').css('left', rect.left);
$('#aaa').css('top', rect.top);
setTimeout(function()
fixOffset(aaa, xxx);
, 1);
aaa.textContent = xxx.textContent;
editing = true;
editElement(aaa, xxx);
// see if a click intersects an editable element
var getIntersection = function(objs, point)
var rv = null;
$(objs).each(function(ix, obj)
var i1 = point.x - obj.box.x;
var i2 = point.y - obj.box.y;
// If inside the box, we have an element to edit
if (i1 > 0 && i1 < obj.box.width && i2 > 0 && i2 < obj.box.height)
rv = obj;
return false;
else if (i1 > -10 && i1 < obj.box.width + 10 && i2 > -10 && i2 < obj.box.height + 10)
// edit a nearby click, if a better match isn't found
rv = obj;
);
return rv;
// bind editable elements to mouse click
var bind = function(texts)
var objs = [];
// find geometry of each editable element
texts.forEach((id) =>
var el = document.getElementById(id);
var bbox = el.getBoundingClientRect();
bbox = x: bbox.left, y: bbox.top, width: bbox.width, height: bbox.height ;
objs.push(id: id, box: bbox );
);
// bind click event globally, then try to find the intersection.
$(document).off('click').on('click', function(ev)
var point = x: ev.clientX, y: ev.clientY ;
console.log('x:' + point.x + 'y:' + point.y);
var obj = getIntersection(objs, point);
if (obj && !editing)
$('#aaa').removeClass('hide');
editing = true;
console.log('start edit on ' + obj.id);
editId(obj.id);
else if (!obj)
$('#aaa').addClass('hide');
editing = false;
$('.underEdit').remove();
console.log('stop editing');
);
bind(['target1', 'target2', 'target3']);
CSS：
#yyy
position: relative;
width: 500px;
height: 500px;
#xxx
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
#aaa
position: absolute;
left: 100px;
top: 100px;
z-index: 2;
overflow:hidden;
.hide
display: none;
【讨论】：
很遗憾，您的代码无法在我的 iPad 上运行。我可以选择文本，但没有显示键盘，无法编辑或创建文本。 @ATL_DEV，它在 ipad 上为我工作，包括软键盘和硬键盘。您必须点击文本两次才能将其显示出来。我正在使用 iPad pro 13.1.3 10.5 英寸。唯一会搞砸的就是你的屏幕太小了，jsfiddle 更是如此。【参考方案3】：这是一个示例，您可以从文本节点获取和更改文本。我建议编写一个 JavaScript 函数，将可编辑的 div 或类似的东西代替 textnode，并在保存时将 textnode 替换为 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>
【讨论】：
【参考方案4】：这是一个演示，它可以编辑已经存在的文本（而不是创建新的文本条目）： https://jsfiddle.net/qkrLy9gu
<!DOCTYPE html>
<html>
<body>
<svg >
<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>
【讨论】：
以上是关于SVG 中的内联文本编辑的主要内容，如果未能解决你的问题，请参考以下文章