Могу ли я сделать линии толще в этой анимации мазка, которую я сделал с помощью svg в html и css?
Я сделал svg и анимировал его, чтобы написать свой текст. Я хочу, чтобы у него были толстые мазки и он был похож на этот сайт (http://weaintplastic.com), выписывая буквы одну за другой. На данный момент он просто обводит буквы, в то же время затрудняя чтение слова, а линии очень тонкие. Я хотел бы сделать мазки толще и анимировать каждую букву, чтобы писать по одной с помощью html и css.
Я создал свой svg на этом веб-сайте (https://vectr.com/), используя их текстовую функцию, а затем набросал путь каждой отдельной буквы с трассировкой каждой отдельной буквы с помощью инструмента «Перо». Я использовал эту ссылку, чтобы открыть svg https://jakearchibald.github.io/svgomg/ и скопировал svg как текст. Затем я следовал инструкциям на этом сайте, чтобы анимировать https://dev.to/oppnheimer/you-too-can-animate-svg-line-animation-jgm.
Вот ссылка на мой код https://codepen.io/anon/pen/JgEadZ#anon-signup
html с путем svg
<div id = "header">
<div id = "content">
<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" width = "640" height = "640">
<defs>
<path d = "M189.37 447.93l-8.06-17.6-18.94-41.4-17.9 41.76-9.1 21.24" id = "a"/>
<path d = "M259.91 434.47l-.15 7.99-12.14 7.78-26-.48-13.85-8.26-5.63-19.61 12.49-26.27 24.08-4.55 18.82 10.35" id = "b"/>
<path d = "M332.37 436.93l-20 15-20-4-9-11-5-13 5-25 13-10H320l12.37 10" id = "c"/>
<path d = "M402.37 451.93h-47v-63h43" id = "d"/>
<path d = "M398.37 418.43h-43" id = "e"/>
<path d = "M470.46 388.93v61h-7.15l-42.94-61v61" id = "f"/>
<path d = "M538.17 388.93h-53 25v63" id = "g"/>
<path d = "M181.54 428.33h-38.46" id = "h"/>
</defs>
<use xlink:href = "#a" fill-opacity = "0" stroke = "#000"/>
<use xlink:href = "#b" fill-opacity = "0" stroke = "#000"/>
<use xlink:href = "#c" fill-opacity = "0" stroke = "#000"/>
<use xlink:href = "#d" fill-opacity = "0" stroke = "#000"/>
<use xlink:href = "#e" fill-opacity = "0" stroke = "#000"/>
<use xlink:href = "#f" fill-opacity = "0" stroke = "#000"/>
<use xlink:href = "#g" fill-opacity = "0" stroke = "#000"/>
<use xlink:href = "#h" fill-opacity = "0" stroke = "#000"/>
</svg>
</div>
</div>
css with strokes
svg {
height: 100vh;
width: 100vw;
background-color: #ebedf5;
}
path {
stroke-dasharray: 100;
animation: draw 5s;
background-color: white;
}
@keyframes draw {
from {
stroke-dashoffset: 0
}
to {
stroke-dashoffset: 100;
}
}
Я думаю, почему мазки такие тонкие, потому что я использую инструмент «Перо», чтобы обвести свой логотип. Я бы хотел, чтобы мазки были гуще.
Почему в Python есть оператор "pass"?
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
Некоторые методы, о которых вы не знали, что они существуют в Python
Python - самый известный и самый простой в изучении язык в наши дни. Имея широкий спектр применения в области машинного обучения, Data Science,...
Основы Python Часть I
Вы когда-нибудь задумывались, почему в программах на Python вы видите приведенный ниже код?
LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа
Алиса и Боб имеют неориентированный граф из n узлов и трех типов ребер:
Оптимизация кода с помощью тернарного оператора Python
И последнее, что мы хотели бы показать вам, прежде чем двигаться дальше, это
Советы по эффективной веб-разработке с помощью Python
Как веб-разработчик, Python может стать мощным инструментом для создания эффективных и масштабируемых веб-приложений.
3
0
507
4
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 4
Добавьте это в свой код CSS:
path {
stroke-width: 5;
}
Ответ принят как подходящий
Я только что проверил CodePen, связанный с веб-сайтом, и кажется, что есть свойство css stroke-width для изменения ширины/толщины штриха.
CSS
path {
stroke-width: 20;
}
Код из примера статьи:
body{
display: flex;
justify-content: center;
}
svg {
height: 90vh;
width: 100vw;
background-color: PaleGreen;
padding: 5vh;
}
path {
stroke: white;
stroke-width: 20;
}
.v1 {
stroke-dasharray: 100;
stroke-dashoffset: 200;
animation: draw 1s infinite;
}
.v2 {
stroke-dasharray: 10;
stroke-dashoffset: 200;
animation: draw 2s alternate infinite;
}
.v3 {
stroke-dasharray: 1200 150;
stroke-dashoffset: 2700;
animation: draw 4s linear infinite;
}
@keyframes draw {
to {
stroke-dashoffset: 0
}
}<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "184.64 83.41 389.16 433.07">
<defs>
<path d = "M200.05 429.61c26.29 30.73 55.8 52.8 88.53 66.21a265.15 265.15 0 0 0 55.9 15.84 127.39 127.39 0 0 0 91.74-19.28c21.76-14.38 36.06-29.03 42.92-43.96 18.8-40.95 16.55-89.29 10.21-119.89-6.34-30.61-8.47-85.69-20.16-119.84-7.78-22.77-24.58-34.58-50.4-35.45l11.34-69.28a1.2 1.2 0 0 1 1.43-.99l20.12 4a6.8 6.8 0 0 1 3.57 1.96l20.58 21.58a25.43 25.43 0 0 1 6.7 21.55l-1.31 8.19a34.66 34.66 0 0 0 4.98 24.09l47.79 75.12a23.65 23.65 0 0 1 2.98 18.47l-4.44 17.66c20.46-13.28 32.54-29.01 36.25-47.18 3.01-14.74 2.67-52.06-1.03-111.96a46.34 46.34 0 0 0-24.68-38.16l-23.01-12.12a15.34 15.34 0 0 0-13.66-.3l-42.72 20.1-33.08-7.96a.35.35 0 0 1-.26-.34v-1.01a3.18 3.18 0 0 0-2.98-3.17l-8.43-.53a4.58 4.58 0 0 0-4.84 5.03l3.84 37.76a32.76 32.76 0 0 1-2.6 16.44l-6.66 15.17 6.33 7.79c13.17 2.89 21.9 9.75 26.2 20.56 6.46 16.23 1.08 54.58 1.94 72.35 1.79 37.1-1.78 16.01 3.37 60.47 5.15 44.45-12.16 85.67-31.51 110.6-19.34 24.92-49.78 50.64-75.86 54.01-40.13 5.19-66.8-13.56-80-56.26-29.35 7.44-49.72 3.08-61.13-13.09-17.1-24.26-18.66-74.4 9.35-125.9 28.01-51.5 96.91-70.78 102.69-80.1 5.77-9.33 20.22-32.88 40.91-46.97 20.68-14.09 38.51-13.74 46.54-9.4 5.35 2.9 10.46 7.47 15.32 13.73l-65.5 124.46c-8.71 13.78-14.51 25.51-17.42 35.18-4.35 14.5-5.36 21.73 0 22.83 5.36 1.09 9.29-8.43 11.21-13.39 1.91-4.96 1.91-29.23-1.97-30.08-3.89-.84-15.5-.59-26.85 6.64-11.34 7.22-12.04 18.67-10.23 23.44 1.82 4.78 10.77-.82 17.94-9.44 4.78-5.75 8.08-11.73 9.9-17.94" id = "a"/>
</defs>
<use xlink:href = "#a" fill-opacity = "0" stroke = "#000" class = "v1"/>
</svg><svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "184.64 83.41 389.16 433.07">
<use xlink:href = "#a" fill-opacity = "0" stroke = "#000" class = "v2"/>
</svg><svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewBox = "184.64 83.41 389.16 433.07">
<use xlink:href = "#a" fill-opacity = "0" stroke = "#000" class = "v3"/>
</svg>Помимо stroke-width (используется для изменения ширины обводки), в вашем коде есть и другие проблемы. Вы используете stroke-dasharray: 100; и stroke-dashoffset: 100;, но это не сработает, так как каждая буква имеет разную длину пути. В следующем примере я указал общую длину каждого пути в переменной css, которая будет использоваться анимацией.
Также ваши пути рисуются в обратном направлении: если вам нужно, чтобы ваша анимация выполнялась справа налево, вам нужно анимировать путь от stroke-dashoffset: calc(var(--len) * -1); до 0.
Я надеюсь, что это помогает.
svg {
height: 100vh;
width: 100vw;
background-color: #ebedf5;
}
path {
stroke-dasharray: var(--len);
stroke-dashoffset: calc(var(--len) * -1);
animation: draw 5s forwards;
background-color: white;
fill:none;
stroke:black;
stroke-width:3px;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}<div id = "header">
<div id = "content">
<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewbox = "100 385 500 100">
<path d = "M189.37 447.93l-8.06-17.6-18.94-41.4-17.9 41.76-9.1 21.24" id = "a" style = "--len:133.43"/>
<path d = "M259.91 434.47l-.15 7.99-12.14 7.78-26-.48-13.85-8.26-5.63-19.61 12.49-26.27 24.08-4.55 18.82 10.35" id = "b" style = "--len:160.01"/>
<path d = "M332.37 436.93l-20 15-20-4-9-11-5-13 5-25 13-10H320l12.37 10" id = "c" style = "--len:154.97"/>
<path d = "M402.37 451.93h-47v-63h43" id = "d" style = "--len:153"/>
<path d = "M398.37 418.43h-43" id = "e" style = "--len:43"/>
<path d = "M470.46 388.93v61h-7.15l-42.94-61v61" id = "f" style = "--len:203.75"/>
<path d = "M538.17 388.93h-53 25v63" id = "g" style = "--len:141"/>
<path d = "M181.54 428.33h-38.46" id = "h" style = "--len:38.46"/>
</svg>
</div>
</div>Идеальное решение! Особенно понравилось использование переменных для хранения длины пути
—
29.07.2019 15:45
Спасибо, я чувствую, что теперь лучше понимаю эту концепцию
—
29.07.2019 19:12
Так как любой шрифт в SVG становится графическим объектом, точнее, каждый его символ.
Таким образом, вы можете анимировать рисунок каждого персонажа, не конвертируя его в path.
- анимация CSS
svg {
height: 100vh;
width: 100vw;
background-color: #ebedf5;
}
.txt1 {
font-size:60px;
fill:none;
stroke:black;
stroke-dashoffset:400;
stroke-dasharray:400;
animation: an_text 10s forwards;
}
@keyframes an_text {
to {
stroke-dashoffset: 0
}
}<div id = "header">
<div id = "content">
<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewbox = "0 0 500 100">
<text class = "txt1" dy = "50" shape-rendering = "crispEdges">Account </text>
</svg>
</div>
</div>- Или анимация СМИЛ
svg {
height: 100vh;
width: 100vw;
background-color: #ebedf5;
}
.txt1 {
font-size:60px;
fill:none;
stroke:#474747;
stroke-dashoffset:400;
stroke-dasharray:400;
stroke-width:1px;
}<div id = "header">
<div id = "content">
<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewbox = "0 0 500 100">
<text class = "txt1" dy = "50" shape-rendering = "crispEdges">ACCENT
<animate
dur = "8s"
repeatCount = "1"
attributeName = "stroke-dashoffset"
values = "400;0;400"
repeatCount = "1" />
</text>
</svg>
</div>
</div>- Еще один пример анимации
Используется команда textPath.
svg {
height: 100vh;
width: 100vw;
background-color: #ebedf5;
}
.txt1 {
font-size:80px;
fill:none;
stroke:black;
shape-rendering:crispEdges;
}<div id = "header">
<div id = "content">
<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" viewbox = "100 385 500 100">
<defs>
<path id = "animatedLine" >
<animate attributeName = "d" from = "m200,335 h0" to = "m200,335 h400" dur = "3s" repeatCount = "indefinite"/>
</path>
</defs>
<text class = "txt1" dy = "100">
<textPath xlink:href = "#animatedLine">
ACCENT
</textPath>
</text>
</svg>
</div>
</div>Мне очень нравится первый пример, где вы используете SMIL для анимации текста! Отлично!
—
29.07.2019 20:21
Другие вопросы по теме
Angular js добавляет пустую опцию в раскрывающийся список?
Изменить значок диапазона onClick и переместить разделы?
Серая рамка появляется вокруг изображений SVG на устройствах с сетчаткой
Эффект отскока Safari/Iphone запускает функцию прокрутки вниз в коде JavaScript, из-за чего панель навигации исчезает
Реализация липкого заголовка с помощью IntersectionObserver
Как показать скрытый div, специфичный для выпадающего списка?
Получение того же индекса при попытке получить выбранный индекс строки
Поиск определенного слова в html-файле в Python
Bootbox dialog.modal('hide') не скрывает модальный
Можно ли сделать текстовое поле вертикально прокручиваемым при наборе текста?
Похожие вопросы
Scikit-learn: Сравнение алгоритмов кластеризации K-Means и MiniBatchKMeans
Транспонирование значений в столбце фрейма данных Pandas
Отключите фокус по умолчанию на следующей кнопке QWizardPage и вместо этого позвольте пользовательскому QPushButton запускаться с помощью «enter»
Процесс Pexpect умирает вместо отправки команды
Как исправить цикл for в Python Visio Converter
Как создать словарь элементов в определенном формате?
Buildozer Как решить ошибку "--ndk-api=21"
Nlopt no catch ForcedStop в функции ограничений add_inequality_constraint
Почему я не могу получить некоторые идентификаторы некоторых строк с помощью регулярных выражений?
Как преобразовать строки в массивы и присоединиться к другой таблице в sql
О, я, должно быть, пропустил это. Спасибо!