Сайт сделан на реакте и нужно вставить на него большую (в плане строк кода) svg. Сайт начинает посылать варнинги:
index.js:1 Warning: Invalid DOM property clip-rule. Did you mean clipRule?
Вопрос: как можно решить эту проблему, не прибег…
Я использую SVG в гамбургер-меню, поэтому, когда пользователь щелкает это меню, SVG расширяется и заполняет весь экран. Я использую для этого scale(), поэтому в основном SVG имеет масштаб 1, а когда пользователь нажимает на меню, SVG получ…
Импортирую разные картинки но отображает одну первую вставленую svg. Все остальные наследуются
import { ReactComponent as Arms} from ‘../../assets/svg/armsIcon.svg’
import { ReactComponent as House } from ‘../../assets/svg/house.svg’
…
Есть SVG файл. Мне нужно заливать каким-то цветом контуры из этого SVG при клике мышкой на контуре. Я подключил библиотеку JQuery 1.7.1., нашел скрипт, который заливает цветом path из SVG. Но работает это только когда SVG находится в теле …
Заканчивается сезон WINTER BASH 2020
Хотелось бы, как-то отметить это событие.
На изображении цифрами отмечены, желаемые объекты для анимации
Сценарий анимации:
Генератор шляп.
Должен неравномерно перемещаться вверх-вниз
Знак вопроса до…
Появился вопрос не по теме SVG => Как анимировать последовательно UIBezier линии
Разумеется что это можно реализовать на smil
Вот что я сделал
<svg viewBox=”0 0 500 150″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www….
Пример двигает окружность SVG влево-вправо. При движении, окружность не всегда отрисовывается полностью. Проверка делалась в FireFox/Ubuntu. Дефект виден не всегда, но проявляется часто. В Chrome/Ubuntu дефект не заметен.
Я понимаю что кон…
Пробовала на дивах, там эффект срабатывает, а на канвасе нет. Не понимаю что я упустила.
Демкa
<svg>
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" …
У меня такая проблема. На главной странице сайта, находится заглушка слайдер. Нужно сделать так, что бы цвет .logo и кнопки .menu менялся на конкретных слайдах, на чёрный цвет.
codepen: https://codepen.io/realHikkan/pen/LYRemqO
var swi…
Есть прогрессбар, работает корректно на декстопах (через JS высчитываю stroke-dashoffset и добавляю через style).
Но, на мобильных, вместо обычного числового значения, в атрибут style добавляется значение + ‘px’. Как-то можно обойти эту пр…
Есть <svg>, к нему нужно добавить <line>. Пытаюсь добавить через JavaScript – не получается. Добавляю точно такой же <line> напрямую через HTML – все получается.
HTML:
<svg id="svg"></svg>
JavaScrip…
Пытался сделать страницу, которая была бы в чёрно-оранжевых квадратиках, с помощью <canvas>.
Получилось заполнить только часть:
<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
…
Столкнулся с проблемой вывода предупреждения перед отображением в теге img
Notice: Trying to access array offset on value of type bool in /var/www/html/wp-includes/media.php on line 1179Notice: Trying to access array offset on value of typ…
Я разрабатываю веб-приложение, на главной странице которого, есть необычная анимация, но я хотел бы подойти к нему с учетом ограничений производительности и отзывчивости.
В качестве входных данных для этой анимации я использую довольно сло…
[Примечание. Ищете кроссбраузерное решение, которое не мигает на мгновение background’ом между каждой волной слизи (goo), как видно из ответа @ccprog В идеале решение не должно включать ожидание окончания первой волны, чтобы начать отображ…
CodePen: https://codepen.io/jkmg/pen/zYKqvLq
<html>
<head>
<title></title>
<style type=”text/css”>
html,body {
width: 100%;
height: 100%;
ma…
Есть спрайт-компонент SvgSprite.vue :
<template>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="display: none;&q…
помогите пожалуйста с такой проблемой.
На сайте есть анимация, она сделана в AE и преобразована плагином bodymovin в json файл (+ папка с png).
Подключил на сайт по туториалу, в JS вообще не силен, открываю и вижу нагрузку на ЦП 50-70%.
Фа…
Итак, я пытаюсь анимировать маркер в виде треугольника и текстовую подсказку вдоль пути заполнения.
var chart = d3.select(“#speedometer”);
const arc = d3
.arc()
.outerRadius(120)
.innerRadius(90)
.startAngle(-Math.PI / 2);
ch…
У меня есть текст, который движется по кругу SVG, и который масштабируется в зависимости от размера окна – Я хочу анимировать текст так, чтобы он вращался вокруг центра, как шатер. Для этого мой код в настоящее время выглядит так:
fun…
Всем доброго дня! Подскажите пожалуйста, не могу понять. Пытаюсь инициализировать svg из object, но выдает пустой document, при этом картинка на странице есть.
Вот я достучался до object. Внутри его документа есть svg
Как только стучусь …
На примере ниже видно, что при первом запуске анимации все идет, как и ожидалось: анимация рисования линий с помощью изменения атрибута stroke-dasharray
В формуле анимации этого атрибута есть параметр fill="freeze", который замор…
Я разработал приложение имитирующее работу эквалайзера в части показа изменения аудио частот
Проблемы с анимацией возникают при повторном нажатии на кнопку "Start"
Результаты анимации сбрасывается и анимация начинается с самого…
Есть задача заанимировать такой эквалайзер https://prnt.sc/vki1ks.
Он должен просто попрыгать в течении некоторого времени и превратиться в линию (без музыки). Пробовал сделать в canvas с помощью библиотеки paper.js, но линии вышли нечётк…
варианты
<script src="…"></script>
<script xlink:href="…" />
<?xml-stylesheet type="text/js" href="…"?>
не работают
Предположим, у нас есть строка преобразования SVG:
transform = "translate(6,5),scale(3,3)";
Есть ли гладкая функция регулярного выражения, которую мы могли бы использовать, чтобы преобразовать ее во что-то полезное?
Свободный пер…
Столкнулся с проблемой отрисовки маркеров в react leaflet. leaflet заворачивает svg иконку в тег img, от чего мне нужно избавиться. В качестве иконки маркера может быть изогнутая стрелка. Нужно, чтобы тултип показывался при наведении на ст…
Вопрос инициирован топиком: Как анимировать отскок теннисного мячика
В этом вопросе отскоки были по вертикали
<svg id=”svg1″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”
wid…
Я пытаюсь создать круглый индикатор выполнения (как показано на изображении ниже). Прогрессия основана на процентах и будет двигаться по кругу до этого процента.
У меня прогрессия (линия) движется, но иконка, который движется вместе с ней,…
Есть SVG карта созданная на Raphael. Как можно анимировать маршрут между двумя кликами на карте, как например здесь
Пример на картинке –
На яндекс и гугл картах понятно, там свой API, но как сделать нечто подобное на SVG. Есть ли какие-то…
Свежие комментарии