Text on a Circle Path around an SVG Image

Question

I'm attempting to have animated text moving on a circular path around an image. I have the circular text, but I can't get the image on the inside.

Here is the code I'm using:

<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>

Here is the full code on JSFiddle I created.

The svg I'm trying to place in the middle is this: https://svgshare.com/i/Z4d.svg

Any help would be appreciated.

Answer 1

You could achieve this with the image tag:

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

or (like in your linked svg)

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

To move only the text and not the whole image (inkl. the inner bird image) you should define the rotation only for the text:

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

Working example: (i removed the circle because it wasn't used)

Unfortunately your linked svg doesn't work here because it's on another domain (but worked locally in my test file). And the inline image data from that svg doesn't fit in the stack snippet (also worked locally in my test file). Therefor i used a simple rect for demonstration.

#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>