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

Как сделать пунктирную линию в тильде

  • автор:

Как сделать горизонтальную пунктирную линию с рисунком?

Сделать горизонтальную пунктирную линию с изображением ножниц.

Решение

В квитанциях, купонах или газетах порой можно встретить пунктирную линию с изображением ножниц и надписью «линия отреза». Такая фраза говорит, что надо отрезать этот кусок по приведённой линии, чтобы в дальнейшем использовать по назначению. На сайтах подобные инструкции не имеют никакого смысла, никто тыкать в монитор ножницами в здравом уме не станет. Но можно использовать горизонтальную линию в качестве элемента дизайна страницы, к примеру, для визуального отделения одного материала от другого.

Наша линия будет содержать три элемента: саму пунктирную линию, рисунок половины ножниц и надпись «линия отреза». На рис. 1 показано, что хотелось бы получить в итоге.

Горизонтальная линия

Рис. 1. Горизонтальная линия

В идеале, линия должна формироваться единственным тегом , а всё остальное возлагается на стили, включая вывод рисунка и надпись.

Для начала в HTML вставим основу линии.

Поскольку ножницы выводятся под линией, то воспользуемся свойством border-top . Если бы рисунок выводится над линией, соответственно потребуется border-bottom . Сам рисунок ножниц имеет высоту 37 пикселов, отнимем один пиксел на толщину линии, разделим полученное значение пополам и получим 18 пикселов видимой части. Это число будет высотой блока и значением для сдвига фона вверх.
.line < border-top: 1px dashed #000; /* Параметры линии */ height: 18px; /* Высота блока */ background: url(images/scissors.png) no-repeat 10px -18px; /* Параметры фона */ >

В свойстве background указывается путь к рисунку, отменяется повторение фона и задаётся сдвиг вправо на 10px и вверх на 18px. Сдвиг по вертикали нужен, потому что у нас на картинке целые ножницы, а не их половинка (рис. 2).

Рис. 2. Изображение ножниц для линии

Осталось добавить текст под линией. Воспользуемся псевдоэлементом :after , в сочетании со свойством content он позволяет выводить текст после элемента. Добавляем :after к классу line .

.line:after

Окончательно выравниваем текст по центру линии через свойство text-align и настраиваем вид текста (пример 1).

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Линия отреза   

Текст до

Текст после

Браузеры

Браузер IE6-7 не поддерживает псевдоэлемент :after , поэтому текст под линией в нём выводиться не будет.

Как анимировать пунктирную линию (SVG)

Есть готовый файл, сохраненный в SVG.
Задача следующая, при наведение сделать его анимированным. Суть анимации: рисования элемента от начала до конца. Я полазил по интернету и нашел подходящий пример анимации:

$(document).ready(function() < var canvas = Snap('.main-svg'); var speed = 1000; var line_clients = canvas.path('M349.333,397.333c0,0,46,42.667,146-2.333 c17.917-8.063,79.666-31,87.333,65'); line_clients.attr(< class: "line-clients" >); var group_line = canvas.group(line_clients); group_line.attr(< fill: 'none', stroke: '#fff', strokeWidth: 0 >); $.each([line_clients], function(index, value) < value.attr(< strokeDasharray: value.getTotalLength(), strokeDashoffset: value.getTotalLength(), strokeWidth: 1, stroke: '#000' >); value.animate(< strokeDashoffset: 0 >, speed * 2, mina.easeinout ); >); >); 

Только вот, когда открываешь мой SVG, я не ожидал, что там столько текста ради такой линии.
Я не прошу за себя сделать работу, но может кто-то пнет меня на нужный источник, а лучше пример.
Находил цент, какой с svg конвертирует в JS. Но я либо не разобрался, либо там нет возможности анимации.

Отслеживать
110k 23 23 золотых знака 114 114 серебряных знаков 386 386 бронзовых знаков
задан 24 мая 2016 в 8:47
8,059 5 5 золотых знаков 33 33 серебряных знака 52 52 бронзовых знака
а в чем вопрос-то? пример есть, svg есть. Что-то не работает или как?
24 июн 2016 в 10:01
@Grundy, в файл загляни — там жесть.
24 июн 2016 в 10:07
@Qwertiy, ну вроде ж руками с этим и не надо разбираться 🙂
24 июн 2016 в 10:09

