Мобильная версия
как часть текста выделения, но я хотел бы заменить этот смайлик собственным изображением SVG и повернуть изображение вокруг своей оси.Проблема Я сталкиваюсь с тем, что когда я заменяю смайлик собственным изображением (с помощью тега или встроенного SVG), изображение не появляется, а просто отображается текст. Кроме того, я хочу применить к этому изображению специальный класс для стилизации (например, для его поворота). Однако всякий раз, когда я пытаюсь добавить класс к смайлику, он исчезает.
Что я пробовал:
Замена эмодзи встроенным тегом , который ссылается на пользовательское изображение SVG или встроенный элемент SVG.
Применение пользовательских классов CSS, таких как .rotate-image чтобы повернуть image.
Ожидаемый результат:
В области выделения вместо смайлика
должно появиться пользовательское изображение SVG. Изображение должно быть оформлено с использованием специального класса (например, .rotate-image) для вращения.
Изображение должно вращаться плавно, используя определенную CSS-анимацию.
Проблема:
Пользовательское изображение не появляется, когда я заменяю смайлик. Отображается только текст, а не изображение.
Если я попытаюсь вставить собственное изображение или использовать встроенные элементы HTML, изображение исчезнет, оставив только текст.Может ли кто-нибудь предложить решение или дать рекомендации о том, как успешно заменить смайлик пользовательским изображением 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;
}
}Код: Выделить всё
Подробнее здесь: https://stackoverflow.com/questions/793 ... th-and-app
