Как добавить свойство штриха или анимировать путь заполнения svg?

Я использовал комбинацию Illustrator, Sketch, Inkscape и svg-редактора Питера Коллингриджа для создания и обработки SVG, но столкнулся с несколькими проблемами. Я пытаюсь создать базовый логотип с использованием текста, и когда логотип появляется на странице, я хотел бы анимировать внешнюю границу (с эффектом рисования ), а затем заполнить центры сплошным цветом.

В Illustrator и Sketch я начал с обычного текстового поля и преобразовал слой в контуры, но мои экспортированные SVG содержат только один путь без полей strokeи . stroke-widthЭто выглядит примерно так: <path fill="#FFF" d="…"/>, с большим количеством разметки в d=''поле.

Я прочитал и узнал, что Inkscape экспортирует некоторые из самых чистых SVG, поэтому импортировал PNG моих инициалов, «проследил растровое изображение» и «разгруппировал слои» в соответствии с этой демонстрацией: youtube.com/watch?v=1cZk08x_rAI. Это экспортировало svg с несколькими путями, но в каждом из них по-прежнему отсутствовали параметры strokeи stroke-width. Это самое близкое, что я когда-либо делал для анимации: codepen.io/pcooney10/pen/PPvGrx , и оно также содержит фактический код SVG.

У меня есть несколько вопросов, надеюсь, здесь есть люди, которые могут помочь:

  1. Как создать/экспортировать SVG, содержащие поля stroke, stroke-width, stroke-dasharrayи ? stroke-dashoffsetЭти параметры, похоже, открывают множество функций анимации.

  2. Как я могу создать плоский SVG, который по-прежнему анимирует внешние границы? Кажется, пути должны быть замкнутыми, так что это помогает мне понять, почему мой svg состоит из 7 слоев. Все лишние цвета кажутся ненужными, но если я скрою слой, это будет выглядеть забавно.

  3. В общем, какой инструмент лучше всего подходит для создания SVG? Кажется, что Inkscape экспортирует самый чистый SVG-код, но с ним не так просто работать, как со Sketch и Illustrator. Svg-редактор Питера Коллингриджа кажется лучшим для сокращения кода, но он не удаляет все стили, которые Sketch и Illustrator встраивают в файл.

1. Возможно, вы захотите установить обводку на своей фигуре перед ее экспортом. например ширина 1px, цвет красный. Для векторных фигур у вас всегда есть возможность установить цвет обводки и заливки отдельно. 3. Вы можете использовать экспорт inkscape в качестве последнего шага и создать свою форму в любом другом инструменте. Мой личный фаворит на данный момент — Affinity Designer для экспорта из-за дополнительных параметров, которые он предлагает, таких как сглаживание преобразований. Существует также инструмент командной строки для оптимизации под названием svgo ( github.com/svg/svgo ).
@AAGD, спасибо. После публикации этого вопроса я понял, как добавить свойство штриха в Illustrator. У меня такое ощущение, что все пути могут иметь элемент штриха, даже если он не определен в исходном файле. Для фигур, которым я действительно не хотел иметь контур, но хотел эффект контура, я добавил 0,1 пикселя к ширине обводки и смог заставить работать анимацию рисования.

Ответы (1)

  1. Как создать/экспортировать SVG, содержащие поля stroke, stroke-width, stroke-dasharrayи ?stroke-dashoffset

С Inkscape это очень просто:

Создавать

  • обводка : нарисуйте или импортируйте свой объект, выберите объект, затем просто выберите цвет из палитры, удерживая нажатой, Shiftили задайте обводку непосредственно в меню «Заливка и обводка» ( Shift+Ctrl+F). Ширина обводки по умолчанию будет 1px .

  • ширина обводки : отрегулируйте ширину обводки по своему вкусу в меню «Заливка и обводка».

  • stroke-dasharray : выберите понравившийся узор из раскрывающегося списка «Черты» или создайте свой собственный узор, выбрав «Пользовательский».

  • stroke-dashoffset : отрегулируйте число рядом с раскрывающимся списком по своему вкусу. Вы увидите, как штрихи блуждают по фигуре.