@Grundy, есть набор абсолютно позиционированных штрихов произвольной формы в сомнительном порядке (первые 3 вообще принадлежат разным поворотам). Вопрос: как ты собираешься определить, где должен оказаться штрих при сдвиге на 1 шаг? Это наш мозг достраивает картину до пунктирной линии, в svg никакой информации об этом нет. А если и есть, то надо очень сильно постараться, чтобы её оттуда извлечь.

24 июн 2016 в 10:15

Можно анимировать и «это»: приблизительно нарисовать поверх свою кривую толстой линией цвета фона, закрывающей оригинал. И постепенно её скрывать по событию наведения мыши.

24 июн 2016 в 10:34

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Решение SVG + Mask

Трудности с анимацией рисования с помощью пунктирной линии вызваны тем, что пунктирная линия заполняет всю длину линии или path .

Поэтому бесполезно пытаться повторить технику рисования, как это делается сплошной линией с помощью изменения stroke-dashoffset (отступа линии от начала) от максимума длины линии до нуля.

Линия заполнена полностью, поэтому она будет просто бежать:

.path < stroke-dashoffset: 1490; animation: dash 12s linear forwards; >@keyframes dash < to < stroke-dashoffset: 0; >>

Решить данную проблему можно с помощью маски, которая сначала полностью повторяет и закрывает path , затем с помощью stroke-dashoffset постепенно сдвигается и открывает пунктирную линию, создавая иллюзию появления, рисования пунктирной линии.

var svg = document.getElementById('svg1'); svg.addEventListener("click",() =>< an_stroke.beginElement(); >)
        Click me 
  • У атрибута stroke-dasharray может быть несколько пар параметров. Используя это свойство можно получить интересный эффекты:

stroke-dasharray=»4 8 36 4″ , где 4 — черта, 8 — пробел, 36 — черта, 4 — пробел

var svg = document.getElementById('svg1'); svg.addEventListener("click",() =>< an_stroke.beginElement(); >)
        Click me 

Рисование из одной точки двумя прерывистыми линиями

var svg = document.getElementById('svg1'); svg.addEventListener("click",() =>< an_str.beginElement(); >)
         Click me 
.container

Крайний пример взят отсюда

Отслеживать
ответ дан 3 ноя 2019 в 11:41
Alexandr_TT Alexandr_TT
110k 23 23 золотых знака 114 114 серебряных знаков 386 386 бронзовых знаков
извините что не по теме скажите почему для удобства общения не вводят смайлики ?
3 ноя 2019 в 15:51

@user354190 я даже на задумывался над этим.. мне вполне хватает скобок для выражения положительных и отрицательных эмоций

3 ноя 2019 в 15:55
ясно спасибо за ответ и потраченное время
3 ноя 2019 в 15:55
спасибо большое .
3 ноя 2019 в 16:08

Рисовать в любом случае придётся. Эту линиую надо изобразить заново одним путём. Далее варианта два.

  1. использовать оригинальный кривой и ужасный SVG. Поверх накрыть его своей линией цвета фона, толщины достаточной, чтобы закрыть полностью. Потом анимировать длину штриха и подобрать смещение так, чтобы кривая поверх «скрывалась», открывая пунктир под ней. Ниже эта техника подробнее.
  2. если требуется рисовать сплошной линией – можно изобразить прорисовку одного длинного пути, меняя длину штриха (решение отсюда). Пришлось перерисовать путь, чтобы он стал одной кривой. Смотрите в полный экран, т.к. кривая крупная.
.path < stroke-dasharray: 1490; stroke-dashoffset: 1490; animation: dash 4s linear forwards; >@keyframes dash < to < stroke-dashoffset: 0; >>

Чтобы «рисовать» пунктиром можно сразу нарисовать весь путь пунктиром, а потом поверх закрыть этой же кривой цвета фона. И её не рисовать, а наоборот, скрывать задом наперёд той же техникой, как в первом коде. Пример с прорисовкой пунктирной окружности (отсюда):

Отслеживать
ответ дан 24 июн 2016 в 10:23
30.7k 4 4 золотых знака 49 49 серебряных знаков 86 86 бронзовых знаков

