0

我在我的 Laravel 项目之一中实现了SVGGraph ，以将图形报告发送到电子邮件。

在开始这个项目之前，我做了一些研发，不知何故知道电子邮件存在渲染问题canvas。所以我选择svg了我的项目并且走得太远了。我现在不可能恢复它。

邮件正文：

$graph = new SVGGraph(700, 300);
...
$graph->render('StackedBarAndLineGraph');

svg上面的代码在邮件正文中生成一个块：

<?xml version="1.0" encoding="utf-8"?><svg version="1.1" width="700" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><clipPath id="eC"><rect x="34" y="39.56" width="623" height="213.44"/></clipPath><symbol><g id="eD"><circle fill="red" r="3" cursor="crosshair"/></g></symbol></defs><rect width="100%" height="100%" fill="#fff" stroke-width="0px"/><text font-size="12px" font-family="Arial" font-weight="normal" text-anchor="middle" fill="black" x="350" y="20.92">Daily Transaction Bar of Grameenphone</text><g class="grid"><path d="M34 245.89h623M34 238.77h623M34 231.66h623M34 224.54h623M34 210.31h623M34 203.2h623M34 196.08h623M34 188.97h623M34 174.74h623M34 167.62h623M34 160.51h623M34 153.39h623M34 139.17h623M34 132.05h623M34 124.94h623M34 117.82h623M34 103.59h623M34 96.48h623M34 89.36h623M34 82.25h623M34 68.02h623M34 60.9h623M34 53.79h623M34 46.67h623" stroke="#fff"/><path d="M34 253h623M34 217.43h623M34 181.85h623M34 146.28h623M34 110.71h623M34 75.13h623M34 39.56h623M34 39.56v213.44M103.22 39.56v213.44M172.44 39.56v213.44M241.67 39.56v213.44M310.89 39.56v213.44M380.11 39.56v213.44M449.33 39.56v213.44M518.56 39.56v213.44M587.78 39.56v213.44M657 39.56v213.44" stroke="#fff"/></g><rect x="49" width="39.22" y="158.73" height="94.27" stroke="#000" stroke-width="1px" fill="#9BBB59" id="e2"/><rect x="49" width="39.22" y="93.63" height="65.1" stroke="#000" stroke-width="1px" fill="#222" id="e4"/><rect x="118.22" width="39.22" y="144.86" height="108.14" stroke="#000" stroke-width="1px" fill="#9BBB59" id="e6"/><rect x="118.22" width="39.22" y="52.72" height="92.13" stroke="#000" stroke-width="1px" fill="#222" id="e8"/><rect x="187.44" width="39.22" y="168.69" height="84.31" stroke="#000" stroke-width="1px" fill="#9BBB59" id="ea"/><rect x="187.44" width="39.22" y="113.55" height="55.14" stroke="#000" stroke-width="1px" fill="#222" id="ec"/><rect x="256.67" width="39.22" y="158.02" height="94.98" stroke="#000" stroke-width="1px" fill="#9BBB59" id="ee"/><rect x="256.67" width="39.22" y="99.68" height="58.34" stroke="#000" stroke-width="1px" fill="#222" id="eg"/><rect x="325.89" width="39.22" y="120.67" height="132.33" stroke="#000" stroke-width="1px" fill="#9BBB59" id="ei"/><rect x="325.89" width="39.22" y="59.48" height="61.19" stroke="#000" stroke-width="1px" fill="#222" id="ek"/><rect x="395.11" width="39.22" y="115.33" height="137.67" stroke="#000" stroke-width="1px" fill="#9BBB59" id="em"/><rect x="395.11" width="39.22" y="52.37" height="62.96" stroke="#000" stroke-width="1px" fill="#222" id="eo"/><rect x="464.33" width="39.22" y="155.53" height="97.47" stroke="#000" stroke-width="1px" fill="#9BBB59" id="eq"/><rect x="464.33" width="39.22" y="104.3" height="51.23" stroke="#000" stroke-width="1px" fill="#222" id="es"/><rect x="533.56" width="39.22" y="221.7" height="31.3" stroke="#000" stroke-width="1px" fill="#9BBB59" id="eu"/><rect x="533.56" width="39.22" y="210.31" height="11.38" stroke="#000" stroke-width="1px" fill="#222" id="ew"/><rect x="602.78" width="39.22" y="228.1" height="24.9" stroke="#000" stroke-width="1px" fill="#9BBB59" id="ey"/><rect x="602.78" width="39.22" y="217.78" height="10.32" stroke="#000" stroke-width="1px" fill="#222" id="eA"/><g clip-path="url(#eC)"><path fill="none" stroke="#000" stroke-width="2px" d="M68.61 104.48L137.83 89.36 207.06 86.69 276.28 106.26 345.5 45.79 414.72 58.24 483.94 50.23 553.17 212.09 622.39 211.2"/></g><path d="M34 256v-3M103.22 256v-3M172.44 256v-3M241.67 256v-3M310.89 256v-3M380.11 256v-3M449.33 256v-3M518.56 256v-3M587.78 256v-3M657 256v-3" stroke="#333" fill="none"/><path d="" stroke="#333" fill="none"/><path stroke="#333" d="M32 253h627" stroke-width="2px"/><g font-family="Arial" font-size="10px" fill="#333"><text x="68.61" y="267.1" text-anchor="middle">22-Aug</text><text x="137.83" y="267.1" text-anchor="middle">23-Aug</text><text x="207.06" y="267.1" text-anchor="middle">24-Aug</text><text x="276.28" y="267.1" text-anchor="middle">25-Aug</text><text x="345.5" y="267.1" text-anchor="middle">26-Aug</text><text x="414.72" y="267.1" text-anchor="middle">27-Aug</text><text x="483.94" y="267.1" text-anchor="middle">28-Aug</text><text x="553.17" y="267.1" text-anchor="middle">29-Aug</text><text x="622.39" y="267.1" text-anchor="middle">30-Aug</text></g><path d="M31 253h3M31 217.43h3M31 181.85h3M31 146.28h3M31 110.71h3M31 75.13h3M31 39.56h3" stroke="#333" fill="none"/><path d="M32 245.89h2M32 238.77h2M32 231.66h2M32 224.54h2M32 210.31h2M32 203.2h2M32 196.08h2M32 188.97h2M32 174.74h2M32 167.62h2M32 160.51h2M32 153.39h2M32 139.17h2M32 132.05h2M32 124.94h2M32 117.82h2M32 103.59h2M32 96.48h2M32 89.36h2M32 82.25h2M32 68.02h2M32 60.9h2M32 53.79h2M32 46.67h2" stroke="#333" fill="none"/><path stroke="#333" d="M34 37.56v217.44" stroke-width="2px"/><g font-family="Arial" font-size="10px" fill="#333"><text x="29" y="256.45" text-anchor="end">0</text><text x="29" y="220.88" text-anchor="end">1</text><text x="29" y="185.3" text-anchor="end">2</text><text x="29" y="149.73" text-anchor="end">3</text><text x="29" y="114.16" text-anchor="end">4</text><text x="29" y="78.58" text-anchor="end">5</text><text x="29" y="43.01" text-anchor="end">6</text></g><text text-anchor="middle" font-family="Arial" font-size="10px" fill="#000" x="15.24" y="146.28" transform="rotate(270 15.24 146.28)">Trx_count in Ten Thousand</text><path d="M657 253h3M657 226.32h3M657 199.64h3M657 172.96h3M657 146.28h3M657 119.6h3M657 92.92h3M657 66.24h3M657 39.56h3" stroke="#333" fill="none"/><path d="M657 247.66h2M657 242.33h2M657 236.99h2M657 231.66h2M657 220.98h2M657 215.65h2M657 210.31h2M657 204.98h2M657 194.3h2M657 188.97h2M657 183.63h2M657 178.3h2M657 167.62h2M657 162.29h2M657 156.95h2M657 151.62h2M657 140.94h2M657 135.61h2M657 130.27h2M657 124.94h2M657 114.26h2M657 108.93h2M657 103.59h2M657 98.26h2M657 87.58h2M657 82.25h2M657 76.91h2M657 71.58h2M657 60.9h2M657 55.57h2M657 50.23h2M657 44.9h2" stroke="#333" fill="none"/><path stroke="#333" d="M657 37.56v217.44" stroke-width="2px"/><g font-family="Arial" font-size="10px" fill="#333"><text x="662" y="256.45" text-anchor="start">0</text><text x="662" y="229.77" text-anchor="start">0.3</text><text x="662" y="203.09" text-anchor="start">0.6</text><text x="662" y="176.41" text-anchor="start">0.9</text><text x="662" y="149.73" text-anchor="start">1.2</text><text x="662" y="123.05" text-anchor="start">1.5</text><text x="662" y="96.37" text-anchor="start">1.8</text><text x="662" y="69.69" text-anchor="start">2.1</text><text x="662" y="43.01" text-anchor="start">2.4</text></g><text text-anchor="middle" font-family="Arial" font-size="10px" fill="#000" x="684.1" y="146.28" transform="rotate(90 684.1 146.28)">Other Channels &amp; EBL in Millions</text><use x="68.61" y="104.48" id="eF" xlink:href="#eD"></use><use x="137.83" y="89.36" id="eG" xlink:href="#eD"></use><use x="207.06" y="86.69" id="eH" xlink:href="#eD"></use><use x="276.28" y="106.26" id="eI" xlink:href="#eD"></use><use x="345.5" y="45.79" id="eJ" xlink:href="#eD"></use><use x="414.72" y="58.24" id="eK" xlink:href="#eD"></use><use x="483.94" y="50.23" id="eL" xlink:href="#eD"></use><use x="553.17" y="212.09" id="eM" xlink:href="#eD"></use><use x="622.39" y="211.2" id="eN" xlink:href="#eD"></use><g><g><text font-family="Arial" font-size="10px" fill="#222" y="209.32" x="68.61" text-anchor="middle">2.65</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="202.38" x="137.83" text-anchor="middle">3.04</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="214.3" x="207.06" text-anchor="middle">2.37</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="208.96" x="276.28" text-anchor="middle">2.67</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="190.28" x="345.5" text-anchor="middle">3.72</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="187.62" x="414.72" text-anchor="middle">3.87</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="207.71" x="483.94" text-anchor="middle">2.74</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="240.8" x="553.17" text-anchor="middle">0.88</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="244" x="622.39" text-anchor="middle">0.7</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="129.63" x="68.61" text-anchor="middle">1.83</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="102.24" x="137.83" text-anchor="middle">2.59</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="144.57" x="207.06" text-anchor="middle">1.55</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="132.3" x="276.28" text-anchor="middle">1.64</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="93.52" x="345.5" text-anchor="middle">1.72</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="87.3" x="414.72" text-anchor="middle">1.77</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="133.37" x="483.94" text-anchor="middle">1.44</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="219.45" x="553.17" text-anchor="middle">0.32</text></g><g><text font-family="Arial" font-size="10px" fill="#fff" y="226.39" x="622.39" text-anchor="middle">0.29</text></g></g><g><g><text font-family="Arial" font-size="10px" fill="#222" y="97.78" x="68.61" text-anchor="middle">1.67</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="82.66" x="137.83" text-anchor="middle">1.84</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="79.99" x="207.06" text-anchor="middle">1.87</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="99.56" x="276.28" text-anchor="middle">1.65</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="39.09" x="345.5" text-anchor="middle">2.33</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="51.54" x="414.72" text-anchor="middle">2.19</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="43.53" x="483.94" text-anchor="middle">2.28</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="205.39" x="553.17" text-anchor="middle">0.46</text></g><g><text font-family="Arial" font-size="10px" fill="#222" y="204.5" x="622.39" text-anchor="middle">0.47</text></g></g><g font-family="Arial" font-size="10px" fill="black" transform="translate(371.95 278.7)" id="eO"><rect fill="#000" width="328.05" height="21.3" y="2.5" x="2.5" opacity="0.3"/><rect fill="#fff" width="328.05" height="21.3" stroke-width="1px" stroke="#fff"/><g transform="translate(5 0)"><rect x="0" y="5.65" width="10" height="10" style="fill:#9BBB59;stroke:#000;stroke-width:1px;"/></g><g transform="translate(116.02 0)"><rect x="0" y="5.65" width="10" height="10" style="fill:#222;stroke:#000;stroke-width:1px;"/></g><g transform="translate(227.03 0)"><path fill="none" stroke="#000" stroke-width="2px" d="M0 10.65l10 0"/><use x="5" y="10.65" xlink:href="#eD"></use></g><g transform="translate(20 0)"><text x="0" y="14.1">Other Channels</text></g><g transform="translate(131.02 0)"><text x="0" y="14.1">EBL - Visa/Master</text></g><g transform="translate(242.03 0)"><text x="0" y="14.1">Count</text></g></g></svg>

上图在 Gmail 中有效，但在 Outlook 中无效。我该如何解决？任何帮助甚至提示都将是可观的。

4

1 回答 1

0

好吧，我尝试了一种能够加载svg图表的方法。

$graph = new SVGGraph(700, 300);
...

$graph_src = '<?xml version="1.0" encoding="utf-8"?>';
$graph_src .= $graph->fetch('StackedBarAndLineGraph', false);

Storage::disk('public')->put('/path/to/dir/', 'graph.svg', $graph_src);
$src = Storage::disk('public')->url('/path/to/dir/graph.svg');

得到后$src，我只是把它放在img邮件正文的标签中。那工作得很好。

但是我注意到Outlook软件中的图像损坏了，所以我不得不base64_encode使用图像并且它再次正常工作。

我不知道这是否是优雅的方式，但至少对我有用。

于 2020-10-17T06:43:00.487 回答