SVG 圆环图未显示在电子邮件中

问题描述

我有以下圆环图：

<div class="donut-chart" style="position: relative;">
 <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
   <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff></circle>
   <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#372583" stroke-width="3"></circle>
   <circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#26c1c9" stroke-width="3" stroke-dasharray="{{{allocatedPernorm}}} {{{unallocatedPernorm}}}" stroke-dashoffset="25"></circle>
 </svg>

 <div style="position: absolute; left: 45%; top: 25%;">
   <p style="font-size: 24px; line-height: 5px;">{{{allocatedPernorm}}}%</p>
   <p>{{{allocated}}}h / {{{norm}}}h</p>
 </div>
</div>

我使用把手，我正在尝试创建电子邮件模板，这个特定的模板包含这个图表，带有圆圈的 svg。

如果我在浏览器中打开 html 文件，模板显示正常，图表显示清晰。但是，如果我通过电子邮件发送模板，使用相同的参数值，根据我发送到的每个邮箱，它的行为完全不同。例如在 Gmail 中，图表根本不显示，在 Yahoo 上，stroke-dashoffset 从 9 点钟位置开始，而不是 12 点钟，就像我在模板中设法做到的那样，即使值仍然是 25。

我主要担心的是，为什么我在电子邮件中缺少 svg 图表，我只剩下带有分配/规范文本的 div 和一长串空 <u></u> 标签，您可以看，在我的代码中找不到。

在此先感谢您对此事的帮助。

解决方法

至于嵌入图像，您会发现没有适用于所有邮件客户端的解决方案。我不会建议在电子邮件中使用 javascript。最好的解决方案是在通过电子邮件发送模板之前使用一个引擎呈现模板。否则你总会遇到问题。