html - SVG 无法正确旋转

Question

我的 SVG 从实际 SVG 右侧的一点旋转，我希望它从 SVG 的中心旋转。我尝试过transform-origin: 50% 50%;但这没有用。我还搞乱了所有其他设置，但没有成功。

这是我当前的代码:

body {
  background-color: black;
}

.rotate {
  animation: rotation 8s infinite linear;
  opacity: 1;
  width: 1400px;
  position: absolute;
  top: -70px;
  right: -195px;
}

.rotate:hover {
  opacity: 1;
  transition: 0.4s
}

.rotate svg {
  transform-origin: center;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="rotate">
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 500" style="enable-background:new 0 0 1200 500;">
                    <style type="text/css">
                        .st0{fill:none;}
                    </style>
                    <path id="SVGID_x5F_1_x5F_" class="st0" d="M638,358.5c0,40.59-32.91,73.5-73.5,73.5S491,399.09,491,358.5s32.91-73.5,73.5-73.5
                        S638,317.91,638,358.5z"/>
                    <text><textPath  xlink:href="#SVGID_x5F_1_x5F_" startOffset="0%">
                    <tspan  style="fill:#FFFFFF; font-family:'fatboy-slim'; font-size:40px; letter-spacing: 0px;">Visit Me Visit Me Visit Me</tspan></textPath>
                    </text>
                    </svg>
</div>

Answer 1

要实现圆带文字旋转且不发生水平位移，需要找到正确的旋转中心

为此，我包装了 path和 text在组标签 <g> 中并使用JS方法getBBox()计算旋转中心

let bb = circ.getBBox();

console.log(bb.x + bb.width / 2)
console.log(bb.y + bb.height / 2)

我们得到了坐标x ~= 564.2px y ~=359.1px

将这些值替换为动画命令 animateTransform 的值

请全屏打开
单击后将开始动画。

如果你想在不点击的情况下启动动画，而不是 begin ="svg1.click"写begin ="0s"

;
  let bb = circ.getBBox();

console.log(bb.x + bb.width / 2);
console.log(bb.y + bb.height / 2);
;

body {
  background-color: black;
}

.rotate {
 
  opacity: 1;
  width: 1400px;
  position: absolute;
 }

.rotate:hover {
  opacity: 1;
  transition: 0.4s
}

<div class="rotate" >
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 500" >
                    <style type="text/css">
                        .st0{fill:none;}
                    </style>
                    <g id="circ"  >
                    <path id="SVGID_x5F_1_x5F_" class="st0" d="M638,358.5c0,40.59-32.91,73.5-73.5,73.5S491,399.09,491,358.5s32.91-73.5,73.5-73.5
                        S638,317.91,638,358.5z"/>
                    <text><textPath  xlink:href="#SVGID_x5F_1_x5F_" startOffset="0%">
                    <tspan  style="fill:#FFFFFF; font-family:'fatboy-slim'; font-size:40px; letter-spacing: 0px;">Visit Me Visit Me Visit Me</tspan></textPath>
                    </text>
                    </g> 
                    <animateTransform
                      xlink:href="#circ"
                      attributeName="transform"
                      type="rotate"
                      begin="svg1.click" dur="4s"
                      values="
                       0 564.2 359.1;
                       360 564.2 359.1"
                       repeatCount="indefinite"
                       calcMode="linear"
                       />
                    </svg>
</div>

更新

作为奖励

重复点击时前后旋转

添加第二个动画，以相反方向旋转标题

JS脚本从第一个顺时针旋转动画切换到第二个逆时针旋转动画:

var svg_1 = document.getElementById("svg1"),
  forward = document.getElementById('forward'),
  back = document.getElementById("back");

let flag = true;

svg_1.addEventListener('click', function() {
  if (flag == true) {
    forward.beginElement();
    flag = false;
  } else {
    back.beginElement();
    flag = true;
  }
});

body {
  background-color: black;
}

.rotate {
 
  opacity: 1;
  width: 1400px;
  position: absolute;
 }

.rotate:hover {
  opacity: 1;
  transition: 0.4s
}

<div class="rotate" >
  <?xml version="1.0" encoding="utf-8"?>
  <!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 500" >
                    <style type="text/css">
                        .st0{fill:none;}
                    </style>
                    <g id="circ"  >
                    <path id="SVGID_x5F_1_x5F_" class="st0" d="M638,358.5c0,40.59-32.91,73.5-73.5,73.5S491,399.09,491,358.5s32.91-73.5,73.5-73.5
                        S638,317.91,638,358.5z"/>
                    <text><textPath  xlink:href="#SVGID_x5F_1_x5F_" startOffset="0%">
                    <tspan  style="fill:#FFFFFF; font-family:'fatboy-slim'; font-size:40px; letter-spacing: 0px;">Visit Me Visit Me Visit Me</tspan></textPath>
                    </text>
                    </g> 
                    <animateTransform id="forward"
                      xlink:href="#circ"
                      attributeName="transform"
                      type="rotate"
                      begin="indefinite"
                      dur="4s"
                      values="
                       0 564.2 359.1;
                       360 564.2 359.1"
                       repeatCount="indefinite"
                       calcMode="linear"
                       />  
                        <animateTransform id="back"
                              xlink:href="#circ"
                              attributeName="transform"
                              type="rotate"
                              begin="indefinite"
                              dur="4s"
                              values="
                               360 564.2 359.1;
                               0 564.2 359.1 "
                               repeatCount="indefinite"
                               calcMode="linear"
                               />
                    </svg>
</div>