Question

我正在创建一个带有svg的圆环图，我希望在圆环上悬挂工具提示。我正在建造这样的甜甜圈：

＆＃13;

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

＆＃13;

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

＆＃13;

我知道我可以使用<set />标记捕获鼠标事件，我可以使用它们来创建工具提示。问题是圆环的每个部分实际上都是一个圆圈，圆圈上的stroke属性是我实际想要捕获悬停事件的部分。

因此，当我尝试向我的圈子添加悬停操作时，我不会得到理想的结果。

这就是我所尝试过的（只需将悬停部分转为红色，以模拟捕获事件以添加工具提示）：

＆＃13;

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

＆＃13;

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

＆＃13;

我的问题是：有没有办法在圆圈笔划上捕捉悬停事件？或者是否有其他方法来创建圆环图，使用说<path />或其他一些更好地支持悬停事件的svg元素？

如果可能，我不想使用第三方库（没有D3或chart.js）。

Answer 1

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

在<circle>上添加SVG工具提示到笔画

1 个答案: