0

canvgを使用して、生成された(d3jsで)SVGオブジェクトからPNG画像を作成しようとしています。すべてのパス (例にはありません) は完全にレンダリングされますが、円パスに配置された textPath は表示されません (s. jsFiddle の例)。

どこが悪いのでしょうか?canvgによって適切にレンダリングされたtextPathはどうすればよいでしょうか?

ここに私の例がありますhttp://jsfiddle.net/T3AR4/

テキストを描画するためにSVGでその部分を使用しています:

<def>
<path id="time_path" d="M450 12.5 a437.5 437.5 0 1 1 -1 0"></path>
</def>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="0%">0.00Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="10%">3.50Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="20%">7.00Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="30%">10.50Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="40%">14.00Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="50%">17.50Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="60%">21.00Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="70%">24.50Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="80%">28.00Kb</textPath>
</text>
<text class="time label">
<textPath xlink:href="#time_path" startOffset="90%">31.50Kb</textPath>
</text>
4

1 に答える 1