Category: svg

26
Окт
2022

Как сгладить SVG путь (кривую) в реальном времени?

При рисовании кривой по полученным координатам получаются просто соединенные прямые. Я посмотрел несколько алгоритмов, которые делают плавную линию как на гифке ниже, но все это происходит в пост обработке, когда пользователь закончил рисо…

25
Окт
2022

Анимация стрелки svg в зависимости от положения курсора мыши

Есть анимированная svg стрелка в двух положениях, работает при наведении на основе топика в смежной теме, но не совсем понимаю как сделать так, чтобы стрелка при наведении мыши переходила в конечное положение и фиксировалась, а при отведен…

16
Окт
2022

Объединение SVG элементов в группу при перемещении по холсту

Нужно сделать в svg редакторе возможность перемещать svg элементы по холсту. Первая мысль изменять выделенным элементам transform translate с помощью js и все. Но при большом количестве элементов все начинает лагать. Также, происходят бес…

03
Окт
2022

contentDocument возвращает null

Мне надо изменить расположение куба при нажатии на кнопку. Я должен получить координаты куба(в примере используется только прямоугольник) и изменить их. Но contentDocument возвращает null, из за чего getElementById вызывает ошибку.
html:
&…

03
Окт
2022

contentDocument возвращает null

Мне надо изменить расположение куба при нажатии на кнопку. Я должен получить координаты куба(в примере используется только прямоугольник) и изменить их. Но contentDocument возвращает null, из за чего getElementById вызывает ошибку.
html:
&…

03
Окт
2022

Редактирование SVG файла с использованием JS

Здраствуйте.
Есть фото, которое добавлено уже в код HTML. Я бы хотел узнать: как сделать так, чтобы пользователь мог выбирать среди двух вариантов – крестик или нолик и нажимая на области, появлялся крестик или нолик соответственно (т.е пр…

03
Окт
2022

Редактирование SVG файла с использованием JS

Здраствуйте.
Есть фото, которое добавлено уже в код HTML. Я бы хотел узнать: как сделать так, чтобы пользователь мог выбирать среди двух вариантов – крестик или нолик и нажимая на области, появлялся крестик или нолик соответственно (т.е пр…

02
Окт
2022

Анимация svg (Волна)

<svg id=”bg”viewBox=”0 0 1440 761″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>
<path d=”M1150 8.61221C843.181 111 842.5 458.768 441.962 309.552C303.655 258.027 156 309.891 -2 358.578V402.142C-2 402.142 …

21
Сен
2022

Как плавно отобразить SVG картинку, при скроле или ховере

Как мне сделать так что бы когда я наводил на какой то блок, к нему рисовалась эта svg картинка, ниже код самой svg а именно вот этой –

Код самой svg:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3…

15
Сен
2022

Как при клике на элемент svg менять его фон

Как сделать обработчик кликов на элемент svg в react? Я знаю как сделать на 1 элемент. Я привел в коде обработчик клика для первого элемента. Но неужели мне каждому g нужно руками прописывать onClick ?

const App = (props) => {
con…

15
Сен
2022

Как при клике на элемент svg менять его фон

Как сделать обработчик кликов на элемент svg в react? Я знаю как сделать на 1 элемент. Я привел в коде обработчик клика для первого элемента. Но неужели мне каждому g нужно руками прописывать onClick ?

const App = (props) => {
con…

08
Сен
2022

Как добавить картинку в описание карточки товара с каталогом Tilda?

У меня есть 4 разные картинки с разными состояниями товара: отличное, хорошее, нормальное, плохое. Нужно чтобы я могла вставить в каталоге в описании какую-то ссылку, текст или символ, который бы выводил конкретное состояние товара. Типа в…

18
Авг
2022

Текстуры и картинки в HTML canvas

Я пишу браузерную игру, где для отрисовки игроков (танчиков) использую графические примитивын: полигоны, круги, и.т.п. Я хочу делать танки не монотонно-зелёными или серыми, а также добавить камуфляж. Вопрос: Как наложить/нарисовать текстур…

17
Авг
2022

Улучшение производительности интерактивного SVG на html странице

Всем привет! Имеется проблема с большим SVG. На странице необходимо отобразить SVG, но в нем порядка 20к элементов, весит под 20 мб. Сам SVG – это схема трубопроводов: 10 труб по 1500 метров каждая. Одна линия (path) – 1 метр трубы. Получа…

13
Авг
2022

Как расширить SVG без растяжки углов?

Есть svg, и нужно чтобы она растягивалась именно по ширине, без изменения высоты, это я реализовал с помощью preserveAspectRatio="none". Но при растяжке компонента эти углы ломаются, как можно сделать так, чтобы при изменении шир…

10
Авг
2022

Как менять цвет svg

У меня есть картинка, как при помощи js менять fill-opacity с 0.4 до 0.9 , то есть , если в переменной допустим стоит 50 , то закрашены будут половина полосочек , если 100 , то будут закрашены все полосочки?

body {
background-color:…

25
Июл
2022

Перетаскивание объекта в svg.js. Подключение svg.draggable.js

В свободное время изучаю JS для себя. Столкнулся с проблемой при работе с SVG.JS и плагином SVG.DRAGGABLE.JS. Не могу понять как перетаскивать объект. Помогите разобраться с подключением SVG.DRAGGABLE.JS. Пробовал в соответствии с документ…

05
Июн
2022

Как при нажатии на кнопку изменить svg?

У меня есть кнопка(play). Я хочу сделать так, чтобы при нажатии на нее, поменялся svg(на паузу), при повторном же нажатии, чтобы она вернулась к прежней svg(к play). Я понимаю что это нужно реализовать с помощью js, но не пойму как лучше э…

27
Май
2022

Как оптимизировать анимацию под браузер Firefox?

Как оптимизировать анимацию под браузер Firefox? Проблема в том что эта анимация при запуске в браузере FireFox нагружает память ПК и рендерится отрывисто. Как это можно исправить ?

.bg-wave-animation {
position: absolute;
top: 50%…

11
Май
2022

Есть ли смысл использовать SVG для такого случая

Только учусь писать на Django. Хочу сделать веб-приложение по выбору инженерного оборудования. При выборе из выпадающего списка хочу чтобы изменялась не вся схема, а только тот модуль, который изменен. Вариантов для каждого модуля много.
Д…

10
Май
2022

Перенос сайта на локальном сервере в декстоп приложение

Всем привет, это наверное будетсамый странный вопрос на форуме.
История такова, пишу дипломный проект на тему данную мне учебным учреждением «Приложение «Материально-техническое обеспечение кабинетов»на примере специальности информационных…

10
Май
2022

Перенос сайта на локальном сервере в декстоп приложение

Всем привет, это наверное будетсамый странный вопрос на форуме.
История такова, пишу дипломный проект на тему данную мне учебным учреждением «Приложение «Материально-техническое обеспечение кабинетов»на примере специальности информационных…