Интересует вопрос, с помощью какого инструмента можно создать подобное меню? На чистом канвасе или прибегнуть к SVG, само меню будет двух слойное, при клике на один из элементов будет вылезать второй слой круга, что-то на подобие под мен…
Проект делается на create react app, далее CRA
Проблема: есть массив с названиями картинок, который нужно перебрать и вставить как svg в разметку чтобы иметь доступ изменить цвет обводку и т.д.
До этого собирался галпом спрайт и картинки…
Допустим, у меня есть многоцветный градиент, который заполняет экран
<svg id=”svg1″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”
xmlns:ev=”http://www.w3.org/2001/xml-events…
Здравствуйте пользователи stackoverflow. Наткнулся на проблему на js в zdog не могу указать изображение как фон грани в box, с установкой цвета фона проблем не возникает, только с Background image. Спасибо.
new Zdog.Box({
addTo: illo,…
Есть вот такая карта. Нужно большинство элементов перенести как SVG слои + сделать кликабельными. Естественно, это всё должно тянуться при уменьшении экрана.
В общем, вопросы
1) Как сделать так, чтобы при смене вьюпорта картинки не разле…
Я хочу повторить эффект с сайта https://www.peststopboys.co.uk/
Сами фигурки на фоне не интересны
Заинтересовал эффект в курсоре …понятно что там шейп с animation а вот в центре этого шейпа есть точка и при движении мышкой эта точка р…
Написал такой код:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
</head>
<body>
<script>…
Я пытаюсь вставить svg на страницу как код. Структура примерно такая
<svg fill=”…” xmlns=”…” viewBox=”…” width=”…” height=”…”>
<path d=”…”/>
</svg>
Я создаю тег svg и пытаюсь создать дочерний элемент path,…
Хочу при изменении размеров окна браузера добиться того, чтобы все элементы страницы сохраняли целостность (позиции) и изменялись только в размере при увеличении/уменьшении размеров окна браузера соответственно. На моей HTML странице распо…
У меня есть несколько блоков, некоторые из них связаны друг с другом (как потребитель и расчеты). Необходимо по клику на один из связанных блоков нарисовать дугу, соединяющуюся с другим блоком таким образом, чтобы учесть:
1. Дуга не должн…
Долгое время вожусь с анимацией закрашивания круга в зависимости от процента. Необходимо реализовать такое:
На данный момент я смог реализовать так:
То есть все как надо, анимация закрашивания работает, но радиус синего круга очень мал…
Долгое время вожусь с анимацией закрашивания круга в зависимости от процента. Необходимо реализовать такое:
На данный момент я смог реализовать так:
То есть все как надо, анимация закрашивания работает, но радиус синего круга очень мал…
Я сделал клавиши фортепиано в SVG, и к каждому <rect> подвязал событие oncklick(), и при нажатии на определённую клавишу на клавиатруе меняется заполнение fill на orange вместо белого или чёрного цвета. Вся клавиатура работает но име…
Как можно сверстать такое (текст по кругу)?
* {
box-sizing: border-box;
}
.wrp {
display: flex;
justify-content: center;
align-items: center;
}
.circle {
position: relative;
margin-top: 20px;
width: 200p…
Помогите как сделать анимацию рисования чтоб не ти рисовал мишкой а сама анимация рисовалась. И вопрос на каком язике лучше ето сделать
…
Мне нужно сделать круговой индикатор прогресса с цветным градиентом вдоль линии.
А также необходимо, чтобы концы линии круга были округлены.
На изображении ниже, показано то, чего я пытаюсь достичь:
Этот код близок к цели, но не …
Интересует реализация скролл анимации, как на главном экране (первый блок) данного сайта – https://www.glia.com/
А если быть точнее: изменение контента при каждом пикселе прокрутки
(Я не ищу готового решения, мне нужна хотя бы идея)
…
const Bar = ({ x, h }) => (
<rect className=”bar” width=”3″ strokeWidth=”1″ height={h} x={x} y=”0″ />
);
<svg className={className} xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlin…
<svg id=”example2″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”>
<image id=”i0″ width=”300″ height=”300″ x=”150″ y=”0″ xlink:href=”logo.png” />
<animateTransform xlink:…
В родительском блоке имеется шар:
body {
background: black;
}
.box {
position: relative;
overflow: hidden;
margin: 0 auto;
width: 500px;
height: 300px;
border-radius: 5px;
box-shadow: inset 0 0 2px black;
…
Я использую плагин svg jquery Keith Wood, а не canvas HTML5.
Я определяю свое изображение svg таким образом, чтобы масштабировать мое изображение треугольника svg, чтобы оно соответствовало его контейнеру div:
<svg xmlns=”http…
I have got a gauge on svg. I dont know how to do such gauge, cause it is has different steps. How can I do this?
Есть анимация вращения палки покругу.
Она запускается по наведению мыши и прекращает вращаться по убиранию мыши с изображения.
Мне надо сделать так, что бы при повторном наведении анимация продолжалась с того же места где и закончилась при…
Мне нужно разместить текст внутри блока овальной формы так, чтобы он не выходил за его пределы. Пробовал следующий вариант с использованием shape-outside:
.test-block {
position: absolute;
width: 1000px;
height: 500px;
pad…
Как сделать анимацию вращения этой SVG фигуры?
Необходимо что бы фигура вращалась при наведении мыши.
Ориентация букв (верхом вверх) сохранялась во время вращения.
Задача делать не просто что бы работала, а хорошим, красивым способо…
Когда вы открываете страницу, секундная стрелка направлена вверх, и только после второго показа, начинает идти. Мне нужно запустить их без этой секунды, но я не могу изменить setInterval(1000), и у меня нет идей о том, как это исправить. П…
Смотрите, я хочу чтобы при изменении ширины экрана у меню убирался класс actived, точнее у svg элемента. Но он не срабатывает. Всё убирается кроме actived класс. Подскажите ошибку.
$(document).ready(function() {
function checkWidth…
Я работаю с темой Elementor на WordPress и хочу анимировать svg-стрелку при наведении курсора, но у меня есть проблемы, чтобы сделать это. При наведении курсора на стрелку она должна становиться длиннее (см. Рисунки).
Стрелка в исходно…
У меня есть progress bar, который обновляется путем изменения свойства stroke-dashoffset path. Однако мне нужно вычислять координаты x и y конечной точки (округленной стороны) каждый раз, когда она обновляется.
Я собираюсь добавить ме…
Свежие комментарии