Экспорт

  • Нажмите «Файл» > «Сохранить» и выберите «Обычный SVG» в качестве формата. Полученный файл будет чистым SVG-представлением со свойствами, которые вы искали.

Пример

Сохранение этих трех фигур

как простой SVG дает вам:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg197572"
   viewBox="0 0 840.00001 280"
   height="280"
   width="840">
  <defs
     id="defs197574" />
  <metadata
     id="metadata197577">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(87.913618,-29.053558)"
     id="layer1">
    <g
       transform="translate(-5.1968614,1.7322813)"
       id="g198176">
      <path
         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0088aa;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:15.99999952, 7.99999977;stroke-dashoffset:24;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
         id="path198120"
         d="m 660.77938,211.25626 c -9.4418,16.35367 -2.12269,65.32688 -19.37371,73.00753 -17.25102,7.68065 -48.74777,-30.52798 -67.21871,-34.4541 -18.47094,-3.92612 -62.7855,18.16832 -75.42109,4.13508 -12.63559,-14.03325 13.96995,-55.79555 11.99608,-74.5757 -1.97388,-18.78014 -36.68089,-54.09824 -27.23909,-70.45191 9.44179,-16.353669 57.38167,-3.95556 74.63269,-11.63621 17.25102,-7.680648 40.11546,-51.602873 58.5864,-47.676754 18.47094,3.92612 21.49388,53.350874 34.12947,67.384124 12.63558,14.03324 61.47361,22.20591 63.44748,40.98605 1.97387,18.78015 -44.09773,36.92822 -53.53952,53.28189 z" />
      <path
         d="m 397.92226,211.25626 c -9.4418,16.35367 -2.12269,65.32688 -19.37371,73.00753 -17.25101,7.68065 -48.74777,-30.52798 -67.2187,-34.4541 -18.47094,-3.92612 -62.78551,18.16832 -75.4211,4.13508 -12.63558,-14.03325 13.96995,-55.79555 11.99608,-74.5757 -1.97387,-18.78014 -36.68089,-54.09824 -27.23909,-70.45191 9.44179,-16.353669 57.38167,-3.95556 74.63269,-11.63621 17.25102,-7.680648 40.11547,-51.602873 58.58641,-47.676754 18.47093,3.92612 21.49387,53.350874 34.12946,67.384124 12.63559,14.03324 61.47361,22.20591 63.44748,40.98605 1.97387,18.78015 -44.09773,36.92822 -53.53952,53.28189 z"
         id="path198124"
         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0088aa;fill-opacity:1;fill-rule:nonzero;stroke:#ff6600;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
      <path
         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0088aa;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:16, 8;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
         id="path198126"
         d="m 135.06512,211.25626 c -9.4418,16.35367 -2.12269,65.32688 -19.37371,73.00753 -17.251014,7.68065 -48.747765,-30.52798 -67.218704,-34.4541 -18.470939,-3.92612 -62.785503,18.16832 -75.421091,4.13508 -12.635588,-14.03325 13.969949,-55.79555 11.996077,-74.5757 -1.973873,-18.78014 -36.680888,-54.09824 -27.239093,-70.45191 9.441795,-16.353669 57.381673,-3.95556 74.632691,-11.63621 17.251019,-7.680648 40.115467,-51.602873 58.586406,-47.676754 18.470944,3.92612 21.493874,53.350874 34.129464,67.384124 12.63559,14.03324 61.47361,22.20591 63.44748,40.98605 1.97388,18.78015 -44.09773,36.92822 -53.53952,53.28189 z" />
    </g>
  </g>
</svg>

Проверьте три <path ... />элемента, чтобы увидеть свойства штриха и штриха.

  1. Как я могу создать плоский SVG, который по-прежнему анимирует внешние границы?

