3
私はsvgでドーナツチャートを作成しています。ドーナツリングのホバー上にツールチップを表示したいと思います。私はマウスイベントをキャプチャする<set />タグを使用することができ、私はツールチップを作成するために、これらを使用することができることを知ってSVGツールチップをストロークに追加<circle />
.container {
display: flex;
flex-flow: row wrap;
}
.card {
width: 20em;
height: 20em;
padding: 2em;
background-color: white;
margin: 2em;
box-shadow: 0 0 5px #222;
}
.pie-center {
background: transparent;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: transparent;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}
.circle2 {
fill: transparent;
stroke: orangered;
stroke-width: 7;
stroke-dasharray: 45 55;
stroke-dashoffset: -30;
}
.circle3 {
fill: transparent;
stroke: orchid;
stroke-width: 7;
stroke-dasharray: 20 80;
stroke-dashoffset: -75;
}
.circle4 {
fill: transparent;
stroke: yellowgreen;
stroke-width: 7;
stroke-dasharray: 5 95;
stroke-dashoffset: -95;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<svg class="pie-center" viewBox="0 0 32 32">
<circle class="circle1" r="15.915494309" cx="16" cy="16" />
<circle class="circle2" r="15.915494309" cx="16" cy="16" />
<circle class="circle3" r="15.915494309" cx="16" cy="16" />
<circle class="circle4" r="15.915494309" cx="16" cy="16" />
</svg>
</div>
</div>
</body>
</html>：私はこのようなドーナツを構築しています。問題は、ドーナツリングの各セクションが実際には円であり、サークル上のstrokeプロパティが実際にホバーイベントを捕捉したい部分であることです。
したがって、私のサークルにホバーアクションを追加しようとすると、私は希望の結果を得られません。
これは私が（ちょうどツールチップを追加するためのイベントをキャプチャシミュレートするために、ホバー上のドーナツ部分の赤を回して）しようとしたものです：
.container {
display: flex;
flex-flow: row wrap;
}
.card {
width: 20em;
height: 20em;
padding: 2em;
background-color: white;
margin: 2em;
box-shadow: 0 0 5px #222;
}
.pie-center {
background: transparent;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: transparent;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}
.circle2 {
fill: transparent;
stroke: orangered;
stroke-width: 7;
stroke-dasharray: 45 55;
animation: dash3 1s ease 0s 1 forwards;
stroke-dashoffset: -30;
}
.circle3 {
fill: transparent;
stroke: orchid;
stroke-width: 7;
stroke-dasharray: 20 80;
animation: dash2 1s ease 0s 1 forwards;
stroke-dashoffset: -75;
}
.circle4 {
fill: transparent;
stroke: yellowgreen;
stroke-width: 7;
stroke-dasharray: 5 95;
animation: dash 1s ease 0s 1 forwards;
stroke-dashoffset: -95;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card new">
<svg class="pie-center" viewBox="0 0 32 32">
<circle class="circle1" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='teal' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle2" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='orangered' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle3" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='orchid' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle4" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='yellowgreen' to='red' begin='mouseover' end='mouseout' />
</circle>
</svg>
</div>
</body>
</html>私の質問は次のとおりです。があります円ストロークでホバーイベントをキャプチャする方法はありますか？または、<path />や、ホバーイベントをよりよくサポートする他のsvg要素を使用して、ドーナツチャートを作成する別の方法がありますか？
可能であれば、第三者のライブラリを使用したくないです（D3、chart.jsはありません）。
ありがとうございました!!私はパスを使ってこれを再現しようとしているウサギの穴に行っていた（これはもっと難しい）。 'fill：transparent'ではなく' fill：none'を使うことは決してありませんでした。ありがとうございます。 – BradStell