html - svg css 动画改变位置和大小，我只想改变大小

Question

我想在 svg 中制作一个元素，以便为我正在制作的动画变大或变小。

我添加了一个简化的 svg 来演示我遇到的问题。

发生的事情是盒子越来越大(好)，但它也从顶部向下移动(坏)，我希望它留在原地。

我希望正方形的中心保持不变，同时它在 Y 方向上变大。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640">
<style>

    path{
        animation: shine-1 1s infinite linear; 
    }


    @keyframes shine-1 {
        from{
            transform: scaleY(0);
        }
        to{
            transform: scaleY(1);
        }
    }
</style>
<defs><path d="M237.65 286.88L379.91 286.88L379.91 394.87L237.65 394.87L237.65 286.88Z" id="j122ygNii7"></path></defs><g><g><g><use xlink:href="#j122ygNii7" opacity="1" fill="#dc9bd9" fill-opacity="1"></use></g></g></g></svg>

Answer 1

我需要的是动画后的 transform-origin 属性和 transform-b​​ox 属性。 它需要以 50% 50% 将其变换原点放在中心 它还迫切需要将转换框设置为填充框。

那么所有的动画都是相对于它们所在的位置。

.class{
        animation: spin-grow-ect 3s infinite linear;
        transform-origin: 50% 50%;
        transform-box: fill-box;
    }