我正在尝试使用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>