如何用弯曲 SVG 路径中的自定义 SVG 图像或 PNG 替换表情符号，并使用自定义 CSS 类应用旋转？

Question

我正在使用一个 SVG 元素，其中使用

<textpath>

元素具有带有弯曲文本的选取框效果。目前，我使用 🌟 表情符号作为选取框文本的一部分，但我想用 自定义 SVG 图像 替换该表情符号，并绕其轴旋转图像。

我遇到的问题是，当我用自定义图像（通过

<img>

标签或内联 SVG）替换表情符号时，图像不会出现，而只会显示文本。此外，我想对此图像应用自定义类以进行样式设置（例如，旋转它）。但是，每当我尝试将类添加到表情符号时，它就会消失。

我尝试过的：

用引用自定义 SVG 图像或内联 SVG 元素的内联

<img>

标签替换表情符号。

应用自定义 CSS 类（如

.rotate-image

）来旋转图像。

预期结果：

自定义 SVG 图像 应出现在选取框路径中，而不是 🌟 表情符号。

图像应使用自定义类（例如，

.rotate-image

）进行旋转设计。

图像应使用定义的 CSS 动画平滑旋转。

问题：

替换表情符号时，自定义图像没有出现。仅显示文字，不显示图像。

如果我尝试插入自定义图像或使用内联 HTML 元素，图像就会消失，只留下文本。

任何人都可以建议一个解决方案或提供有关如何成功地用

<textpath>

中的自定义 SVG 图像替换表情符号并应用自定义 CSS 类进行旋转和样式设置的指导吗？

这是我当前正在使用的代码：

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 textContent = "Web Design   🌟   Web Development   🌟   UI/UX Design   🌟   Front-end Development   🌟   HTML & CSS   🌟   JavaScript   🌟   Responsive Design   🌟   E-Commerce Solutions   🌟   SEO Optimization   🌟   Digital Marketing   🌟   Web Hosting   🌟   Content Management   🌟   Website Performance   🌟   Website Maintenance   🌟   Branding   🌟   User-Centered Design   🌟   Cross-Browser Compatibility   🌟   Website Security   🌟   Mobile Optimization   🌟   Conversion Rate Optimization   🌟   Site Speed Optimization";
  startMarquee('marquee-text-curved', 'text-path-curved', textContent, 2);
});

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

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

/* Actual stroke */
.curved-path {
  stroke-width: 6rem;
  /* Slightly smaller than the border */
  stroke: black;
  /* Stroke color */
  fill: none;
}

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

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

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

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

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

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

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

Answer 1

<img>

和

<svg>

都不是<textpath>的

允许内容

。