围绕 SVG 图像的圆形路径上的文本

Question

我正在尝试让动画文本在图像周围的圆形路径上移动。我有圆形文字，但里面的图片看不到。

这是我正在使用的代码：

<div id="container">
  <div id="circle">
    <svg 
      version="1.1" 
      xmlns="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink" 
      x="0px" 
      y="0px" 
      width="200px" 
      height="200px" 
      viewBox="0 0 400 400" 
      enable-background="new 0 0 100 100" 
      xml:space="preserve"
    >
      <defs>
        <path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
      </defs>
      <circle cx="150" cy="100" r="75" fill="none"/>
      <g>
        <use xlink:href="#circlePath" fill="none"/>
        <text fill="#ffb605">
          <textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath>
        </text>
      </g>
    </svg>
  </div>
</div>

这是我创建的JSFiddle 上的完整代码。

我试图放在中间的 svg 是这样的：https://svgshare.com/i/Z4d.svg

任何帮助将不胜感激。

Answer 1

您可以使用image 标签实现此目的：

<image
  x="165" 
  y="150"
  width="88" 
  height="100"
  xlink:href="PATH_TO_YOUR_IMAGE.EXTENSION"
/>

或（如在您链接的 svg 中）

<image
  ...
  xlink:href="data:img/png;base64,YOUR_LOOOOONG_IMAGE_DATA"
/>

要仅移动文本而不移动整个图像（墨水。内部鸟图像），您应该仅为文本定义旋转：

#circle svg text {
  transform-origin: 50% 50%;
  animation-name: rotate;
  ...
}

工作示例：（我删除了圆圈，因为它没有被使用）

不幸的是，您链接的 svg 在这里不起作用，因为它在另一个域上（但在我的测试文件中本地工作）。并且来自该 svg 的内联图像数据不适合堆栈 sn-p （也在我的测试文件中本地工作）。因此我使用了一个简单的rect 进行演示。

#container {
  margin: 0%;
  margin-top: 0px;
  margin-bottom: 0px;
}

#circle {
  position: relative;
  width: 500px;
  padding-bottom: 0%;
  overflow: visible;
  z-index: 2;
}

#circle text {
  margin: 0 calc(.14em * -1) 0 0;
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
  font-size: .83em;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: black;
  background: linear-gradient(-67deg, #000000 0%, #988d87 28%, #797371 52%, #5e5855 82%, #000000 100%);
  background-size: 100% auto;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  letter-spacing: .32em;
}

#circle svg {
  position: absolute;
  left: 140px;
  top: -110px;
  width: 100%;
  height: 430px;
}

#circle svg text {
  transform-origin: 50% 50%;
  -webkit-animation-name: rotate;
  -moz-animation-name: rotate;
  -ms-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
  -webkit-animation-duration: 10s;
  -moz-animation-duration: 10s;
  -ms-animation-duration: 10s;
  -o-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
}

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

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

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

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

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

@media screen and ( max-width: 979px) {
  #circle svg {
    left: 0px !important;
    top: -70px !important;
    height: 360px;
  }
}

@media screen and ( max-width: 480px) {
  #circle svg {
    left: -140px !important;
    top: 140px !important;
  }
}

<div id="container">
  <div id="circle">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 400 400" enable-background="new 0 0 100 100" xml:space="preserve">
      <defs>
        <path id="circlePath" d=" M 200, 200 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
      </defs>
      <g>
        <use xlink:href="#circlePath" fill="none"/>
        <rect
          x="160" 
          y="160"
          width="80" 
          height="80"
          fill="#FCDB8D"
        />
        <text fill="#ffb605">
          <textPath xlink:href="#circlePath">Flip the Bird • Flip the Bird • </textPath>
        </text>
      </g>
    </svg>
  </div>
</div>