Ошибка перехода масштаба элемента пути SVG в браузере Firefox - PullRequest
Новая
       18

Ошибка перехода масштаба элемента пути SVG в браузере Firefox

5 голосов
/ 05 марта 2020

Я пытаюсь анимировать элемент пути svg при наведении, добавляя к нему масштабный переход преобразования.

Он отлично работает, как и предполагалось, на chrome, но на firefox он прерывает переход.

Примечание. Работает без анимации перехода, но в этом случае использования необходим переход.

HTML: 

<svg viewBox="-1.1 -1.1 2.2 2.2">
  <g>
    <path d="M 1 0 A 1 1 0 0 1 -0.8085734960732691 0.5883951915573843 L 0 0" fill="#ACC6D9" stroke="#ACC6D9" stroke-width="0.01"></path>
    <path d="M -0.8085734960732691 0.5883951915573843 A 1 1 0 0 1 -0.8100500340267164 -0.5863607612837983 L 0 0" fill="#93B5D1" stroke="#93B5D1" stroke-width="0"></path>
    <path d="M -0.8100500340267164 -0.5863607612837983 A 1 1 0 0 1 0.3063859980740773 -0.9519073590345604 L 0 0" fill="#81A8C9" stroke="#81A8C9" stroke-width="0"></path>
    <path d="M 0.3063859980740773 -0.9519073590345604 A 1 1 0 0 1 0.999992891049955 -0.0037706563822101314 L 0 0" fill="#6E9CC1" stroke="#6E9CC1" stroke-width="0"></path>
  </g>
  <circle cx="0" cy="0" r="0.5" fill="#393D45"></circle>
</svg>

CSS: 

path{
  transition: transform 0.2s;
}
path:hover{  
  transform: scale(1.1);
}

Ссылка JSFiddle: https://jsfiddle.net/tpkjf15b/2/

Редактировать:

Chrome 80 (требуемый вывод): GIF

Firefox 74 (сломано): GIF

Ответы [ 2 ]

2 голосов
/ 12 марта 2020

Это странная ошибка, по-видимому, вызванная дробной шириной хода, как продемонстрировано в этом уменьшенном случае: 

path {
  transform: scale(1, 1);  
  transition: transform 0.2s linear;
}
path:hover {  
  transform: scale(1.1, 1.1);
}
:checked ~ svg path {
  stroke-width: 0.1;
  stroke: red;
}
<input id="inp" type="checkbox"><label for="inp">add stroke</label><br>
<svg viewBox="-2.5 -2.5 10 10" width="300">
    <path d="M0 0 L2.5 0 L0 2.5 Z" fill="#ACC6D9"></path>
  <circle cx="0" cy="0" r="0.5" fill="#393D45"></circle>
</svg>

Так что для вашего случая, поскольку штрихи имеют тот же цвет, что и заливки, вы можете избежать этой ошибки переопределив ваши фигуры так, что вам не нужен этот штрих взломать . Я предполагаю, что вы использовали его, чтобы избежать сглаживания артефактов, но вместо такого взлома вам было бы лучше использовать целочисленные координаты, когда это возможно, или, возможно, просто использовать viewBox, который бы позволил ширине мазка составлять 1.

Кроме того, я не проверял, упоминалась ли уже эта ошибка, но я все еще могу воспроизвести на Nightly 76, так что вы можете захотеть открыть вопрос об bugzilla Mozilla.

0 голосов
/ 12 марта 2020

Вам нужно написать css transform: translate3d(0px,0px,1px) scale(1); свойство на path до hover, а with hover нужно написать что-то вроде transform: translate3d(0px,0px,1px) scale(1.1);

Наконец transform: translateZ(1px);, чтобы он отлично работал в FF .
Работает тоже: transform: translate3d(0px,0px,1px);

Надеюсь, это вам очень поможет. 

path{
  transform: translate3d(0px,0px,1px) scale(1);
  transition: transform 0.2s;
}
path:hover{  
  transform: translate3d(0px,0px,1px) scale(1.1);
}
<svg viewBox="-1.1 -1.1 2.2 2.2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="backface-visibility: hidden;">
  <g>
    <path d="M 1 0 A 1 1 0 0 1 -0.8085734960732691 0.5883951915573843 L 0 0" fill="#ACC6D9" stroke="#ACC6D9" stroke-width="0.01"></path>
    <path d="M -0.8085734960732691 0.5883951915573843 A 1 1 0 0 1 -0.8100500340267164 -0.5863607612837983 L 0 0" fill="#93B5D1" stroke="#93B5D1" stroke-width="0"></path>
    <path d="M -0.8100500340267164 -0.5863607612837983 A 1 1 0 0 1 0.3063859980740773 -0.9519073590345604 L 0 0" fill="#81A8C9" stroke="#81A8C9" stroke-width="0"></path>
    <path d="M 0.3063859980740773 -0.9519073590345604 A 1 1 0 0 1 0.999992891049955 -0.0037706563822101314 L 0 0" fill="#6E9CC1" stroke="#6E9CC1" stroke-width="0"></path>
  </g>
  <circle cx="0" cy="0" r="0.5" fill="#393D45"></circle>
</svg>
...