Question

我希望通过围绕它的中心旋转来设置我的SVG动画，但是由于SVG的大小不同，中心点会根据我的网页中使用的位置而变化。

这是我的SVG：

<svg class="spinner" width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66">
    <title>spinning orange circle</title>
    <style>
        .path {
        stroke-dasharray: 187;
        stroke-dashoffset: 0;
        stroke: #ed770b;
        transform-origin: 50% 50%;
        animation: dash 1.4s ease-in-out infinite;
        }

        @keyframes dash {
        0% { stroke-dashoffset: 187; }
        50% {
        stroke-dashoffset: 46.75;
        transform:rotate(135deg);
        }
        100% {
        stroke-dashoffset: 187;
        transform:rotate(450deg);
        }
        }

    </style>
    <animateTransform attributeName="transform"
                      type="rotate"
                      from="0"
                      to="360"
                      begin="0s"
                      dur="1.4s"
                      repeatCount="indefinite"
    />
    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

将其复制到桌面并将其另存为SVG并在浏览器中运行以查看问题。

现在这可以在stackoverflow中工作，但是当它在我的页面上，或者只是在页面上时，微调器就会飞出视图。我怎么能让它围绕它的中心？假设我之后使用CSS将其扩展到50x50像素或更大，我怎么能让它围绕中心旋转呢？

编辑：如果您将动画变换更改为具有以下值：

<animateTransform attributeName="transform"
                  type="rotate"
                  from="0 14 14"
                  to="360 14 14"
                  begin="0s"
                  dur="1.4s"
                  repeatCount="indefinite"
/>

它可以工作，但是一旦你将图像缩放到大于28px * 28px，它将不再有效。

Answer 1

我不确定它是否会解决整个问题，但是在保存和打开代码时这可以解决：svg：

<svg class="spinner" width="28px" height="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66 66">
    <title>spinning orange circle</title>
    <style>
        g {
            transform-origin: 50% 50% 0px;
        }
        .path {
            stroke-dasharray: 187;
            stroke-dashoffset: 0;
            stroke: #ed770b;
            transform-origin: 50% 50%;
            animation: dash 1.4s ease-in-out infinite;
        }

        @keyframes dash {
            0% { stroke-dashoffset: 187; }
            50% {
                stroke-dashoffset: 46.75;
                transform:rotate(135deg);
            }
            100% {
                stroke-dashoffset: 187;
                transform:rotate(450deg);
            }
        }

    </style>
    <g>
        <animateTransform attributeName="transform"
                          type="rotate"
                          from="0"
                          to="360"
                          begin="0s"
                          dur="1.4s"
                          repeatCount="indefinite"
        />
        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
    </g>
</svg>

我使用新的<g>标记整理了整个内容，并在css中将其transform-origin: 50% 50% 0px;。{/ p>

围绕中心

1 个答案: