从中心点而不是左上角的SVG缩放动画 [英] SVG Scale Animation from Center Point instead of Upper-Left Corner

问题描述

如何在SVG中使用 animateTransform 从中心点而不是左上角缩放对象？

示例：

 < svg version = 1.1 xmlns = http：//www.w3。 org / 2000 / svg xmlns：xlink = http://www.w3.org/1999/xlink width = 100px height = 100px> 
< circle style = fill：blue; cx = 50 cy = 50 r = 45> 
< animateTransform attributeName = transform 
 type = scale 
 from = 0 0 
 to = 1 1 
 begin = 0s 
 dur = 1s 
 repeatCount =不确定 
 /> 
< / circle> 
< / svg> 
  

（Codepen：

解决方案

更改缩放比例转换以使用 additive = sum 并应用附加的变换，该变换将圆平移到图像的中心。因此，与其定义图像中心的形状，不如将其中心定义为 0 0 ，然后使用 transform 属性，将其转换为 50、50 （特定图像的确切中心）。

 < svg版本= 1.1 xmlns = http://www.w3.org/2000/svg xmlns：xlink = http://www.w3.org/1999/xlink width = 100px height = 100px> 
< circle style = fill：blue; cx = 0 cy = 0 r = 45 transform = translate（50 50）> 
< animateTransform attributeName = transform 
 type = scale 
 Additive = sum 
 from = 0 0 
 to = 1 1 
 begin = 0s 
 dur = 1s 
 repeatCount = indefinite 
 /> 
< / circle> 
< / svg> 
  

这里是使用 defs 和使用标记重复使用圆定义：

 < svg version = 1.1 xmlns = http://www.w3.org/2000/svg xmlns：xlink = http://www.w3.org/1999/xlink width = 100px height = 100px> 
< defs> 
< circle id = def-circle style = fill：blue; cx = 0 cy = 0 r = 45 /> 
< / defs> 
 
<使用xlink：href =＃def-circle transform = translate（50 50）> 
< animateTransform attributeName = transform 
 type = scale 
 Additive = sum 
 from = 0 0 
 to = 1 1 
 beg = 0s 
 dur = 1s 
 repeatCount = indefinite /> 
< / use> 
< / svg> 
  

How do I use animateTransform in an SVG to scale an object from the center point instead of the upper-left corner?

Example:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <circle style="fill:blue;" cx="50" cy="50" r="45">
        <animateTransform attributeName="transform"
             type="scale"
             from="0 0"
             to="1 1"
             begin="0s"
             dur="1s"
             repeatCount="indefinite"
        />
    </circle>
</svg>

(Codepen: http://codepen.io/anon/pen/wKwrPg?editors=100)

解决方案

Change your scaling transform to use additive="sum" and apply an additional transform that translates the circle to the center of the image. So instead of defining the shape at the center of the image, define its center to be 0 0 and then use the transform attribute to translate it to 50, 50 (the exact center of your particular image).

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <circle style="fill:blue;" cx="0" cy="0" r="45" transform="translate(50 50)">
        <animateTransform attributeName="transform"
             type="scale"
             additive="sum" 
             from="0 0"
             to="1 1"
             begin="0s"
             dur="1s"
             repeatCount="indefinite"
        />
    </circle>
</svg>

Here's another example using the defs and use tags to reuse the circle definition:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
    <defs>
        <circle id="def-circle" style="fill:blue;" cx="0" cy="0" r="45" />
    </defs>

    <use xlink:href="#def-circle" transform="translate(50 50)">
        <animateTransform attributeName="transform" 
        type="scale"
        additive="sum"    
        from="0 0"
        to="1 1"      
        beg="0s"
        dur="1s"
        repeatCount="indefinite" />
    </use>   
</svg>

这篇关于从中心点而不是左上角的SVG缩放动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！