1

簡単な例: Illustrator で 1000px の水平線を描き (CS5 & CS6 で試しました)、その上にテキストを配置します。パス上のテキストの始点を 250px までドラッグします。

SVG にエクスポートするとき、Illustrator が textPath タグの 'startOffset'-Attribute を 25% に設定することを期待します。代わりに、約 32% (3 分の 1??) です。

ただし、テキストを 500px にドラッグすると、「startOffset」は期待どおり 50% に設定されます。

750px では、属性は 67% になります。

問題は、Firefox で SVG を表示すると、割合を直線的に適用しているように見えるため、テキストが別の位置に表示されることです。したがって、32% は実際には 320px を意味し、Illustrator が計算するように見える方法では 250px ではありません...

ここで何か不足していますか？または、パーセンテージを再計算して SVG で正しく表示する方法を知っている人はいますか?

助けてくれてありがとう

4

1 に答える 1

2

わかりましたので、正しいパーセンテージを計算する方法を見つけました。

  • どうやら、Illustrator はパス セグメントの数に応じてパーセンテージを計算します。パスが 2 つのセグメント (つまり 3 つの頂点) で構成され、パス テキストが適用されて 2 番目の頂点 (「中間」) に配置される場合、SVG ファイルの startOffset は 50% になります。各パス セグメントのサイズ。最初のセグメントの長さは 1000 ピクセルで、2 番目のセグメントはわずか 4 ピクセル (パスの合計の長さは 1004 ピクセル) です。テキストを 2 番目の頂点に配置すると、常に 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+'%');
于 2013-02-05T11:30:16.467 に答える