我一直在使用VectorEditorJS。将它用于 TShirt 设计 Web 应用程序。我添加了几行代码来增强一个功能，该功能可以让我通过围绕一个path.
现在这段代码工作正常，直到我利用这个提要源中的一些源代码，对标签内的text和进行分组。现在当我触发代码来弯曲文本时，文本和路径就从画布上消失了。path<g>
渲染的 SVG 不可见（您可以在浏览器中尝试此操作）：
<svg height="490" version="1.1" width="513" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><text x="50" y="50" text-anchor="middle" font="10px "Arial"" stroke="#4255ff" fill="#ff73a6" font-size="0px" font-family="Comic Sans MS " stroke-width="2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 0px; line-height: normal; font-family: 'Comic Sans MS';"><tspan dy="50" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Text</tspan></text><g><path fill="none" stroke="#000000" d="M152.02796,220.79435C158.08887000000001,228.37049000000002,165.15994,235.44156,165.15994,235.44156L181.32238,245.54308L207.58635,253.6243L235.87062,258.16999L260.61936000000003,260.1903L287.38840000000005,258.67507L307.59145000000007,254.63446000000002L333.3503400000001,247.56339000000003L351.5330900000001,239.48217000000002L369.21076000000005,224.32988000000003" stroke-opacity="0" id="pathPF2116" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="152.0323993235795" y="220.79989884025497" text-anchor="start" font="10px "Arial"" stroke="#4255ff" fill="#ff73a6" font-size="118px" stroke-width="3" font-family="Comic Sans MS " fill-opacity="1" stroke-opacity="1" transform="matrix(0.6247,0.7808,-0.7808,0.6247,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 118px; line-height: normal; font-family: 'Comic Sans MS'; fill-opacity: 1; stroke-opacity: 1;"><tspan dy="220.79989884025497" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">P</tspan></text><text x="189.59641501815253" y="248.08893644399512" text-anchor="start" font="10px "Arial"" stroke="#4255ff" fill="#ff73a6" font-size="118px" stroke-width="3" font-family="Comic Sans MS " fill-opacity="1" stroke-opacity="1" transform="matrix(0.9558,0.2941,-0.2941,0.9558,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 118px; line-height: normal; font-family: 'Comic Sans MS'; fill-opacity: 1; stroke-opacity: 1;"><tspan dy="248.08893644399512" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">o</tspan></text><text x="235.80833370414376" y="258.15997969419357" text-anchor="start" font="10px "Arial"" stroke="#4255ff" fill="#ff73a6" font-size="118px" stroke-width="3" font-family="Comic Sans MS " fill-opacity="1" stroke-opacity="1" transform="matrix(0.9873,0.1587,-0.1587,0.9873,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 118px; line-height: normal; font-family: 'Comic Sans MS'; fill-opacity: 1; stroke-opacity: 1;"><tspan dy="258.15997969419357" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">p</tspan></text><text x="283.0874906136036" y="258.91851791331885" text-anchor="start" font="10px "Arial"" stroke="#4255ff" fill="#ff73a6" font-size="118px" stroke-width="3" font-family="Comic Sans MS " fill-opacity="1" stroke-opacity="1" transform="matrix(0.9984,-0.0565,0.0565,0.9984,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 118px; line-height: normal; font-family: 'Comic Sans MS'; fill-opacity: 1; stroke-opacity: 1;"><tspan dy="258.91851791331885" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">p</tspan></text><text x="329.2829813479077" y="248.67992016663572" text-anchor="start" font="10px "Arial"" stroke="#4255ff" fill="#ff73a6" id="lpathPF2116" font-size="118px" stroke-width="3" font-family="Comic Sans MS " fill-opacity="1" stroke-opacity="1" transform="matrix(0.9643,-0.2647,0.2647,0.9643,0,0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: start; font-style: normal; font-variant: normal; font-weight: normal; font-size: 118px; line-height: normal; font-family: 'Comic Sans MS'; fill-opacity: 1; stroke-opacity: 1;"><tspan dy="248.67992016663572" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">y</tspan></text></g></svg>
操纵可见文本以围绕特定路径弯曲的代码：
function manipulate(editorObj, selection,stylePath) {
var localCopy = editorObj.selected[0]; //.clone();
var _group = editorObj.draw.set();
var path = editorObj.draw.path(stylePath).attr("stroke", "transparent"),
message = localCopy[0].textContent,
message_length = 0,
letters = [],
places = [],
ratio,
fontsize,
letter,
c = 0,
p;
_group.push(path);
var dt = new Date();
var dtStr=dt.getHours().toString() + dt.getSeconds().toString();
var idOfNode = "pathPF"+dtStr;
path.node.id = idOfNode;
var group = document.createElementNS("svg", "g");
//since not every letter is the same width, get the placement for each letter along the length of the string
//however, Raphael appears to group the width of letters into intervals of 4px, so this won't be perfect
function Cr(el) {
group.appendChild(el.node);
}
Cr(path);
for (; c < message.length; c += 1) {
letter = editorObj.draw.text(0, 0, message[c]).attr({ "text-anchor": "start" });
Cr(letter);
_group.push(letter);
letters.push(letter);
places.push(message_length);
//spaces get a width of 0, so set min at 4px
message_length += Math.max(4, letter.getBBox().width);
}
letter.node.id = "l" + idOfNode;
$("#l" + idOfNode).after("</g>");
ratio = path.getTotalLength() / message_length;
fontsize = 10 * ratio;
for (c = 0; c < letters.length; c += 1) {
letters[c].attr("font-size", fontsize + "px");
letters[c].attr("stroke-width", localCopy.attr("stroke-width"));
letters[c].attr("font-family", localCopy.attr("font-family"));
letters[c].attr("fill", localCopy.attr("fill"));
letters[c].attr("stroke", localCopy.attr("stroke"));
letters[c].attr("stroke-width", localCopy.attr("stroke-width"));
letters[c].attr("fill-opacity", localCopy.attr("fill-opacity"));
letters[c].attr("stroke-opacity", localCopy.attr("stroke-opacity"));
// letters[c].attr("font-family", localCopy.attr("font-family"));
p = path.getPointAtLength(places[c] * ratio);
//there does appear to be a bug in p.alpha around 180. Here's the fix
letters[c].attr({ x: p.x, y: p.y, transform: 'r' + (p.alpha < 180 ? p.alpha + 180 : p.alpha) });
}
var svgdoc = document.getElementsByTagName('svg')[0];
svgdoc.appendChild(group);
localCopy.remove();
editorObj.unselect();}
有人可以帮我到达那里吗？
谢谢