Я думаю, вы смешиваете здесь несколько концепций: если под «сплющенным» вы подразумеваете «без слоев», вам придется переместить все объекты в один слой. Это совершенно не зависит от того, являются ли определенные формы закрытыми путями или нет. Кажется, вы запустили «Trace Bitmap», который (в зависимости от настроек/фильтра) дает вам несколько объектов, которые могут показаться разными «слоями», но на самом деле являются просто отдельными объектами, содержащими (возможно, зашумленную) геометрию формы, все они в один слой.

Итак, чтобы прояснить ситуацию:

  • В SVG слои представляют собой отдельные перекрывающиеся «холсты», видимость которых можно переключать по отдельности. Чтобы увидеть слои в Inkscape, нажмите Shift+Ctrl+L. Для простого SVG, который вы хотите использовать в Интернете, я бы использовал только один слой и поместил туда все объекты. Скорее всего, у вас будет только один слой под названием «Слой 1». Это нормально.

  • Когда вы запускаете «Trace Bitmap» (например, с «Multiple Scans: Colors»), вы получаете группу объектов. Вы можете разгруппировать это с помощью Shift+Ctrl+G, затем разделить (переместить F1) и проверить отдельные объекты. Скорее всего, они будут содержать векторные следы фигур разного цвета. Чтобы отредактировать эти объекты, вам нужно ввести «Редактировать пути по узлам» ( F2), затем вы можете, например, выбрать (нарисовать прямоугольник выбора) и удалить зашумленные узлы ( Ctrl+Del). Если вы чувствуете, что просто много шума или что объекты очень плохо разделяют оригинал, вы можете повторно запустить «Trace Bitmap» с другими настройками или просто нарисовать векторные фигуры вручную.

  • Вы можете объединить любые объекты, которые являются путями (например, результаты «Trace Bitmap») в один объект, выделив их оба и выбрав «Путь» > «Объединение» (или любую другую логическую операцию, если на то пошло). Если один из объектов не является путем, преобразуйте его с помощью «Путь» > «Объект в путь». Если это не сработает, возможно, вы имеете дело с группой путей, которые вам нужно сначала разгруппировать, а затем преобразовать по отдельности. Примечание . Объект может иметь только один цвет заливки и один цвет обводки. Таким образом, когда вы соединяете два объекта, они приобретают цвета первого или второго объекта.

  • Независимо от того, получаете ли вы свои векторные фигуры путем трассировки или рисования вручную, в конце концов вы хотите иметь несколько чистых объектов с закрытыми путями. Затем вы можете назначить stroke, stroke-widthи stroke-dasharray. stroke-dashoffsetЭто нормально, если некоторые контуры открыты, но обратите внимание, что заливка будет выглядеть забавно, так как она «пересекает» одну конечную точку фигуры с другой, поэтому вам следует удалить заливку для этих контуров.

С такой очищенной формой вы сможете легко анимировать нужные свойства.

  1. В общем, какой инструмент лучше всего подходит для создания SVG?
  • Ха-ха, на этот вопрос невозможно дать объективный ответ. Я использовал Illustrator (некоторое время назад) и Inkscape (исключительно последние пару лет). По моему личному мнению, Inkscape определенно не интуитивно понятен, если вы переходите с Illustrator. Тем не менее, это также не ужасно сложно учиться. После того, как вы освоите его, вы поймете, что это совершенно потрясающий и определенно лучший инструмент для создания SVG. Он был построен на основе SVG, что означает соответствие между инструментами Inkscape и функциями SVG 1:1. И это бесплатно и с открытым исходным кодом, что — если программное обеспечение достаточно зрелое, как Inkscape — всегда приносит мне бонусные баллы. Но как я уже сказал - личное мнение :D.

Я надеюсь, что более или менее ответил на ваш вопрос (ы).

Как добавить свойство штриха или анимировать путь заполнения svg?
СпросиСетьПолитика конфиденциальности1y, 0v