6
Мы вешаем на элемент с id=a обработчик нажатия по нему, дальше мы ищем родительский элемент svg и даем ему класс active, что и запускает анимацию (в css для path который находится в svg с классом active начинаем анимацию).
document.getElementById('a').addEventListener('click', (e) =>
{
e.target.closest('svg').classList.add('active');
});
svg path {
...
4
Pure SVG SMIL
Анимация рисования линии основана на технике уменьшения stroke-dashoffset от максимального значения до нуля. Тем самым реализуется анимация роста линии от нуля до полной длины.
Чтобы посчитать максимальную длину линии, используем метод JS
getTotalLength()
console.log(p1.getTotalLength()); У нас получилось ~= 91px
Далее надо добавить или в ...
3
Попытался сделать что-то похожее, работает только в Chromium браузерах.
--leftPercent и --topPercent это положение круга на экране браузера.
0 - начало, 100 - конец
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--colorCircle: white;
}
body {
margin: 0;
}
.holst {
height: 100vh;
width: 100vw;
overflow: hidden;
position: ...
ответ дан 10 апр в 18:48
Михаил Камахин
7,22622 золотых знака99 серебряных знаков3434 бронзовых знака
3
CSS.registerProperty && CSS.registerProperty({
name: '--linepos',
syntax: '<length-percentage>',
inherits: true,
initialValue: 0,
});
html, body, main {
height: 100%;
margin: 0;
}
main {
--linepos: 50%;
background: linear-gradient(to right, chocolate, white 50%, brown);
background: linear-gradient(to right, chocolate, white ...
3
Но, если у существующего уже есть начальная точка, конечная точка,
отрезок, и всё это ведет от точки A к точке B, то как нарисовать такой
же путь (path), чтобы он вел в обратную сторону, и при этом не сбиться
с координатами?
Можно нарисовать два пути от А=>В и от В=>А и это будет самое простое решение, только их надо рисовать из разных начальных точек ...
2
let dia = document.getElementById("dia");
let canvas = document.getElementById("diagrams");
let ctx = canvas.getContext("2d");
resizeCtxCanvas(ctx);
function resizeCtxCanvas(ctx) {
const { width, height } = ctx.canvas.getBoundingClientRect();
ctx.canvas.width = width;
ctx.canvas.height = height;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas....
ответ дан 6 часов назад
Михаил Камахин
7,22622 золотых знака99 серебряных знаков3434 бронзовых знака
2
Предлагаю рассмотреть вариант анимации по первому (упрощённому) сценарию с помощью технологии CSS
Такую анимацию в данном варианте мы можем реализовать с помощью псевдоэлементов ::before и ::after к элементу <body>, а также правил @keyframes, установив общие ключевые кадры, включая в них свойства ширины width (для первого варианта) или высоты height (...
ответ дан 8 апр в 18:02
Sevastopol'
26.6k1212 золотых знаков5757 серебряных знаков116116 бронзовых знаков
2
Вот что должно получиться в итоге:
Jsfiddle
#1 Всплывающие подсказки
<g>
<title>Джанкойский район
Площадь, км. кв. - 2 666,96
Население, чел. - 64 808
</title>
</g>
Если навести курсор на объект, то после некоторого времени появится системный tooltip SVG с текстом, который добавлен между тегами <title>
#2. Маркеры ...
ответ дан 12 апр в 11:15
Alexandr_TT
90.1k2020 золотых знаков8888 серебряных знаков258258 бронзовых знаков
2
Можно попытаться использовать комбинацию фильтров и режима наложения:
.content { position: relative; }
.text {
position: absolute;
left: 50%; top: 10px; z-index: 1;
filter: grayscale(1) invert(1) contrast(10);
mix-blend-mode: difference;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"&...
2
Можно использовать margin
* {
box-sizing: border-box;
}
.group {
display: inline-flex;
margin: 0;
padding: 0;
font-size: 0;
border: 1px solid black;
}
.group div {
font-size: 20px;
display: inline-block;
}
.group div:not(.main) {
...
1
можно ли это сделать только через css автоматически?
Нельзя. Как минимум по двум причинам: 1я - используется inline-block, хотя, скорее это даже и не является причиной, но 2я самая главная - используется трансформация transform: translate, а это то же самое, что и абсолютное позиционирование. А значит родительский элемент "теряет" свой дочерний ...
ответ дан 10 апр в 18:57
Sevastopol'
26.6k1212 золотых знаков5757 серебряных знаков116116 бронзовых знаков
1
Сделать ее фоновым изображением, и сверху наложить маску-цвет полупрозрачную
body {
margin: 0;
padding: 0;
}
.intro {
max-width: 1920px;
margin: 0 auto;
}
.intro__bg {
max-width: 1920px;
width: 100%;
display: block;
position: relative;
}
.intro__bg:after {
content: '';
position: absolute;
width: 100%;
...
1
Карту вставил как файл с картинкой, используя тег <img>, задав адрес файла через атрибут src.
Точки (маркеры), обозначающие города, выставил на карте способом абсолютного позиционирования относительно изображения карты с помощью свойства position и значения absolute.
Появление всплывающих подсказок (tooltip) с названиями городов реализовал с помощью ...
ответ дан 9 апр в 16:48
Sevastopol'
26.6k1212 золотых знаков5757 серебряных знаков116116 бронзовых знаков
Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими
Связанные метки
css3 × 3946css × 2623
html × 1903
html5 × 1606
javascript × 805
вёрстка × 354
svg × 347
jquery × 343
css-animation × 266
анимация × 194
flexbox × 146
bootstrap × 131
адаптивная-верстка × 64
веб-программирование × 57
css-grid × 55
media-queries × 39
scss × 38
svg-animation × 36
sass × 35
internet-explorer × 31
background × 31
hover × 28
php × 25
transform × 25
изображения × 22