Category: svg

26
Окт
2020

Фильтр SVG: шириной 100% высотой 100% не полностью обрабатывает изображение

У меня есть простой фильтр SVG. Если вы щелкните на примере ниже, этот фильтр появится / исчезнет:

var image = document.querySelector(‘image’);

var url = ‘https://i.picsum.photos/id/202/200/200.jpg?hmac=eGzhW5P2k0gzjc76Tk5T9lOfvn30h3Y…

24
Окт
2020

Установить фокус на любой узел в большом svg-документе

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

24
Окт
2020

Jquery | Svg | Lines

У меня есть код, который работает. Но нужно помочь главные блоки переместить с svg на div, но чтобы линии так же рисовались.
Вот пример блока
<!– Тайтл блок –>
<g class="node-container">
<r…

24
Окт
2020

Jquery | Svg | Lines

У меня есть код, который работает. Но нужно помочь главные блоки переместить с svg на div, но чтобы линии так же рисовались.
Вот пример блока
<!– Тайтл блок –>
<g class="node-container">
<r…

20
Окт
2020

Как перебирать элементы пути и анимировать каждый из них один за другим?

Моя следующая попытка действительно анимируется, но все пути отображаются одновременно.
Я хочу анимировать один path за другим. Как этого добиться?

(function () {
var button = document.querySelector(‘.animate’);
button.onclick…

10
Окт
2020

Динамический Font-size

У меня есть несколько блоков одной ширины, например 300px. Каждый блок содержит одно слово с разным количеством букв(от 2 до 10). Как мне сделать так чтобы font-size у этого слова подстраивался и занимал 100% ширины блока, т.е. 300px. Высо…

08
Окт
2020

Заливка процентной области в пользовательском (custom) овальном изображении SVG

Я хотел бы заполнить пользовательский SVG до определенного процента.
Вот мой начальный SVG

<svg width=”202″ height=”195″ viewBox=”0 0 202 195″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>
<path opacity=”0.1″ d=”M96.8166 4.0…

05
Окт
2020

Почему SVG stroke-dashoffset не работает?

У меня возникла проблема с получением пути моего SVG для анимации с использованием stroke-dasharray в сочетании с stroke-dashoffset.
Длина пути рассчитывалась с помощью Js.
Ниже я включил JsFiddle, точно показывающий, чего я пытаюсь достич…

04
Окт
2020

Динамическое изменение цвета svg иконки не работает во vue.js

Уже 4 час бьюсь над одной иконкой. Всё уже перепробовал ничего не работает.
Мои попытки заставить это работать:

Подключение svg через тег img: <img src="path to icon">. В самом файле svg указываю fill="currentColor&qu…

01
Окт
2020

Создание градиента с 4 stop в android xml

Я пробовал использовать mesh gradient inkscape, но, похоже, он не поддерживается в Android, мне нужно что-то вроде этого:

Градиент с 4 stop для прямоугольника андроида (или любой другой формы, например круга), в основном видно 4 перехода …

21
Сен
2020

Цикл анимации загрузчика svg

Мне нужна помощь в создании моего SVG loader. У меня есть такая анимация, см. ниже.
Когда начинается анимация, каждый кружок становится оранжевым.
Когда он закончится, линия начнет двигаться назад (это нормально), но каждый кружок также до…

11
Сен
2020

Таймер обратного отсчета с круглым progress bar

Я создал таймер обратного отсчета. У меня получился бордюр, который я сделал круглым. Поскольку таймер стремится к нулю, круглая граница должна менять цвет с уменьшением в секундах
Я создал JSFIDDLE
HTML
<div class="outer">…

04
Сен
2020

Как выбрать из path самый длинный под-path с помощью JS

Для более конкретного понимания задачи, немного пояснения сути проблемы.
При выполнении анимации с помощью изменения атрибута stroke-dasharray заданное время анимации не соблюдается.
Допустим задано время dur="10s", реально анима…

25
Авг
2020

Прозрачный текст вырезан из фона

Есть ли способ вырезать прозрачный текст из фонового эффекта, такого как на следующем изображении, с помощью CSS?
Было бы грустно потерять все драгоценное SEO из-за того, что изображения заменяют текст.

Сначала я подумал о тенях, но не м…

23
Авг
2020

Как отображать всплывающую подсказку при наведении курсора на SVG-элемент

Мне нужна встроенная SVG-диаграмма с иконкой «дополнительная информация», при наведении на которую, должна появляться всплывающая подсказка. Смотри иллюстрацию.

У меня есть всплывающая подсказка, реализованная в стилях div, которая испо…

23
Авг
2020

Вписать текст в svg без использования js

Необходимо, чтоб текст максимально заполнил svg как при bacground-size: contain. Размер родителя svg может динамически изменяться. Текст всегда однострочный. Сейчас используется такое решение с помощью js, но желательно сделать средствами …

23
Авг
2020

Вписать текст в svg без использования js

Необходимо, чтоб текст максимально заполнил svg как при bacground-size: contain. Размер родителя svg может динамически изменяться. Текст всегда однострочный. Сейчас используется такое решение с помощью js, но желательно сделать средствами …