当前位置: 首页 > 面试题库 >

在Chrome而非FF上运行的SVG上CSS动画的transform-origin

拓拔坚
2023-03-14
问题内容

我正在尝试使用CSS和SVG创建简单的动画:旋转齿轮。该动画可以在Chrome浏览器中完美运行,但不能在Firefox中运行。这是运行中的代码:

齿轮是SVG文件中的路径:

<div class="svg">
    <svg x="0px" y="0px" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <title>PDP</title>
    <text x="44" y="120" class="gear_text">PDP</text>
    <g transform="translate(50%, 50%)">
        <path id="gear1" class="gear go-clockwise" x="0px" y="0px" d="m91.63252,0l-4.16735,23.73752l0.01604,0.01606c-5.09374,0.83228 -10.02215,2.16622 -14.72963,3.9428l0,-0.01584l-15.46727,-18.48038l-14.53742,8.39871l8.25439,22.63163l0.03211,0.01585c-3.9412,3.23531 -7.55353,6.86028 -10.78684,10.8031l-0.01604,-0.04816l-22.63164,-8.25463l-8.39871,14.53743l18.48035,15.48333c-1.77354,4.70347 -3.09585,9.62447 -3.92695,14.71362l-0.01604,-0.01586l-23.73753,4.16734l0,16.79736l23.73753,4.16735l0.01604,-0.01587c0.83109,5.08915 2.15341,10.01014 3.92695,14.71381l-18.48035,15.48312l8.39871,14.53743l22.63164,-8.25444l0.01604,-0.04832c3.23331,3.94261 6.84564,7.56799 10.78684,10.80287l-0.03211,0.0159l-8.25439,22.63168l14.53742,8.39873l15.46727,-18.48027l0,-0.01582c4.70748,1.77637 9.63589,3.11047 14.72963,3.94278l-0.01604,0.01587l4.16735,23.73772l16.78132,0l4.16733,-23.73772l-0.01603,-0.01587c5.09294,-0.83009 10.02274,-2.15297 14.72985,-3.92696l15.4831,18.48047l14.53743,-8.39871l-8.27046,-22.63173c3.93234,-3.22687 7.54289,-6.83942 10.771,-10.7708l22.64757,8.25439l8.38263,-14.53741l-18.4642,-15.48308c1.77402,-4.70432 3.11153,-9.62388 3.94283,-14.71384l23.73775,-4.15126l0,-16.79738l-23.73775,-4.16735c-0.83148,-5.08432 -2.17067,-9.99828 -3.94283,-14.69775l18.4642,-15.4831l-8.38263,-14.53745l-22.64757,8.25443c-3.2281,-3.93136 -6.83842,-7.54391 -10.771,-10.77079l8.27046,-22.63168l-14.53743,-8.39871l-15.4831,18.48042c-4.70711,-1.77378 -9.63691,-3.09688 -14.72985,-3.92696l0.01603,-0.01586l-4.16733,-23.73761l-16.78132,0l0,-0.00011l0,0zm8.39869,40.8716c32.67677,0 59.17564,26.48283 59.17564,59.1596c0,32.67677 -26.49887,59.15962 -59.17564,59.15962c-32.67677,0 -59.15962,-26.48285 -59.15962,-59.15962c0,-32.67677 26.48286,-59.1596 59.15962,-59.1596z" stroke-dashoffset="0" stroke-miterlimit="4" stroke-linejoin="round" stroke-linecap="round" stroke-width="2"/>
    </g>
</svg>

然后使用CSS来应用动画:

.svg {
  width:200px;
  height:200px;
  float:left;
  position: fixed;
  top: 20px;
  left: 50px;
}

.go-clockwise {
  -webkit-animation: clockwise 3s infinite linear;
  -moz-animation: clockwise 3s infinite linear;
}

