Мобильная версия
как часть текста выделения, но я хотел бы заменить этот смайлик собственным изображением SVG (находится по этому URL-адресу: https://www.devnovahub.lovestoblog.com/wp-content). /uploads/2025/01/star-1.svg)и поверните изображение вокруг своей оси.
Проблема, с которой я столкнулся, заключается в следующем: что когда я заменяю смайлик собственным изображением (с помощью тега или встроенного SVG), изображение не появляется, а просто отображается текст. Кроме того, я хочу применить к этому изображению специальный класс для стилизации (например, для его поворота). Однако всякий раз, когда я пытаюсь добавить класс к смайлику, он исчезает.
Что я пробовал:
Замена эмодзи встроенным тегом, который ссылается на пользовательское изображение SVG или встроенный элемент SVG.
Применение пользовательских классов CSS, таких как .rotate-image, для поворота изображения.Ожидаемый результат:
Пользовательское изображение SVG, расположенное по адресу https://www.devnovahub.lovestoblog.com/ ... t/uploads/ 2025/01/star-1.svg должен появиться в пути выделения вместо смайлика
.Изображение должно быть стилизовано с использованием специального класса (например, .rotate-image) для вращения.
Изображение должно плавно вращаться с использованием определенной CSS-анимации.
Проблема:
Пользовательское изображение не появляется, когда я заменяю смайлик. Отображается только текст, а не изображение.
Если я попытаюсь вставить собственное изображение или использовать встроенные элементы HTML, изображение исчезнет, оставив только текст.Может ли кто-нибудь предложить решение или дать рекомендации о том, как можно успешно заменить смайлик пользовательским изображением SVG и применить собственный класс CSS для вращения и стилизации?
Вот код, над которым я сейчас работаю:
Код: Выделить всё
Curved Marquee with Stroke Border
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;
}
}
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);
});
Подробнее здесь: https://stackoverflow.com/questions/793 ... th-and-app
