I have a requirement to attain a screen with a circle with a message rating in it (number 1 to 10).
After that around that circle, I would certainly such as stimulate a screen that incates a scale obtaining fuller beginning at 0 relocating to the pertinent number.
This all jobs well in all internet browser other than Safari.
The minute you focus/ out, the display screen breaks and also the circles no more overlap.
We are utilizing CSS change. Exists any kind of different suggestions to attain something similiar? Example display revealing the making
Below is an example item of html to show the issue in Safari
<< html>>.
<< head>>.
<< design>>
. doughnut {
change: translateX( 2px);.
margin: car;.
}
. score-text {
fill: #ffffff;.
}
. score-text. additional {
fill: # 1B3A57;.
}
. slope-- begin {
stop-color: hsl( 209, 52.6%, 85%);.
}
. slope-- end {
stop-color: # 1B3A57;.
}
svg {
arrow: reminder;.
}
. circle-chart __ history {
stroke: #ffffff;.
stroke-width: 6;.
fill: # 1B3A57;.
change: fill 0.4 s convenience;.
}
. circle-chart __ background.secondary {
fill: #eaeaea;.
change: fill 0.4 s convenience;.
margin-left: 4px;.
}
. circle-chart __ circle {
computer animation: circle-chart-fill 2s opposite;.
change: turn( -90 deg);.
transform-origin: facility;.
stroke: link( #grad 2);.
stroke-width: 2;.
stroke-linecap: round;.
fill: none;.
}
. circle-chart __ circle-- adverse {
change: turn( -90 deg) range( 1, -1);.
}
@keyframes circle-chart-fill {
to {
stroke-dasharray: 0 100;.
}
}
@keyframes circle-chart-appear {
to {
opacity: 1;.
change: translateY( 0 );.
}
}
html {
font-family: sans-serif;.
padding-right: 1em;.
padding-left: 1em;.
}
<.
<.
<< body>>.
<< div course=" doughnut">
<> < div>>.
<< svg size=" 100%" elevation=" 100%" viewBox=" 0 0 42 42" course=" doughnut">
<> < defs>>.
<< linearGradient id=" grad2" x1=" 90%" y1=" 95%" x2=" 0%" y2=" 30%">
<> < quit countered=" 0%" course=" slope-- begin" stop-opacity=" 1"/>>.
<< quit countered=" 100%" course=" slope-- end"/>>.
<.
<.
<< circle.
course=" circle-chart __ history additional".
cx=" 19"
r=" 15.91549431"
cy=" 23"
/>>.
<< circle.
course=" circle-chart __ circle"
cx=" 19"
r=" 15.91549431"
cy=" 19"
stroke-dasharray=" 60 40".
v-if=" rating"
/>>.
<< g course=" circle-chart __ details">
<> < message.
course=" score-text additional".
x=" 19"
y=" 23"
alignment-baseline=" main"
text-anchor=" center"
font-size=" 8"
>>.
6.
<.
<.
<.
<.
<.
<.
<.
Below is a video clip that shows the concern.
https://vimeo.com/848865835?share=copy
