Здесь я обновил свой HTML и CSS.Я сомневался в том, что когда я щелкну границу значка синим цветом, отобразится, но чтобы отобразить полную границу, нужно долго нажимать, но мое требование заключалось в том, чтобы щелкнуть значок один раз на границе этого значка, он должен охватывать весь значок.Здесь я использовал :active свойство для отображения границы.Я не знаю, в чем ошибка в этом коде.Можете ли вы предложить мне, как это сделать.
svg {
background: none;
border: 0;
box-sizing: border-box;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
outline: none;
}
svg::before, svg::after {
box-sizing: inherit;
content: '';
position: absolute;
}
.spin {
width: 5em;
height: 5em;
padding: 0;
}
.a:active {
stroke: #0eb7da;
}
.a::before, .a::after {
top: 0;
left: 0;
}
.a::before {
border: 2px solid transparent;
}
.a:active::before {
stroke: #0eb7da;
stroke: #0eb7da;
stroke: #0eb7da;
transition: border-top-color 0.30s linear, border-right-color 0.30s linear 0.1s, border-bottom-color 0.30s linear 0.2s;
}
.a::after {
border: 0 solid transparent;
}
.a:active::after {
stroke: 2px solid #0eb7da;
border-left-width: 2px;
border-right-width: 2px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
transition: border-left-width 0s linear 0.3ms, -webkit-transform 0.4ms linear 0ms;
transition: transform 0.4ms linear 0ms, border-left-width 0ms linear 0.35ms;
transition: transform 0.4ms linear 0ms, border-left-width 0s linear 0.35ms, -webkit-transform 0.4s linear 0s;
}
.circle {
border-radius: 100%;
box-shadow: none;
}
.circle::before, .circle::after {
border-radius: 100%;
}
.circle_border_animation {
stroke-dashoffset: 227;
transition: stroke-dashoffset 2s linear;
}
.circle_border_animation:active {
stroke-dashoffset: 0;
stroke-dasharray: 227;
}
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"
viewBox="0 0 48 48">
<defs>
<style>
.a {
fill: #fff;
stroke-width: 4px;
}
.b {
fill: #212121;
stroke: #212121;
}
.c {
stroke: none;
}
.d {
fill: none;
}
.e {
filter: url(#a);
}
</style>
<filter id="a" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse">
<feOffset dy="3" input="SourceAlpha" />
<feGaussianBlur stdDeviation="3" result="b" />
<feFlood flood-opacity="0.161" />
<feComposite operator="in" in2="b" />
<feComposite in="SourceGraphic" />
</filter>
</defs>
<g transform="translate(-1229 -37)">
<g class="e" transform="matrix(1, 0, 0, 1, 1229, 37)">
<g class="a circle_border_animation" transform="translate(9 6)">
<circle class="c" cx="15" cy="15" r="15" />
<circle class="d" cx="15" cy="15" r="13" />
</g>
</g>
<path class="b" d="M4,8.375h7.606L8.113,4.881,9,4l5,5L9,14l-.881-.881,3.487-3.494H4Z"
transform="translate(1244 49)" />
</g>
</svg>
</a>