svg的圆弧路径

Question

我是SVG的新手，想要寻求以下设计的最佳方法：

我相信SVG是这里的方式，因为我需要在每个红色弧片上悬停和点击效果。这些值和这种设计基本上是硬编码的，不会改变。是否有任何工具/库（D3或Raphael）可以让我更容易？

提前致谢。

Answer 1

meetamit的建议很好。或者您可以查看此处显示的“扇区”方法： Half circle using raphael

Answer 2

你真的不需要d3甚至是编辑。这是一种易于手工编码的设计。

我很无聊，所以我在大约10分钟内把它鞭打了。

＆＃13;

＆＃13;

document.getElementById("band4").addEventListener("click", function(e) {
    alert("50+");
}, false);

document.getElementById("band3").addEventListener("click", function(e) {
    alert("20-50");
}, false);

document.getElementById("band2").addEventListener("click", function(e) {
    alert("10-20");
}, false);

document.getElementById("band1").addEventListener("click", function(e) {
    alert("Less than 10");
}, false);

＆＃13;

svg {
  position: absolute;
  top: 0px;
}


circle.band {
    fill: #a20c3e;
}

circle.band:hover {
    fill: #ca3f5e;
}

text {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: bold;
    fill: white;
}

tspan.sup {
    font-size: 6px;
}

text.sub {
    font-size: 5px;
    font-weight: normal;
}

＆＃13;

<img src="http://lorempixel.com/400/200/" width="100%"/>

<svg viewBox="-100 -100 200 100">
    <defs>
        <mask id="target">
            <rect x="-100" width="100%" height="100%" fill="black"/>
            <circle r="97" fill="white"/>
            <circle r="77" fill="black"/>
            <circle r="74" fill="white"/>
            <circle r="54" fill="black"/>
            <circle r="51" fill="white"/>
            <circle r="31" fill="black"/>
            <circle r="28" fill="white"/>
        </mask>
    </defs>
    <circle id="band4" class="band" r="98" mask="url(#target)"/>
    <circle id="band3" class="band" r="75" mask="url(#target)"/>
    <circle id="band2" class="band" r="52" mask="url(#target)"/>
    <circle id="band1" class="band" r="29" mask="url(#target)"/>
    <text y="-82" text-anchor="middle" pointer-events="none">50<tspan class="sup" font-size="50%" dy="-0.7em">+</tspan></text>
    <text y="-59" text-anchor="middle" pointer-events="none">20-50</text>
    <text y="-36" text-anchor="middle" pointer-events="none">10-20</text>
    <text y="-17" text-anchor="middle" class="sub" pointer-events="none">Less than</text>
    <text y="-6" text-anchor="middle" pointer-events="none">10</text>
</svg>

＆＃13;

＆＃13;

＆＃13;