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

Question

我有以下 donut chart :

<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>

我使用 Handlebars ，我正在尝试创建电子邮件模板，这个特定的模板包含这个图表，带圆圈的 svg。
如果我在浏览器中打开 html 文件，模板显示正确，图表显示清晰。但是，如果我通过电子邮件发送模板，使用相同的参数值，根据我发送到的每个邮箱，它的行为完全不同。例如在 Gmail 中，图表根本不显示，在 Yahoo 上，stroke-dashoffset 从 9 点钟位置开始，而不是 12 点钟，就像我在模板中设法做到的那样，即使值仍然是 25。
我主要担心的是，为什么我在电子邮件中缺少 svg 图表，我只剩下带有分配/规范文本的 div 和一长串空列表 <u></u>标签，如您所见，在我的代码中无处可寻。
在此先感谢您对此事的帮助。

Answer 1

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