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

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

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

Решение

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

Наша линия будет содержать три элемента: саму пунктирную линию, рисунок половины ножниц и надпись «линия отреза». На рис. 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 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков
задан 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(); >)

У атрибута stroke-dasharray может быть несколько пар параметров. Используя это свойство можно получить интересный эффекты:

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

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

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

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

.container

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

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

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

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

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

использовать оригинальный кривой и ужасный SVG. Поверх накрыть его своей линией цвета фона, толщины достаточной, чтобы закрыть полностью. Потом анимировать длину штриха и подобрать смещение так, чтобы кривая поверх «скрывалась», открывая пунктир под ней. Ниже эта техника подробнее.
если требуется рисовать сплошной линией – можно изобразить прорисовку одного длинного пути, меняя длину штриха (решение отсюда). Пришлось перерисовать путь, чтобы он стал одной кривой. Смотрите в полный экран, т.к. кривая крупная.

.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 золотых знака 48 48 серебряных знаков 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 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков
ответ дан 24 июн 2016 в 10:07
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака
@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

Маски, градиенты, фильтры, анимация, вертикальный и горизонтальный parallax

Анимация рисования линии

Опубликовано 23 декабря 2016 автором Alexander_T

В последнее время набирают популярность анимационные эффекты рисования линий с чистого листа. Магические картинки анимации игровой консоли или дядьки в кресле копируются с сайта на сайт. Конечно это круто выглядит и наверняка у вас появилось желание сделать, что нибудь подобное для своего сайта. Для этого есть несколько плагинов реализации эффекта анимации линий. Но, я не буду перечислять их, объяснять как они работают, как плагины можно “заточить” под себя. При желании всё это можно найти.
Задача данной статьи иная – понять, как реализуется эффект анимации, отчего зависит направление, последовательность и продолжительность рисования линий.
Почему один файл SVG можно заставить отрисовываться, а другой нет.
Далее будет логично заняться более интересными вещами – последовательной и параллельной анимацией нескольких фрагментов изображения, реализацией плавного преобразования одной векторной картинки в другую.

Немного теории.

Чтобы получить эффект анимации рисования линии с нуля до конца, нужно прописать в стилях анимируемого объекта для начальной точки:

stroke-dasharray = getTotalLengtht
stroke-dashoffset = getTotalLengtht
добавить команду анимации для линии или пути
для конечной точки линии выполнить условие – stroke-dashoffset = “0”

—>
stroke-dasharray – атрибут, отвечающий за пунктирную линию. Например: stroke-dasharray: 10px 10px; Первая цифра – длина линии, вторая цифра – длина пробела. Если задана только одна цифра – stroke-dasharray: 10px, то длина и пробел будут равны. Я пользуюсь этим свойством, так как проще анимировать один параметр, чем два.
stroke-dashoffset – атрибут, отвечающий за отступ от начала линии или пути.
getTotalLengtht – команда, которая позволяет вычислить полную длину пути.
Из примера выше видно, что с начала анимации – from отступ равен полной длине пути, затем он уменьшается to=”0″ до нуля. В результате рисуется линия от нуля до конца, (полная длина).

Анимация рисования линии с чистого листа

Для простоты освоения этого метода найдите или сами напишите SVG файл, где есть только один . Присвойте ему уникальный идентификатор
Следующий шаг – нужно измерить длину path в вашем файле, который вы хотите анимировать. Для этого я подготовил Html файл, в который вы можете скопировать на место существующего пути, патч из своего файла SVG, затем нажав на кнопку “Total” узнать длину пути, которую необходимо подставить в атрибуты строки патча: stroke-dasharray = “70” и stroke-dashoffset = “70” Ниже код этого Html файла.

< title >Измерение длины пути < / title >
< svg 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" width = "100%" height = "100%" >
< path id = "check" fill = "none" stroke = "green" stroke - width = "1" d = "M 34.6 14.6 L 21 28.2 L 15.4 22.6 L 12.6 25.4 L 21 33.8 L 37.4 17.4z" / >
function TotalLength ( ) < var path = document . querySelector ( '#check' ) ; var len = Math . round ( path . getTotalLength ( ) ) ; alert ( "Длина пути - " + len ) ;

Обратите внимание, что наименование идентификатора вашего патча

Следующий шаг – добавление анимации в SVG файл для плавного уменьшения параметра атрибута stroke-dashoffset с максимального значения до нуля. Обратите внимание, что при вложениии анимации в одиночный тег его нужно преобразовать в двойной. Подробнее здесь.

< svg id = "svg1" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns : xlink = "http://www.w3.org/1999/xlink" width = "200" height = "200" viewBox = "0 0 126 126" >
< title >animation logo picasa < / title >
< path id = "check" fill = "none" stroke = "black" stroke - dasharray = "600" stroke - dashoffset = "600" d = "M113.5 57.7l-8.5-11.4 . 86.3 72.8z" >
< animate id = "p1" attributeName = "stroke-dashoffset" begin = "svg1.click" values = "600; 0" dur = "10s" repeatCount = "1" fill = "freeze" calcMode = "linear" / >
< text x = "98" y = "17" font - size = "11" font - family = "Ariel" text - anchor = "middle" fill = "green" stroke = "grey" stroke - width = "0.5px" > Click me < / text >

Для лучшего понимания я освободил код от лишних подробностей. Полную рабочую версию можете забрать по кнопке.

В команде анимации значения параметра, в нашем случае это изменение – stroke-dashoffset можно указывать по разному, как from=”600″ to=”0″ ,
так и другим способом – values=”600;0″
Последний способ более удобен, так как можно указать больше двух значений, например: values=”600; 0; 600″
Это понадобится для реализации двойного эффекта рисования линий: сначала появление изображения, затем его плавное исчезновение.
begin=”svg1.click” – начало анимации по клику мышки на любом месте SVG полотна, так как ему присвоен идентификатор – см. 1 строку кода выше.
fill=”freeze” – изображение “замораживается” после окончания анимации.
calcMode=”linear” – задается равномерность анимации, то есть скорость зависит только от заданного времени продолжительности анимации dur=”10s” и длины пути.

Чередование направления рисования линии

Идея проста в реализации. Если мы научились анимировать рисование линии с нуля до полной длины, то можно повернуть процесс и в обратную сторону. Заставить линию плавно уменьшать длину от максимума до нуля. Для этого нужно, чтобы
stroke-dashoffset изменялся от нуля до полной длины линии values=”0;700″ , тем самым скрывая её полностью. В нашем примере совмещены две последовательные анимации – рисование линий от нулевой длины до максимальной и от максимальной длины до нулевой. Соответственно анимация атрибута stroke-dashoffset должна быть зеркальной – values=”700;0;700″ Ниже пример кода анимации.

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

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

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