PHP Imagick库不将SVG图表颜色转换为jpg

Question

我正在使用Imagick将SVG转换为JPG。 SVG实际上是使用FusionCharts库生成的图表。图像已创建，但我的图表未正确转换为图像。这意味着颜色不会被转换，也不会转换为图表的BARS。首先看看我的图表是什么样的

但是当我使用SVG Imagick库转换此图表的PHP时，它生成的图像看起来像

我使用以下代码将SVG转换为JPG

 $svg = $this->_request->getPost('svg');
 $svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>'.$svg;
 $im->readImageBlob($svg);
 header("Content-Type: image/jpg");
 $im->setImageFormat("jpeg");
 $im->writeImage($dir.'/'.$id.'.jpg');/*(or .jpg)*/
 $im->clear();
 $im->destroy();

我SVG Rendered事件Fusionchart感谢

  myChart.addEventListener( "Rendered", function(evt, args) {
        var svg = myChart.ref.getSVGString();
    }); 

我的SVG看起来像

 <svg style="overflow: hidden; -moz-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" width="480" version="1.1" height="283"><desc>framework 3.3.1.sr2.19840</desc><defs><clipPath id="B0590631-A9A1-4149-BEF9-2DE5773DC243"><rect transform="matrix(1,0,0,1,0,0)" height="241" width="403" y="15" x="62"></rect></clipPath></defs><g class="red-background-0"><rect fill-opacity="0.6" stroke-width="0" stroke-opacity="0.5" style="" stroke="#545454" fill="#ffffff" ry="0" rx="0" r="0" height="283" width="480" y="0" x="0"></rect></g><g class="red-canvas-6"><rect stroke-linejoin="miter" stroke-opacity="1" stroke-width="1" style="stroke-linejoin: miter;" stroke="#969899" fill="none" ry="0" rx="0" r="0" height="242" width="404" y="14.5" x="61.5"></rect><rect fill-opacity="1" stroke-width="0" style="" stroke="none" fill="#ffffff" ry="0" rx="0" r="0" height="241" width="403" y="15" x="62"></rect></g><g class="red-axisbottom-9"><g class="red-x-axis-bands-12"></g><g class="red-y-axis-bands-18"><rect stroke-width="0" fill-opacity="0" style="" stroke="#000" fill="#d8dcc5" ry="0" rx="0" r="0" height="48.20000000000002" width="403" y="159.6" x="62"></rect><rect stroke-width="0" fill-opacity="0" style="" stroke="#000" fill="#d8dcc5" ry="0" rx="0" r="0" height="48.19999999999999" width="403" y="63.19999999999999" x="62"></rect></g><g class="red-y-axis-bands-24"></g><g class="red-x-axis-lines-14"></g><g class="red-y-axis-lines-20"><path shape-rendering="crispEdges" stroke-width="1" stroke-opacity="0.45" d="M62,208.5L465,208.5" stroke="#ffffff" fill="none" style="shape-rendering: crispedges;"></path><path shape-rendering="crispEdges" stroke-width="1" stroke-opacity="0.45" d="M62,160.5L465,160.5" stroke="#ffffff" fill="none" style="shape-rendering: crispedges;"></path><path shape-rendering="crispEdges" stroke-width="1" stroke-opacity="0.45" d="M62,111.5L465,111.5" stroke="#ffffff" fill="none" style="shape-rendering: crispedges;"></path><path shape-rendering="crispEdges" stroke-width="1" stroke-opacity="0.45" d="M62,63.5L465,63.5" stroke="#ffffff" fill="none" style="shape-rendering: crispedges;"></path></g><g class="red-y-axis-lines-26"></g><g class="red-x-axis-labels-16"><text transform="matrix(1,0,0,1,0,0)" font-weight="bold" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="middle" y="268" x="112.375" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="112.375" dy="-2">Mar-13</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-weight="bold" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="middle" y="268" x="213.125" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="213.125" dy="-2">Dec-12</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-weight="bold" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="middle" y="268" x="313.875" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="313.875" dy="-2">Nov-12</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-weight="bold" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="middle" y="268" x="414.625" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="414.625" dy="-2">Oct-12</tspan></text></g><g class="red-y-axis-labels-22"><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="256" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="3">$0</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="207.8" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="2.9992187500000114">$300</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="159.6" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="2.9984374999999943">$600</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="111.39999999999998" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="3.0015624999999773">$900</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="63.19999999999999" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="3.0007812499999886">$1.2K</tspan></text><text transform="matrix(1,0,0,1,0,0)" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="end" y="14.999999999999972" x="58" style="text-anchor: end; font-family: Verdana; font-size: 8px;"><tspan x="58" dy="2.9999999999999716">$1.5K</tspan></text></g><g class="red-y-axis-labels-28"></g><g class="red-axis-name-29"><text transform="matrix(0,-1,1,0,17.5,136)" font-weight="bold" font-size="8px" font-family="Verdana" fill="#000000" stroke="none" text-anchor="middle" y="0" x="0" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="0" dy="8">Millions</tspan></text></g></g><g class="red-dataset-1"><g class="red-shadows-47"><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="5" stroke-opacity="0.05" style="stroke-linejoin: miter; stroke-opacity: 0.05; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="3" stroke-opacity="0.1" style="stroke-linejoin: miter; stroke-opacity: 0.1; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect shape-rendering="default" stroke-linecap="round" transform="matrix(1,0,0,1,1,1)" stroke-linejoin="miter" stroke-width="1" stroke-opacity="0.15000000000000002" style="stroke-linejoin: miter; stroke-opacity: 0.15; stroke-linecap: round;" stroke="#404040" fill="none" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect></g><g clip-path="url('http://test.hbinsights.com/admin/scorecard/kpipdf/cid/1/dtype/1#B0590631-A9A1-4149-BEF9-2DE5773DC243')" style="" class="red-columns-48"><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#00955d" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#00955d" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#00955d" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#00955d" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#014a7f" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="87.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#014a7f" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="188.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#014a7f" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="288.5"></rect><rect stroke-linejoin="miter" stroke-width="1" stroke-opacity="1" fill-opacity="1" style="stroke-linejoin: miter;" stroke="#8a8a8a" fill="#014a7f" ry="0" rx="0" r="0" height="0" width="50" y="256.5" x="389.5"></rect></g></g><g class="red-axistop-10"><g class="red-x-axis-bands-11"></g><g class="red-y-axis-bands-17"></g><g class="red-y-axis-bands-23"></g><g class="red-x-axis-lines-13"></g><g class="red-y-axis-lines-19"></g><g class="red-y-axis-lines-25"></g><g class="red-x-axis-labels-15"></g><g class="red-y-axis-labels-21"></g><g class="red-y-axis-labels-27"></g></g><g style="display: none;" class="red-datalabels-5"><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="254.5" x="112.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="112.5" dy="3">$0.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="220.5" x="213.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="213.5" dy="3">$433.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="219" x="313.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="313.5" dy="3">$449.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="222" x="414.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="414.5" dy="3">$417.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="254.5" x="112.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="112.5" dy="3">$0.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="104" x="213.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="213.5" dy="3">$1024.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="110.5" x="313.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="313.5" dy="3">$912.0</tspan></text><text font-weight="bold" font-size="8px" font-family="Verdana" fill="#ffffff" stroke="none" text-anchor="middle" y="108.5" x="414.5" style="text-anchor: middle; font-family: Verdana; font-size: 8px; font-weight: bold;"><tspan x="414.5" dy="3">$1008.0</tspan></text></g><g class="red-hot-2"></g><g class="red-buttons-4"></g><text font-family="Verdana" font-size="9px" fill-opacity="0.5" fill="#000000" stroke="none" text-anchor="start" y="279" x="6" style="text-anchor: start; font-size: 9px; font-family: Verdana; cursor: pointer;"><tspan x="6" dy="-1.3984375">FusionCharts XT Trial</tspan></text></svg>

以上svg jsfiddle。

任何身体都可以告诉我如何将我的整个图表与所有颜色和条形图转换为jpg。我已正确检查了SVG。创建图表也是一样。

EDITED

在评论ERIK之后，我发现Fusionchart渲染事件不是确切的事件。因为它提供的SVG不完整。那么现在我的问题是图表完成动画的Fusion图表的确切内容是什么？

Answer 1

看看你的svg内容，似乎你有height="0"（看着组内red-dataset-1组内的元素），我假设那不是你想要的？根据svg规范，没有宽度或高度为零的矩形不会渲染。

所以，JPEG输出对我来说似乎是正确的。这表明你的问题在于svg本身的生成/序列化。

在jsfiddle中，图表条形的元素被剪辑路径剪掉。为什么？因为构成条形的区域仅在剪辑路径区域之外。您可以将y值设置得更小（例如y="50"），并将height值调整为非零，然后您将开始查看条形图，例如{ {3}}