animate — caniuse.com/#feat=svg-smil — deprecated, будет удалена из браузеров. Ну либо подключать полифилл.

24 июн 2016 в 10:31

я предлагаю ТС использовать CSS3 свойство animate (в первом фрагменте кода). Указанный вами deprecated «animate» – лишь в примере с окружностями, которые сразу рисуются. ТС, вероятно, захочет включать анимацию через JS, назначая элементу класс с CSS-свойством.

24 июн 2016 в 10:33

Вероятно, оторвать руки тому, кто этот svg сделал, и переписать на пунктирную линию из прямых и дуг. В этом svg не линия — там каждый штришок сделан отдельным замкнутым контуром из кривых безье — всё это чудо объединено в один path. Думаю, ни у кого нет ни малейшего желания это анимировать.

введите сюда описание изображения

По идее, должно получиться svg из следующего набора команд:

M . v . a . h . a . h . a . h . 

Отслеживать
110k 23 23 золотых знака 114 114 серебряных знаков 386 386 бронзовых знаков
ответ дан 24 июн 2016 в 10:07
124k 24 24 золотых знака 131 131 серебряный знак 312 312 бронзовых знаков
@Alexandr_TT, внезапно))
3 ноя 2019 в 19:54

Решение SVG + Mask + JS

Можно использовать пунктирную линию в качестве маски для анимированной линии.

// Получить идентификатор элемента и длину var myline = document.getElementById("myline"); var length = myline.getTotalLength(); circle = document.getElementById("circle"); // Начальная позиция анимации myline.style.strokeDasharray = length; // Скройте треугольник, смещая черту. Удалите эту линию, чтобы показать треугольник перед прокруткой myline.style.strokeDashoffset = length; // Найти процент прокрутки при прокрутке (используя свойства кросс-браузера) и сместить тире столько же, сколько и процент прокрутки window.addEventListener("scroll", myFunction); function myFunction() < // What % down is it? var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight); // Длина для смещения тире var draw = length * scrollpercent; // тирайте рисунок (при прокрутке вверх) myline.style.strokeDashoffset = length - draw; //Получить точку endPoint = myline.getPointAtLength(draw); circle.setAttribute("cx", endPoint.x); circle.setAttribute("cy", endPoint.y); >
body < height: 2000px; background: #f1f1f1; >#circle < fill: red; >#mySVG < position: fixed; top: 15%; width: 100vw; height: 100vh; margin-left: -50px; >.st0 < fill: none; stroke-dashoffset: 3px; stroke: red; stroke-width: 5; stroke-miterlimit: 10; stroke-dasharray: 20; >.mask-style

Прокрутите это окно, чтобы нарисовать путь..

Scroll назад, чтобы повернуть рисунок

Извините, ваш браузер не поддерживает SVG

Как добавить направляющие линии в Zero Block?

В режиме редактирования Zero Block нажмите справа вверху на «. » (три точки) — откроется панель меню. Для добавления направляющих нажмите на Guides: Hide/Show:

Чтобы задать горизонтальную направляющую, выберите пункт Guides: Add Horizontal, чтобы задать вертикальную — Guides: Add Vertical.

Похожие вопросы
  • Как добавить стрелку в Zero Block?
  • Есть ли слои в Zero Block?
  • Как в Zero Block настроить увеличение изображения по клику?
  • Что такое Tooltip (тултип) в Zero блоке?
  • Как сделать анимацию на мобильных в Zero Block?

Как сделать горизонтальную линию?

Горизонтальная линия делается с помощью свойства border-bottom, которое применяется обычно к элементу . Это свойство добавляет линию снизу заданной толщины и стиля (пример 1). Чтобы не «портить» все , используем класс line , и уже для класса указываем свойство border-bottom . Сам остаётся пустым, никакое содержимое в нём не требуется, только стилевое оформление.

Пример 1. Использование border-bottom

Результат данного примера показан на рис. 1. Здесь мы делаем линию красного цвета толщиной в один пиксель. Сама линия при это занимает всю доступную ширину.

Вид линии, созданной через border-bottom

Рис. 1. Вид линии, созданной через border-bottom

См. также

  • border-bottom
  • Оформление ссылок
  • Точки между слов

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *