svg transform-origin

SVG中的transform-origin属性用于指定元素变换的中心点。与CSS中的transform-origin类似，但是SVG中的坐标是相对于画布左上角计算的，而不是相对于元素本身。默认情况下，SVG元素的变换中心点是元素的中心点。可以使用transform-origin属性来改变变换的中心点。

相关问题

Svg 动画 transform scale 中心缩放

要实现 SVG 动画中心缩放的效果，可以通过以下步骤来操作：

1. 首先，将 SVG 元素进行定位，使其位于页面居中位置。可以使用 CSS 中的“position”属性和“transform”属性来实现。

2. 然后，使用 SVG 动画中的“animateTransform”元素来实现缩放动画。通过设置“attributeName”属性为“transform”，“attributeType”属性为“XML”，“type”属性为“scale”，“from”属性为“1”，“to”属性为所需缩放的值，以及“begin”和“dur”属性来控制动画的起始时间和持续时间。

3. 最后，通过设置“transform-origin”属性来指定缩放的中心点。可以将其设置为“50% 50%”，即 SVG 元素的中心点。

下面是一个示例代码，可以参考一下：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="red">
    <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="scale"
                      from="1"
                      to="0.5"
                      begin="0s"
                      dur="1s" />
  </rect>
</svg>

在上面的代码中，矩形元素被定位于 SVG 元素的中心位置，并且设置了一个缩放动画，持续时间为 1 秒。缩放的中心点被设置为矩形元素的中心点。

svg围绕自身中心点旋转

要让SVG元素围绕自身中心点旋转，可以使用CSS3的transform属性或SVG的transform属性。其中，CSS3的transform-origin属性可以设置旋转的中心点。例如，将一个矩形元素旋转45度并围绕自身中心点旋转，可以使用以下代码：

rect {
  transform: rotate(45deg);
  transform-origin: center;
}

而在SVG中，可以使用transform属性的rotate函数来实现旋转，并使用cx和cy属性来设置旋转中心点的坐标。例如，将一个矩形元素围绕自身中心点旋转45度，可以使用以下代码：

<rect x="50" y="50" width="100" height="50" fill="yellow" transform="rotate(45 100 75)" />

其中，rotate函数的第一个参数是旋转的角度，第二个参数是旋转中心点的x坐标，第三个参数是旋转中心点的y坐标。