我正在创建一个带有svg的圆环图,我希望在圆环上悬挂工具提示.我正在建造这样的甜甜圈:
.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>我知道我可以使用<set />标签捕获鼠标事件,我可以使用它们来创建工具提示.问题是圆环的每个部分实际上都是一个圆圈,圆圈上的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>我的问题是:有没有办法捕获圆圈笔划上的悬停事件？或者是否有另一种创建圆环图的方法,使用say <path />或其他一些能更好地支持悬停事件的svg元素？
如果可能,我不想使用第三方库(没有D3或chart.js).
使用fill:none而不是fill:transparent,这样填充就不会起作用.事实上,使用填充真的没有充分的理由:透明.
.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: none;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: none;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}
.circle2 {
fill: none;
stroke: orangered;
stroke-width: 7;
stroke-dasharray: 45 55;
animation: dash3 1s ease 0s 1 forwards;
stroke-dashoffset: -30;
}
.circle3 {
fill: none;
stroke: orchid;
stroke-width: 7;
stroke-dasharray: 20 80;
animation: dash2 1s ease 0s 1 forwards;
stroke-dashoffset: -75;
}
.circle4 {
fill: none;
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>