围绕其中心旋转svg元素 [英] Rotating svg elements about their center

问题描述

我有一个SVG图像，其中有一些我想绕其自身中心(圆心)旋转的圆.但是，当我设置transform-origin:center，然后应用变换时，它开始围绕整个SVG图像的中心旋转.有什么方法可以设置变换原点，以使圆围绕自己的中心旋转吗?

I have an SVG image, in which there are individual circles that I want to rotate about their own center (the center of the circles). However when I set transform-origin:center, and then apply a transform, it starts rotating about the center of the whole SVG image. Is there any way to set the transform origin such that the circles rotate about their own center?

这是原始svg图像(我无法在此处粘贴原始代码，因此): SVG图像

Here is the original svg image (I cannot paste the original code here so this): SVG image

这是一个jsfiddle: https://jsfiddle.net/g9zfcdm3/3/

Here is a jsfiddle for this: https://jsfiddle.net/g9zfcdm3/3/

图像中有4个圆圈.只要有一个小组就能做到这一点就足够了.我真正想要实现的是对这些圆进行动画处理，以使它们围绕自己的中心无限地旋转.

There are 4 circles in the image. Achieving this with any one cirlce would be good enough. What I actually want to achieve is to animate these circles so that they rotate indefinitely around their own center.

推荐答案

在Firefox中查看有关您的问题的此错误报告(解决为无效):

See this (resolved as invalid) bug report in Firefox about your problem: https://bugzilla.mozilla.org/show_bug.cgi?id=1209061

通常，SVG元素上的CSS变换是相对于视口而不是元素本身.可以通过添加transform-box: fill-box:

Normally, CSS transforms on SVG elements are relative to the viewport and not to the element itself. This can be changed by adding transform-box: fill-box:

svg .rotate {
  animation: rotate 5s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

正在工作的小提琴: https://jsfiddle.net/g9zfcdm3/10/

从有关transform-box 的MDN文档中:

From the MDN docs about transform-box:

transform-b​​ox CSS属性定义了与transform和transform-origin属性相关的布局框.

The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.

边框(默认)

边界框用作参考框. a的引用框是其表包装器框的边框，而不是其表框.

The border box is used as the reference box. The reference box of a is the border box of its table wrapper box, not its table box.

填充框

对象边界框用作参考框.

The object bounding box is used as the reference box.

请注意，这是一项实验性功能，可能无法在IE和Edge中使用.

Note that it's an experimental feature and probably won't work in IE and Edge.

这篇关于围绕其中心旋转svg元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！