Page 115 - css揭秘
P. 115
<div class="pie">20%</div> HTML
<div class="pie">60%</div>
然后在每个 .pie 元素内部生成一个 SVG 图像，并添入所有必要的图形
元件和属性。为确保可访问性，还可以在它内部增加一个 <title> 元素，这
样屏幕阅读器的读者也可以知道这个图像显示的是什么比率了。这段脚本最
终可能是这样的：
JS
$$('.pie').forEach(function(pie) {
var p = parseFloat(pie.textContent);
var NS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(NS, "svg");
var circle = document.createElementNS(NS, "circle");
var title = document.createElementNS(NS, "title");
circle.setAttribute("r", 16);
circle.setAttribute("cx", 16);
circle.setAttribute("cy", 16);
circle.setAttribute("stroke-dasharray", p + " 100");
svg.setAttribute("viewBox", "0 0 32 32");
title.textContent = pie.textContent;
pie.textContent = '';
svg.appendChild(title);
svg.appendChild(circle);
pie.appendChild(svg);
});
关于未来 饼图
还记得“棋盘”一节中提到的角向渐变吗？它在这里也是大有用武之地的。
我们在生成饼图时只需要一个圆形元素，再配上一幅具有两个色标的角向
渐变即可。举例来说，图 3-53 所呈现的 40% 饼图可能就是这么简单：
.pie {
width: 100px; height: 100px;
border-radius: 50%;
background: conic-gradient(#655 40%, yellowgreen 0);
}
不仅如此，一旦 attr() 函数在 CSS 值（第三版） （http://w3.org/TR/css3-values/#attr-notation）中的扩
展定义得到广泛实现之后，你将可以通过一个简单的 HTML 标签属性来控制饼图的比率显示。
background: conic-gradient(#655 attr(data-value %), yellowgreen 0);
有了这件利器，在饼图中加入第三种颜色也会变得手到擒来。举个例子，如果要生成本段右上方的那个饼
图，我们只需要再增加两个色标就可以了：
background: conic-gradient(deeppink 20%, #fb3 0, #fb3 30%, yellowgreen 0);
84 第 3 章 形状
ࠡ JOEC
