У меня есть компонент перекрестия во Vue, в котором анимация сканирования запускается, когда его состояние меняется на сканирование. Проблема в том, что когда многоточие в svg, содержащем анимацию сканирования, масштабируется выше 1, оно начинает обрезаться. Я бы хотел предотвратить это. Он не обрезается, если я удаляю Mask='url(#mask0_0_1)' в элементе g, но тогда я теряю маску, которая мне нужна.
Crosshair.vue
enum crosshairState {
Default,
Pulse,
Scan
}
withDefaults(defineProps(), {
state: crosshairState.Default
})
@keyframes pulseAnimation {
0%, 100% {
opacity: 0;
rx: 0px;
ry: 0px;
}
50% {
opacity: 1;
rx: 171.674px;
ry: 148.497px;
}
}
@keyframes rectPulseAnimation {
0%, 100% {
width: 0px;
}
50% {
width: 119px;
}
}
@keyframes scanAnimation {
0% {
transform: scale(0);
opacity: 0;
fill: #95F39B;
}
50% {
transform: scale(1);
opacity: 1;
fill: #95F39B;
}
85% {
transform: scale(1.3);
fill: white;
}
100% {
transform: scale(1);
fill: #95F39B;
}
}
@keyframes rectScanAnimation {
0% {
width: 0px;
}
75% {
width: 125px;
}
100% {
width: 119px;
}
}
@keyframes hide {
0% {
opacity: 1
}
100% {
opacity: 0;
}
}
.pulse {
animation: pulseAnimation 1.5s infinite ease-in-out;
transform-origin: center;
}
.rect-pulse {
animation: rectPulseAnimation 1.5s infinite;
}
.scan {
animation: scanAnimation 3s ease forwards;
transform-origin: center;
}
.rect-scan {
animation: rectScanAnimation 3s ease forwards;
transform-origin: center;
}
.hide {
animation: hide 0.5s forwards;
animation-delay: 3.5s;
}
Test.vue
const s = ref(1)
CLICK ME
Подробнее здесь: https://stackoverflow.com/questions/790 ... nt-to-clip
