SVG填充动画在Firefox和Edge上不起作用

Question

我有一个简单的动画，其中SVG悬停在鼠标上方。 在Chrome上运行正常，但我发现在Firefox或Edge上无法正常运行。 我尝试了几种不同的方法，但似乎无济于事。 我是SVG的新手，我想我缺少什么吗？ 什么是实现我要完成的正确方法？ 这是代码：

 svg#bogeLogo { display: block; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); } svg#bogeLogo #bogePath { fill: transparent; stroke: red; stroke-width: 8; } svg#bogeLogo #bogeFinal { fill: blue; } svg#bogeLogo #bogeClip rect { transition: all 1.4s ease-out !important; width: 0; } svg#bogeLogo:hover #bogeClip rect { width: 100%; } 

 <svg id="bogeLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2551.2 2551.2" style="enable-background:new 0 0 100 100;" xml:space="preserve"> <defs> <path id="bogePath" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"/> <clipPath id="bogeClip"> <rect x="0" y="0" height="100%" width="100%"/> </clipPath> </defs> <use xlink:href="#bogePath"/> <path id="bogeFinal" clip-path="url(#bogeClip)" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"></path> </svg> 

Answer 1

修改几何属性（例如width ）是SVG 2中的新功能。到目前为止，只有Chrome才实现了这一功能。

您将需要使用其他方法为<rect>设置动画。 例如，您可以使用transform将其水平移动，而不用更改其宽度。

更新

目前看来Firefox中存在一个错误，导致CSS选择器与 <defs>部分中的元素不匹配。

解决方案是将徽标用作剪切路径，然后将蓝色矩形移入和移出。

 svg#bogeLogo { display: block; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); } #bogePath { fill: transparent; stroke: red; stroke-width: 8; } svg#bogeLogo #bogeFinal { fill: blue; transition: all 1.4s ease-out !important; transform: translateX(-2552px); } svg#bogeLogo:hover #bogeFinal { transform: translateX(0px); } 

 <svg id="bogeLogo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2551.2 2551.2" style="enable-background:new 0 0 100 100;" xml:space="preserve"> <defs> <path id="bogePath" d="M1263.5,1239.5l0-1l0.8-1194.9l-60.3,0l-0.6,1195.9l-1146.6,0.2v60.3l1146.6-0.5v1195h59l1-1195 l1231.9,0.5l0-60.3L1263.5,1239.5z M779.6,1037c98.3-37.9,134.5-130.5,138.1-140c6.8-18.3,31.3-87,1.9-161.1 c-20.6-52-58.4-82.8-74.8-95.9c-23.2-18.5-45.4-27.8-61.3-34.5c13.2-6.5,52.6-26.9,76.7-90.2c26-68.5-0.8-128.3-7.7-143.8 c-25.5-57.3-74.1-84.5-95-96.9c-31.8-19-83.7-25.5-104.2-26.3L410.2,248v3.2l-1.1,800.3v1.1l293.7-0.2 C721.3,1051.7,748.9,1048.8,779.6,1037z M570.6,394.5c46.8-9.2,80.5-1.6,97.8,3.8c19.2,6.1,27.6,12.5,32.6,17.3 c22.3,21.1,22.8,51.6,23,61.4c0.2,9.5,0.7,37.9-19.2,61.4c-18.5,21.9-43.5,28.8-65.2,30.7c-31.6,2.7-51.9,2.2-69-1.9V394.5z M570.6,908.5V701.4c33.3-3.2,60.9-2.9,80.5-1.9c39.3,2,59.3,3.2,80.5,15.3c7,4,29.8,17.4,44.1,46c5.2,10.5,15.6,35.6,9.6,67.1 c-2.2,11.7-9.7,39.6-34.5,59.5c-11,8.7-25.4,16-63.3,21.1C660.3,912.2,620.2,914.9,570.6,908.5z M1835.5,1052.5 c218.7,0,395-184.3,395-403s-177.3-407-396-407s-396,188.3-396,407S1616.8,1052.5,1835.5,1052.5z M1835,390.5 c131.3,0,237.8,116.2,237.8,259.5S1966.3,909.5,1835,909.5S1597.2,793.3,1597.2,650S1703.7,390.5,1835,390.5z M636.5,1879.5v1l1,129 v0.1c73,0.1,142.9,0.3,216,0.4c-5.4,14.1-15,34.1-31.6,54.7c-5.9,7.2-35.7,43.1-89.4,63.7c-58.3,22.4-109.4,13.3-136.9,8.1 c-54.1-10.3-90.3-33.6-98.9-39.3c-39-25.9-60.5-55.8-71.8-71.8c-14.1-20-35.1-50.4-44.7-96.2c-2.4-11.6-10.4-54.2,2.7-107.1 c3.5-14.3,14.4-52.5,44.7-92.2c9.3-12.2,39.6-49.6,93.5-75.9c15.2-7.4,47.4-21.4,90.8-25.7c7.7-0.8,40-3.7,81.3,4.1 c19.2,3.6,46.7,9,77.2,25.7c14.7,8,31,19.8,63.7,43.4c8.8,6.3,15.7,12.5,20.5,16l90-106c-15.9-18.7-35.7-40.2-71-63 c-54-35-103.7-45.6-141.8-53.3c-31.3-6.3-86.6-17-158.1-6.3c-59.3,8.9-105.3,28.7-134.6,44.3c-49.5,26.2-82,56.1-95.8,69.6 c-39.5,38.6-60.6,75.2-65,83.1c-4.7,8.2-27.1,48.6-39.8,107.5c-2.3,10.9-9.1,44.7-9,89.4c0,22.3,0.4,59.9,13.6,106.6 c10.1,35.8,23.2,61,32.5,78.6c11,20.9,29,54.4,62.3,90.3c39,42.1,79.9,66.8,106.6,80.4c46.4,23.6,85.8,31.6,109.3,36.1 c25.3,4.9,72.3,11.8,131,6.3c27.9-2.6,61.2-6,102.1-21.7c14.8-5.7,58.3-23.6,103-63.2c42.8-37.9,65.1-76.5,79.5-102.1 c12.4-21.9,31.2-55.8,42.5-104.8c10.8-46.8,9.9-87,7.3-113.9L636.5,1879.5z M1019,1874.6c0,0.3,0.1,0.6,0.1,0.9l1.4,0L1019,1874.6z M1753.3,1919.6l291.8,1.1v-1.1l-1.1-142.2l-285.5,1.1h-1.1l1-137.9h1l304.6-3.3h1.1v-151.7h-464.6v2.1l-0.5,794l0,0.4h470.4v-146.4 h-317.1V1919.6z"/> <clipPath id="bogeClip"> <use xlink:href="#bogePath"/> </clipPath> </defs> <use xlink:href="#bogePath"/> <g clip-path="url(#bogeClip)"> <rect id="bogeFinal" x="0" y="0" height="100%" width="100%"/> </g> </svg>