HTML
CSS
JavaScript
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>IT书包</title>
</head>

<body>
<hgroup class="sixSpeed">
  <svg class="svg-sixSpeed" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <path d="M120 10Q78 39,100 100C15 88, 19 3, 120 10Z" id="speed"></path>
      <circle cx="95" cy="95" r="10" fill="white" id="icon-center"></circle>
    </defs>d
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed" fill="#C538F5" transform="rotate(40 95 95)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-center"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed" fill="#F44018" transform="rotate(112 95 95)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-center"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed" fill="#F7EA09" transform="rotate(184 95 95)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-center"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed" fill="#2BD067" transform="rotate(256 95 95)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-center"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed" fill="#4192F4" transform="rotate(328 95 95)"></use><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-center"></use></svg>
</hgroup>
</body>
</html>
CSS
.sixSpeed {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
JavaScript
(function() {
  var color = ['#C538F5','#F44018','#F7EA09','#2BD067','#4192F4'],
    j = 0;

  for (var i = 40; i < 400; i += 72) {
    // 创建 <use> 标签
    var useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use'),
      centerElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');

    // 创建命名空间
    useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#speed');
    useElement.setAttribute('fill', color[j++]);
    useElement.setAttribute('transform', 'rotate(' + i + ' 95 95)');

    centerElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#icon-center');

    // 插入 <use>
    document.querySelector('.svg-sixSpeed').appendChild(useElement);
    document.querySelector('.svg-sixSpeed').appendChild(centerElement);
  }
})();