带 svg 的圆弧路径答案

【问题标题】：circular arc paths with svg带 svg 的圆弧路径
【发布时间】：2014-12-28 05:15:25
【问题描述】：

我对 SVG 还是很陌生，想寻求以下设计的最佳方法：

我相信 SVG 是解决问题的方法，因为我需要悬停和单击每个红色弧段上的效果。这些值和这种设计本质上是硬编码的，不会改变。是否有任何工具/库（D3 或 Raphael）可以让我更容易做到这一点？

提前致谢。

【问题讨论】：

如果它是硬编码和静态的，使用图形程序（Illustrator、Inkscape）绘制它并将其导出为 svg 可能是最直接的。
我实际上并不确定这些是否是常规弧线，所以这有点依赖于此。但如果是静态的，确实可能值得单独绘制。

标签： svg d3.js path raphael

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

我很无聊，所以我在大约 10 分钟内完成了这个。

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);

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;
}

<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>

【讨论】：

这是一个非常有创意的解决方案，但是，我可能需要更清楚您在每个段之间创建的“带”需要是透明的（注意显示在 svn 元素后面的 bg 图像） .
它们是透明的。我在后面添加了一张图片来证明这一点。