2019-05-14 17:04
浏览 176


I'm trying to render a HighCharts SVG with scatter dots (with or without line it is producing the same results) to a pdf file. The output will draw the lines with ImageSVG(), but it does not render the dots.

I've done some manual editing of the SVG file and found that ImageSVG acts like it doesn't like this rendering command:

<path fill="darkblue" d="M99 188a4 4 0 1 1 0-.004z" class="highcharts-point highcharts-negative highcharts-color-0"/>

I converted it to a circle render command:

<circle cx="95" cy="188" r="4" fill="darkblue" />

And it renders in TCPDF fine.

Is there a way to make ImageSVG properly render the path command to draw the dot, or do I need to make an algorithm to do the conversion before sending the file to ImageSVG?

I am currently working on a work-around to convert all the path commands to circle commands. This appears like it will work - I don't yet have a working algorithm for this.

It also appears to get the dot to appear in the same place as the "path" command, I have to subtract 4 from the X coordinate.

I've googled to see if anyone else has ran across this problem, and searched stackoverflow but couldn't find anything. I've also searched for algorithms to help with the conversion, but only found people wanting to convert the other way - from circle to path.

Generic code to render svg to pdf file.

pdf->ImageSVG($file='plot.svg', $x=15, $y=30, $w='', $h='', $link='', $align='', $palign='', $border=1, $fitonpage=false);

the highcharts svg is too large to paste so here is the relevant section:

    <g class="highcharts-series-group" data-z-index="3">
        <g data-z-index=".1" class="highcharts-markers highcharts-series-0 highcharts-scatter-series highcharts-color-0">
         <path fill="powderblue" d="M98 188a4 4 0 1 1 0-.004zM99 188a4 4 0 1 1 0-.004zM101 183a4 4 0 1 1 0-.004zM108 188a4 4 0 1 1 0-.004zM122 185a4 4 0 1 1 0-.004zM150 190a4 4 0 1 1 0-.004zM206 179a4 4 0 1 1 0-.004zM315 182a4 4 0 1 1 0-.004zM572 188a4 4 0 1 1 0-.004z" class="highcharts-point highcharts-negative highcharts-color-0"/>

If I'm just doing a scatter chart in Highcharts, the chart output is empty - there are no dots.

If I add lines to the scatter chart, it draws the lines but not the dots. (Which also uses the path command, but the SVG renderer in TCPDF handles those fine)

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douke3442 2019-05-15 16:31

    Here's the solution I found for this problem;

    I switched to using the mPDF library.

    The code change is going to be pretty significant, but it renders overall better than using TCPDF. To render the SVG, I create the entire certification page in an HTML document, then write that with the 'WriteHTML' function built into mPDF.

    It renders the path command for dots, without any rendering errors.

    点赞 打赏 评论

相关推荐 更多相似问题