Início / user-29056050

Husnain Khalil's questions

Martin Hope
Husnain Khalil
Asked: 2025-01-13 06:46:05 +0800 CST
  • 4

Estou trabalhando com um elemento SVG onde tenho um efeito de letreiro com texto curvo usando o <textpath>elemento. Atualmente, estou usando o emoji 🌟 como parte do texto de letreiro, mas gostaria de substituir esse emoji por uma imagem SVG personalizada e girar a imagem em torno de seu eixo.

O problema que estou encontrando é que quando substituo o emoji por uma imagem personalizada (por meio de uma <img>tag ou SVG inline), a imagem não aparece, e o texto simplesmente aparece. Além disso, quero aplicar uma classe personalizada a esta imagem para estilização (por exemplo, para girá-la). No entanto, sempre que tento adicionar a classe ao emoji, ela desaparece.

O que eu tentei:

Substituir o emoji por uma <img>tag inline que faça referência à imagem SVG personalizada ou a um elemento SVG inline.

Aplicando classes CSS personalizadas, como .rotate-imagegirar a imagem.

Resultado esperado:

A imagem SVG personalizada deve aparecer no caminho do letreiro em vez do emoji 🌟.

A imagem deve ser estilizada usando uma classe personalizada (por exemplo, .rotate-image) para rotação.

A imagem deve girar suavemente usando a animação CSS definida.

Emitir:

A imagem personalizada não aparece quando substituo o emoji. Só aparece o texto, não a imagem.

Se eu tentar inserir a imagem personalizada ou usar elementos HTML embutidos, a imagem desaparece, deixando apenas o texto para trás.

Alguém pode sugerir uma solução ou fornecer orientação sobre como substituir com sucesso o emoji por uma imagem SVG personalizada <textpath>e aplicar uma classe CSS personalizada para rotação e estilo?

Aqui está o código com o qual estou trabalhando atualmente:

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&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Web Development&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;UI/UX Design&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Front-end Development&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;HTML & CSS&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;JavaScript&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Responsive Design&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;E-Commerce Solutions&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;SEO Optimization&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Digital Marketing&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Web Hosting&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Content Management&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Website Performance&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Website Maintenance&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Branding&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;User-Centered Design&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Cross-Browser Compatibility&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Website Security&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Mobile Optimization&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;Conversion Rate Optimization&nbsp;&nbsp;&nbsp;🌟&nbsp;&nbsp;&nbsp;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>

javascript