根据百分比填充圆圈（邮件模板）

【问题标题】：fill circle on depending on percentage ( mailing template )根据百分比填充圆圈（邮件模板）
【发布时间】：2016-01-25 06:21:10
【问题描述】：

我正在准备一个自定义邮件，通过 php，我需要准备四个自定义圆圈，根据一些百分比填充（我收到它们动态），所以我需要一些 html 标签来做：

首先，我想到了canvas标签，但我读到很多电子邮件客户端不支持canvas标签：https://www.campaignmonitor.com/blog/email-marketing/2013/08/support-for-html-5-elements-in-email/
所以，我想在svg标签中，但现在我意识到，为了计算百分比，我需要javascript来做，而邮件客户端也不支持javascript。

所以，我知道我不能对邮件模板这样做，对吧？

非常感谢！

【问题讨论】：

为什么需要javascript？你不能用php做计算吗？

标签： php canvas svg mailing

【解决方案1】：

以下代码片段可能对您有用

CSS

/**
 * HTML5 / CSS3 Circle with Partial Border
 * http://stackoverflow.com/q/13059190/1397351
 */
* { margin: 0; padding: 0; }
.circle {
    position: relative;
    margin: 7em auto;
    width: 16em; height: 16em;
    border-radius: 50%;
    background: lightblue;
}
.arc {
    overflow: hidden;
    position: absolute;
    top: -1em; right: 50%; bottom: 50%; left: -1em;
    transform-origin: 100% 100%;
    transform: rotate(45deg) skewX(30deg);
}
.arc:before {
    box-sizing: border-box;
    display: block;
    border: solid 1em navy;
    width: 200%; height: 200%;
    border-radius: 50%;
    transform: skewX(-30deg);
    content: '';
}

HTML

<!-- content to be placed inside <body>…</body> -->
<div class='circle'>
    <div class='arc'></div>
</div>

【讨论】：