Svg 动画 transform scale

SVG动画中可以使用transform属性来实现缩放动画。可以在SVG元素中设置transform属性，其中scale()函数可以用来实现缩放。scale()函数接受两个参数，分别表示横向和纵向的缩放比例。例如，设置transform属性为`transform="scale(1.5)"`表示将元素放大1.5倍，而`transform="scale(0.5, 1.2)"`则表示将元素在横向缩小一半，在纵向放大1.2倍。在动画中可以通过设置不同的缩放比例来实现元素的缩放动画，例如：

<svg>
  <rect x="50" y="50" width="100" height="100">
    <animate attributeName="transform" attributeType="XML"
             type="scale" from="1" to="2" dur="1s" fill="freeze" />
  </rect>
</svg>

这段代码将一个矩形元素从原始大小（scale(1)）缩放到2倍大小（scale(2)），动画时长为1秒。其中，attributeName属性指定要动画的属性为transform，attributeType属性指定动画属性的类型为XML，type属性指定动画类型为scale，from属性指定起始缩放比例为1，to属性指定结束缩放比例为2，dur属性指定动画时长为1秒，fill属性指定动画结束后保持缩放状态。

相关问题

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 中心缩放动画 transform scale

SVG中心缩放动画可以使用`transform`属性的`scale`函数来实现。下面是一个例子，它将一个圆形从原始大小逐渐缩小到一半大小，并在缩放过程中保持在中心位置：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue">
    <animateTransform 
      attributeName="transform"
      attributeType="XML"
      type="scale"
      from="1"
      to="0.5"
      dur="1s"
      repeatCount="indefinite"
      additive="sum"
      calcMode="spline"
      keySplines="0.5 0 0.5 1; 0.5 0 0.5 1;"
      keyTimes="0; 1"
    />
  </circle>
</svg>

在上面的例子中，`animateTransform`元素指定了一个`scale`类型的变换动画，`from`属性指定了起始值，`to`属性指定了结束值，`dur`属性指定了动画持续时间，`repeatCount`属性指定了动画重复次数（如果设置为`indefinite`，则将无限重复），`additive`属性指定了动画与其他变换的组合方式，`calcMode`属性指定了动画的计算模式，`keySplines`属性指定了动画的缓动曲线，`keyTimes`属性指定了动画的关键帧时间。

注意，由于`scale`变换是相对于元素的中心点进行的，因此在缩放时，元素将始终保持在中心位置。如果需要更改缩放的中心点，可以使用`translate`变换来移动元素到所需位置。