.go-counter-clockwise {
  -webkit-animation: counter-clockwise 3s infinite linear;
  -moz-animation: counter-clockwise 3s infinite linear;
}
path.gear{
  fill: #3f3f3f;
}
text.gear_text{
  font-size: 55px;
  font-weight: 900;
  fill: #3f3f3f;
}

@-webkit-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }
}

@-moz-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }
}

@-webkit-keyframes counter-clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }

  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }
}

@-moz-keyframes counter-clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;

  }

  100% {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    transform-origin: center center;
  }
}

使用CSS是首选方法,因为我正在动态应用该类。(向下滚动时为逆时针方向,向上滚动时为顺时针方向),但是出于这个问题的目的,我只应用一个类。Chrome可以很好地实现它,但是Firefox似乎
并未采用-moz-transform-origin
属性。不管我用什么,Firefox似乎都从(0,0)的原点开始应用转换,而Chrome接管了transform-origin属性并正常工作。

我已经尝试了几乎所有可以找到的东西。谁有想法?


问题答案:

我有一个工作的例子:

这个答案的问题是x=""y=""属性不适用于所有svg元素,在您的情况下,它们对text元素有效,但对path无效。

我的答案涉及CSS transform: translate()。当您尝试在同一元素上运行动画时,这些值(以及inline
path属性transform="translate()")将重置,因为动画也是transform- transform: rotate()。我试图将平移链接到旋转上,但这在FF中也无法正常工作。

我把路径包装成两个g。路径和外部组用于偏移/重置对齐,中间一组用于动画。



 类似资料:
  • 案例1: 使用时: 获取异常: 看到的超文本标记语言套件异常:java.lang.RuntimeException:java.lang.RuntimeException: GoogleChrome在路径中找不到!请将包含“chrome.exe”或“google-chrome”或“GoogleChrome”的目录添加到您的PATH环境可用,或显式指定GoogleChrome路径,如下所示:*goog

  • 问题内容: Firefox 18.0.1上的css @ -moz-keyframes动画不起作用, 我已经检查了该动画的先前版本(忘记了先前的版本号),它在起作用, 这是动画 是Firefox错误吗? 问题答案: Firefox18(以及Opera,IE10和不久的将来的许多其他产品)期望W3C属性没有供应商前缀。确保添加以下块: 请注意,属性也已更改为。 对于所有带前缀的CSS属性,您应 始终包

  • 我有使用此代码: 这是: 我以这种方式创建了重定向页面,因为对我来说,它将加载和显示某些内容,而不是直接重定向(因此,它会生成200代码,而不是302代码)。 但是,仅在Chrome和Safari上,重定向的标题包含有关引用url的信息,即,因此,例如,将知道访问者来自。 但是在IE和FF上,标题中的referer为空。是什么导致了这种不同的行为?我如何修复它,让他们携带相同的推荐人信息呢?

  • 我有一个很好的SVG元素,我通过从0px-70px增长它来动画。这个元素也是一个按钮,在悬停时有一个很好的笔划动画。我的问题是,用于笔划动画的CSS过渡属性会影响元素出现时的增长速度。我不想我的悬停动画去太快,但出现动画是太慢了。 JS: http://codepen.io/anon/pen/qbelqy 除了用jQuery手动更改transition属性之外,还有什么方法可以解决这个问题吗?这是

  • 如果这个问题以前已经被问过,我很抱歉,但是我到处都查过了,找不到答案。 如何在pygame中进行自上而下的移动? 如果我只是使用矩形,这将很容易,但我将使用单个角色精灵(例如。如果我按d让玩家向右走,它会显示他向右走的角色精灵,并将角色向右移动)。 我的意思的示例图像:

  • 问题内容: 我设置了一个动画,可以在Chrome 上正常运行,但是不能在Safari(IOS9 iPhone或9-El Capitan)上运行,也不能在Firefox上运行。 问题答案: @asimovwasright的答案是正确的。 为了避免在CSS上发生太多重复,我将SCSS与一起使用,以遍历所有可用范围(在本例中为8) 和HTML: