Эффект длинной тени в SVG для Интернета

В основном мне интересно, есть ли у кого-нибудь идеи о том, как эффективно получить эффект длинной тени с помощью SVG: Пример изображения

Мои три идеи о том, как это может быть возможно:

Подробная карта градиента Hella, но есть ли веб-совместимый способ экспортировать ее в SVG из Illustrator? Blend Object SVG Filter, о котором я не знаю? JS-решение с чем-то вроде SNAP SVG? Мое временное решение состояло в том, чтобы экспортировать каждую часть головоломки из Illustrator с 75 слоями путей SVG, создающих тень. Проблема с таким количеством слоев заключается в том, что это сильно усложняет рендеринг в браузере. Вот пример

Я уже использовал элемент use, но вызывал элемент symbol со всеми 75 теневыми путями.

В исходном AI-файле эффект создается с помощью режима наложения, которому после некоторого поиска в Google я не смог найти аналог фильтра SVG... но, возможно, я что-то упускаю.

Я пытался понять, как это сделать с помощью одного пути и градиента, но из-за «многослойного эффекта» он не был бы линейным, поэтому мне пришлось чертовски чертовски его отобразить, и я не знал, есть ли простой способ сделать это.

Спасибо за вашу помощь!

Режимы наложения CSS все еще находятся на ранних стадиях, но могут быть реализованы. Мне любопытно, почему вам нужно 75 слоев, я думаю, что-то вроде этого потребуется только 2 * максимальное количество штук. Я почти уверен, что вы не могли бы получить эффекты наведения для отдельных частей, если бы использовали один путь.
попробуйте эту ссылку .. [ stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3] Надеюсь, это поможет ура
... также вот еще один пример/подход, с которым вы могли бы поэкспериментировать

Ответы (2)

Я видел примеры CSS, в которых используется несколько теней с разным смещением и цветом (обычно с box-shadow). Вы можете сделать то же самое, используя тени в SVG.

Вот пример CSS: http://www.sandbox.juan-i.com/longshadows/

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

Ту же технику теней можно использовать в Illustrator, потому что Illustrator также может иметь несколько теней. Лучшим вариантом, вероятно, является использование Blend Toolв Illustrator для создания множества промежуточных форм, что хорошо для чего-то вроде этого.

Дополнительная информация: http://design.tutsplus.com/tutorials/illustrators-blend-tool-a-comprehensive-guide--vector-551 .

Вот пример использования файла Blend Tool.

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

Плохая новость заключается в том, что единственный способ отобразить это в SVG — это использовать Object→ Expand Appearanceи Object→ Expandдля преобразования перехода в отдельные пути.

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

И вы вернулись к исходной точке с точки зрения производительности.

Другой вариант — использовать растровое изображение для длинных теневых элементов. Так они будут красивыми и эффектными.

Вы можете использовать фильтры SVG. Я просто не уверен, что он легче с точки зрения скорости. Наличие 75 путей ничего не значит для компьютера, но даже несколько фильтров могут поставить компьютер на колени. (это сильно зависит от реализации.)

Вот один из способов (длинная тень 10 пикселей):

<filter id="Long_Shadow_10" >
    <feConvolveMatrix order="20"  in="SourceAlpha" result ="conv_out"
        kernelMatrix=" 
            1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 
            0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0
            0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1
            " />
</filter>

Теперь вам все равно нужно будет замаскировать его ограничивающим объемом. Не очень практично, но работает. (вам может потребоваться расширение перед размытием и т. д.) Большие столбцы ядра длиннее тень, медленнее производительность.

пример результата

Изображение 1 : результат направленной тени размером 20 пикселей.

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

Эффект длинной тени в SVG для Интернета
СпросиСетьПолитика конфиденциальности1y, 0v