Illustrator 到 SVG：如何计算 TextPath 的“startOffset”？答案

【问题标题】：Illustrator to SVG: How is 'startOffset' for TextPath calculated?Illustrator 到 SVG：如何计算 TextPath 的“startOffset”？
【发布时间】：2013-01-30 13:44:29
【问题描述】：

简单示例：我在 Illustrator 中画了一条 1000 像素的水平线（在 CS5 和 CS6 中尝试过）并在上面放了一个文本。我把路径上文字的起点拖到250px。

当我导出到 SVG 时，我希望 Illustrator 将 textPath 标签的“startOffset”属性设置为 25%。相反，它大约是 32%（三分之一？？）。

但是，当我将文本拖动到 500 像素时，“startOffset”按预期设置为 50%。

在 750px 时，属性将为 67%。

问题在于，在 Firefox 中查看 SVG，文本显示在不同的位置，因为它似乎以线性方式应用百分比。所以 32% 真正意味着 320 像素，而不是 Illustrator 似乎计算的 250 像素...

我在这里遗漏了什么吗？或者有谁知道重新计算百分比以便在 SVG 中正确显示的方法？

感谢任何帮助

【问题讨论】：

标签： svg adobe-illustrator

【解决方案1】：

好的，所以我想出了如何计算正确的百分比：

显然，Illustrator 会根据路径段的数量计算百分比。如果路径由两段（即 3 个顶点）组成，并且路径文本被应用并定位在第二个顶点（“中间”），这将导致 SVG 文件中的 startOffset 为 50%，无论每个路径段的大小。第一段可以长 1000px，第二段只有 4px（总路径长度为 1004px）：将文本放置在第二个顶点将始终导致 50%。
另一端的 SVG/浏览器根据总路径长度计算百分比。所以，参考上面的例子，文本不会被放置在 1000px 的长度（如果你查看段的数量，因此是 50%，因此是第一个段的结尾），而是 502px，即 50%总路径长度。

为了将“插图画家百分比”转换为“浏览器百分比”，您可以执行以下操作（未优化）：

 // Get the current percentage    
 var oldPercent = parseFloat(textPathNode.getAttribute('startOffset').split('%')[0])/100;

 // Get the path
 var parentPath = document.getElementById(textPathNode.getAttribute('xlink:href').split('#')[1])

 // Get the path segments
 var parentPath.getAttribute('d').match(/[MmLlHhCc][\d\,\.\-\s]+/g);

 // Calculate the percentage for one segment
 var percentPerSegment = 1/segments.length;

 // Find out on which segment the textPath lies
 var offsetIsOnSegmentNo = Math.floor(oldPercent/percentPerSegment);

 // Calculate the length of that segment
 var virtualPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 virtualPath.setAttribute('d', 'M0,0'+segments[offsetIsOnSegmentNo]);
 var segLength = virtualPath.getTotalLength();

 // Calculate the total path length of the previous segments
 var prevSegLength=0;
 var prevD = '';
 for(var i=0; i<offsetIsOnSegmentNo; i++)
    prevD += segments[s];

 var virtualPrevPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
 virtualPrevPath.setAttribute('d', 'M0,0'+prevD);
 var prevPathLength = virtualPrevPath.getTotalLength();

 // Calculate the actual path length for the old percentage             
 var totalLength = prevPathLength + segLength*(oldPercent-(percentPerSegment*offsetIsOnSegmentNo))/(percentPerSegment);

 // Calculate the correct percentage
 var newPercentage = totalLength / parentPath.getTotalLength();

 textPathNode.setAttribute('startOffset', newPercentage*100+'%');

【讨论】：