代码之家 › 专栏 › 技术社区 › tosi

svg旋转不正确[复制]

svg html5 javascript

tosi · 技术社区 · 8 年前

CSS:

.image {
     -webkit-animation:spin 4s linear infinite;
     -moz-animation:spin 4s linear infinite;
     animation:spin 4s linear infinite;
}
.image2 {
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;    
}

    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

svg文件包含两个路径,我在其中分别添加spin类,因为这两个路径需要不同的旋转速度。

以下是jsfiddle: http://jsfiddle.net/f0cn4x1k/

任何帮助都是有用的,

1 回复 | 直到 8 年前

Enkode 8 年前

你的CSS不正确。

JSFiddle公司: http://jsfiddle.net/hy5t1Laz/

.image
{
   -webkit-animation: spin 4s infinite linear;
  -o-animation: spin 4s infinite  linear;
   animation: spin 4s infinite linear;
  transform-origin: center center;
  transform-box: fill-box;
}


@-webkit-keyframes spin {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  from {-moz-transform: rotate(0deg);}
  to {-moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
  from {-o-transform: rotate(0deg);}
  to {-o-transform: rotate(360deg);}
}
@keyframes spin{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

推荐文章

WebDragon · 是否可以通过在html<SVG>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容?

1 年前

Paul Lovell · 为什么JavaScript中生成的SVG元素的大小与HTML中直接定义的SVG元素不同?

1 年前

man · CSS-如何具有或模拟仅适用于内部的半径边框

1 年前

McLaren · 增加笔划宽度属性后,图标将被裁剪

1 年前

docker compose · React Native中椭圆或圆角矩形视图周围的进度边界

1 年前

Lucas Martins Soares · 如何覆盖SVG图像的默认颜色?[副本]

1 年前

user2171796 · 两个M。。。Z序列相遇,背景颜色显现

2 年前

MarcelausZell · 调整svg的大小会导致额外的高度

2 年前

RaiuProGram · Svg evenoodd=“true”不起作用(用路径在Svg上打孔)

2 年前

compx · 当尝试使用Selenium选择svg时,NoSuchElements存在

2 年前