Ответ 1
Это "Ответьте на свой вопрос - поделиться своими знаниями, Q & A-style" -тильный ответ, но если у вас есть лучший ответ, пожалуйста, свободно используйте клавиатуру.
Я использовал SO только несколько дней, поэтому, пожалуйста, не уменьшайте меня до разрыва. У меня есть интересная обходная идея по этой проблеме, которая основана на масках и масках переменной ширины.
Но пусть начнется с вашей (или моей) первой идеи. Когда мы собираемся разрушать (тонкие) графические объекты в SVG, очевидная первая мысль заключается в использовании фильтра эрозии:
Но поскольку фильтр эрозии (и расширяется также) использует пиксельные данные (растрированный путь), результат не выглядит хорошо во всех случаях. На самом деле я никогда не видел красивого эрозии при использовании для фильтрации векторных объектов. Смотрите шляпу и рот:
У расширенного фильтра есть аналогичные проблемы (нос не очень приятный, а бейсболка - лоскутная и некоторые другие несоответствия):
Все пользователи Adobe Illustrator знают хорошие эффекты пути, которые могут использоваться для применения различных действий пути к фигурам (объектам). Эти эффекты не изменяют исходные данные пути, они создают только модифицированную копию объекта. Одним из наиболее используемых является Эффект смещения пути, который может использоваться для перехода с выбранного объекта на заданное расстояние (или что-то подобное), SVG: s фильтры эрозии и расширени имеют сходство с эффектом смещения Illustrator, но качество - как векторная операция (по сравнению с растровым).
Формат SVG в этом текущем состоянии, отсутствует поддержка смещенного на Illustrator смещения, но можно получить ту же функциональность, что и штрихи и маски с переменной шириной, как указано здесь.
Позвольте погрузиться в мир масок SVG. Расширение (или начальный путь или утолщение) можно достичь, просто увеличив ширину хода, но эрозия (или путь вставки или прореживание) нуждается в чем-то большем, например, маски. В SVG любой графический объект или элемент "g" можно использовать в качестве альфа-маски для компоновки текущего объекта в фоновом режиме (Рекомендация W3C SVG 1.1).
Вышеупомянутое означает, что в качестве маски можно использовать не только заполнение объекта, но и штрих. И, изменяя ширину хода пути, который используется в качестве маски, мы можем контролировать, какая часть текущего объекта (в который применяется маска с использованием атрибута маски) маскируется.. p >
Позвольте получить пример использования маски. Сначала мы определяем путь в SVG: s defs element:
<defs>
<path id="head_path" d="M133.833,139.777c1 ...clip... 139.777z"/>
</defs>
Когда мы определяем путь в элементе defs, он устраняет необходимость повторять одни и те же данные в других частях документа. Атрибут id пути используется для ссылки на путь из некоторой точки (ов) документа.
Теперь мы можем использовать данные этого пути в маске:
<defs>
...
<mask id="myMask" maskUnits="userSpaceOnUse">
<use xlink:href="#head_path" fill="#FFFFFF" stroke="#000000"
stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</mask>
...
</defs>
Элемент 'use' ссылается на элемент 'path', идентификатор которого является 'head_path' и указывает, что в эту маску включен графический контент (в данном случае только данные пути) элемента 'head_path'. Ширина штриха, определенная на элементе "use" выше, будет значением эффекта смещения (erode). Эта сумма маскируется из элемента в случае, который мы собираемся сделать дальше.
Хорошо, пусть сначала нарисовать "голову" без маскировки, чтобы увидеть, насколько она красива:
...
</defs>
<use x="5" y="5" xlink:href="#head_path" fill="#4477FF" stroke="black"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
Это создает следующую форму:
Теперь проверьте, что мы можем добиться с помощью маски:
...
</defs>
<use x="5" y="5" xlink:href="#head_path" fill="#22EE22" stroke="black"
stroke-width="21" stroke-linecap="round" stroke-linejoin="round"
mask="url(#myMask)"/>
В приведенном выше элементе "use" указывается использование "myMask" в качестве маски и "head_path" в качестве графического содержимого. Эффект маски применяется к элементу "use" и рисуется следующая форма:
Если мы складываем оба над каждым, мы можем сравнить исходную голову с замаскированной головой:
Неплохо вообще? Давайте сравним первую попытку, используя SVG-версию с фильтром в маске:
Левая часть фильтруется с эрозией, а правая - в масках, чтобы имитировать эффект смещения, подобный иллюстратору. Никаких странных артефактов в шляпе и рту!
Как насчет расширения? Есть ли способ устранить непоправимость пути на носу и лоскут бейсболки? Конечно. И метод действительно простой, но вроде взлома. К счастью, нет необходимости использовать маски. Вместо этого мы можем настроить ширину штриха для достижения желаемого эффекта. И поскольку удар уже используется для смелости, чтобы получить черный ход вокруг смелой формы (если когда угодно), мы должны добавить дополнительную копию элемента с небольшим более широким штрихом и выложить его ниже смелой формы:
<!-- To get the black stroke -->
<use x="220" y="5" xlink:href="#head_path" fill="red" stroke="black"
stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
<!-- To get the boldened shape -->
<use x="220" y="5" xlink:href="#head_path" fill="red" stroke="red"
stroke-width="21" stroke-linecap="round" stroke-linejoin="round"/>
Это создает следующую форму:
Здесь применяются как исходная форма, так и та, которая применяется в нашем обычном эффекте смещения:
Как наше обычное смещение сравнивается с расширенным фильтром:
Левая (вверху) расширена с использованием SVG: s расширенный фильтр, правый - смелый, используя наш пользовательский эффект смещения. Довольно приятно, мне нравится. Путь точно следует исходному пути на данном расстоянии и никаких признаков лоскута на бейсболке.
И, наконец, давайте соединим все провода:
Левый (выше) использует фильтр растяжения/эрозии SVG, а правый использует эффект смещения с использованием Illustrator, который достигается с помощью маски SVG и более толстых штрихов. Какой из них вы выберете?
Заключение. Мы не вынуждены использовать Javascript или другие скрипты для сгущения или тонких графических элементов в SVG. Фильтры Erode и Dilate SVG могут иметь некоторые цели использования, но они не очень подходят для высококачественных "модификаций" пути. Маски немного сложны в использовании, но после нескольких экспериментов вы знакомы с ними. Я действительно надеюсь, что SVG в будущем будет поддерживать эффект смещенного пути изначально, без использования подобных хаков.
Я использовал шрифты, используемые в этих примерах, чтобы играть с фильтрами и масками: http://jsfiddle.net/7Y4am/
(Проверьте, по крайней мере, чтобы изменить ширину хода!)
(Извините, мой плохой английский, который заставил носителей языка смеяться до смерти, но, пожалуйста, помните, что я принадлежу к 94% человечества, который не говорит по-английски. Но, к счастью, у нас есть Google Translate.)