如何在SVG曲线路径中用自定义SVG/PNG替换表情符号并通过自定义CSS类添加旋转效果

嘿，我完全懂你这会儿的困扰——<textPath>里直接塞<img>或者HTML元素根本行不通，因为SVG的文本容器只认字符或者SVG原生的文本相关元素，不认HTML标签。不过别慌，咱们用SVG自带的工具就能搞定，核心就是用<symbol>+<use>来嵌入自定义图形，再配合CSS实现旋转效果，下面一步步来：

核心思路 #

SVG的<textPath>只能容纳字符、<tspan>这类文本相关元素，所以我们需要把自定义SVG转成可复用的<symbol>，然后用<use>标签嵌入到<tspan>中，这样就能完美融入曲线路径的文本流，同时还能给<use>加CSS类做样式和动画。

步骤1：把自定义SVG转为可复用的<symbol> #

在SVG的<defs>区域添加一个<symbol>，把你的自定义SVG代码放进去（这里用星星示例，你可以替换成自己的SVG内容）：

<symbol id="custom-star" viewBox="0 0 24 24">
  <!-- 这里替换成你的自定义SVG路径/内容 -->
  <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="#FFFFFF"/>
</symbol>

如果是用PNG图片，也可以换成<image>定义：

<image id="custom-star" href="star.png" width="24" height="24"/>

步骤2：修改JS代码，替换表情符号为<use>元素 #

把原来文本内容里的表情，替换成包含<use>的<tspan>，这样就能把自定义图形嵌入到文本流中：

function startMarquee(id, pathId, content, speed) {
  const textPath   = document.getElementById(id);
  const path       = document.getElementById(pathId);
  const pathLength = path.getTotalLength();

  textPath.innerHTML = content;

  let offset = 0;

  function animateText() {
    offset = (offset + speed) % pathLength;
    textPath.setAttribute('startOffset', `${offset}px`);
    requestAnimationFrame(animateText);
  }

  requestAnimationFrame(animateText);
}

document.addEventListener('DOMContentLoaded', () => {
  // 定义带旋转类的自定义图形元素
  const starElement = '<tspan><use href="#custom-star" class="rotate-image"/></tspan>';
  // 替换所有表情符号为自定义图形
  const textContent = `Web Design&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Web Development&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;UI/UX Design&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Front-end Development&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;HTML & CSS&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;JavaScript&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Responsive Design&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;E-Commerce Solutions&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;SEO Optimization&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Digital Marketing&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Web Hosting&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Content Management&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Website Performance&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Website Maintenance&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Branding&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;User-Centered Design&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Cross-Browser Compatibility&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Website Security&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Mobile Optimization&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Conversion Rate Optimization&nbsp;&nbsp;&nbsp;${starElement}&nbsp;&nbsp;&nbsp;Site Speed Optimization`;
  startMarquee('marquee-text-curved', 'text-path-curved', textContent, 2);
});

步骤3：添加CSS旋转动画 #

给自定义图形的类.rotate-image添加旋转动画，同时调整大小和旋转中心，确保和文字对齐：

/* 旋转动画样式 */
.rotate-image {
  animation: rotate 2s linear infinite;
  transform-origin: center; /* 确保围绕中心旋转 */
  width: 2rem; /* 和文字大小匹配 */
  height: 2rem;
  fill: #FFFFFF; /* 可以在这里调整图形颜色 */
}

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

/* 移动端适配，同步调整图形大小 */
@media (max-width: 768px) {
  .rotate-image {
    width: 4rem;
    height: 4rem;
  }
}

@media (max-width: 480px) {
  .rotate-image {
    width: 2rem;
    height: 2rem;
  }
}

完整修改后的代码 #

HTML部分

<div>
  <svg class="elementor-svg-marquee" viewbox="-50 0 1300 300" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <path 
          id="text-path-curved" 
          d="M -100 150 Q 200 -50, 400 150 Q 600 350, 800 150 Q 1000 -50, 1300 150" 
      />
      <!-- 自定义星星SVG转为可复用symbol -->
      <symbol id="custom-star" viewBox="0 0 24 24">
        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="#FFFFFF"/>
      </symbol>
    </defs>
    
    <!-- Simulated border --> 
    <path 
        class="curved-path-border" 
        d="M -100 150 Q 200 -50, 400 150 Q 600 350, 800 150 Q 1000 -50, 1300 150" 
    />
    <!-- Actual stroke -->
    <path 
        class="curved-path" 
        d="M -100 150 Q 200 -50, 400 150 Q 600 350, 800 150 Q 1000 -50, 1300 150" 
    />
    
    <!-- Scrolling text -->
    <text
        font-family="Rubik, sans-serif"
        class="uppercase-text-curved"
        text-anchor="middle"
        dominant-baseline="middle"
    >
      <textpath id="marquee-text-curved" href="#text-path-curved"></textpath>
    </text>
  </svg>
</div>

CSS部分

body {
  background-color: #0d0d0d;
  padding: 0;
  margin: 0;
}

.elementor-svg-marquee {
  width: 100% !important;
  height: 100vh !important;
  display: block;
  margin: 0 auto;
  padding: 0 !important;
  overflow: hidden;
}

.uppercase-text-curved {
  fill: #FFFFFF;
  font-size: 2rem !important;
}

text {
  font-size: 2rem !important;
}

/* 旋转动画样式 */
.rotate-image {
  animation: rotate 2s linear infinite;
  transform-origin: center;
  width: 2rem;
  height: 2rem;
  fill: #FFFFFF;
}

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

/* Outer border for the stroke */
.curved-path-border {
  stroke-width: 6.1rem;
  stroke: #2fb7d9;
  fill: none;
  filter: drop-shadow(0px 0px 5px #2fb7d9);
}

/* Actual stroke */
.curved-path {
  stroke-width: 6rem;
  stroke: black;
  fill: none;
}

@media (max-width: 768px) {
  text {
    font-size: 4rem !important;
  }

  .curved-path-border {
    stroke-width: 8.1rem;
  }

  .curved-path {
    stroke-width: 8rem;
  }

  .rotate-image {
    width: 4rem;
    height: 4rem;
  }
}

@media (max-width: 480px) {
  text {
    font-size: 2rem !important;
  }

  .curved-path-border {
    stroke-width: 6.1rem;
  }

  .curved-path {
    stroke-width: 6rem;
  }

  .rotate-image {
    width: 2rem;
    height: 2rem;
  }
}

关键注意事项 #

• 确保自定义SVG的viewBox设置正确，这样缩放时不会变形；
• transform-origin: center必须设置，不然旋转中心会偏移，动画效果奇怪；
• 移动端要同步调整图形大小，和文字尺寸保持一致，避免不协调；
• 如果用外部PNG，要确保图片路径正确，或者转成base64嵌入SVG内部，避免跨域问题。

备注：内容来源于stack exchange，提问作者Husnain Khalil