Svg Rounded corners?

Question

css

Basically I have SVG code for rounded corners. DEMO HERE
How to evenly fill each triangle so that a full circle comes out?

<svg version="1.1" id="smart_circle" x="0px" y="0px" viewBox="0 0 314.5 313.8" enable-background="new 0 0 314.5 313.8" xml:space="preserve" onmousedown="return false">
          <a xlink:href="javascript:void(0);" id="segment1">
            <path fill="#9139b2" d="M157.2,156.9V0.3c34.6,0,64.1,9.6,92.1,29.9L157.2,156.9z"/>
          </a>
          <a xlink:href="javascript:void(0);" id="segment8">
            <path fill="#00a0e3" d="M157.2,156.9l-149,48.4c-10.7-32.9-10.7-63.9,0-96.8L157.2,156.9z"/>
          </a>
          <a xlink:href="javascript:void(0);" id="segment7">
            <path fill="#dc4437" d="M157.2,156.9L65.2,283.6c-28-20.3-46.2-45.4-56.9-78.3L157.2,156.9z"/>
          </a>
          <a xlink:href="javascript:void(0);" id="segment6">
            <path fill="#00be9c" d="M157.2,156.9v156.6c-34.6,0-64.1-9.6-92.1-29.9L157.2,156.9z"/>
          </a>
          <a xlink:href="javascript:void(0);" id="segment5">
            <path fill="#64b044" d="M157.2,156.9l92.1,126.7c-28,20.3-57.5,29.9-92.1,29.9V156.9z"/>
          </a>
          <a xlink:href="javascript:void(0);" id="segment4">
            <path fill="#0032ff" d="M157.2,156.9l149,48.4c-10.7,32.9-28.9,58-56.9,78.3L157.2,156.9z"/>
          </a>
          <a xlink:href="javascript:void(0);" id="segment3">
            <path fill="#f1e411" d="M157.2,156.9l149-48.4c10.7,32.9,10.7,63.9,0,96.8L157.2,156.9z"/>
          </a>
          <a xlink:href="javascript:void(0);" id="segment2">
            <path fill="#ee7121" d="M157.2,156.9l92.1-126.7c28,20.3,46.2,45.4,56.9,78.3L157.2,156.9z"/>
          </a>
        </svg>

Answer 1

Run d3.js