Проблемы с мелом SVG - PullRequest
Новая
       25

Проблемы с мелом SVG

5 голосов
/ 16 марта 2012

для проекта я хотел бы нарисовать меловую границу вокруг прямоугольного объекта SVG. Мне удалось добавить рисунок в линию шириной 4 пикселя, и это немного напоминает мел, но я действительно стараюсь сделать линию более реалистичной.

До сих пор я пытался создать в Illustrator текстуру, похожую на мел, и экспортировать ее в SVG, но как мне импортировать этот файл SVG в качестве шаблона в существующий SVG, не копируя всю информацию о пути вручную? И как я могу сделать эту текстуру максимально эффективной, чтобы зрителю не пришлось загружать 23 МБ информации о пути?

Надеюсь, вы, ребята, сможете мне помочь.

Приветствия

Скрыть

P.S. Это то, что я придумал до сих пор:

SVG Мел, как линия, насколько я получил

1 Ответ

7 голосов
/ 16 марта 2012

Я бы предложил использовать svg filters , если вы просто хотите быстро поэкспериментировать, откройте файл в Inkscape , выберите один из ваших прямоугольников, затем добавьте «Мел и губка»"фильтруйте и играйте с параметрами, пока не получите то, что вас устраивает.

Это только начало, но вы можете получить довольно хорошие результаты, вот пример: 

    <filter id="chalk" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3">
        <feTurbulence baseFrequency="0.32065" seed="115" result="result1" numOctaves="1" type="turbulence"/>
        <feOffset result="result2" dx="-5" dy="-5"/>
        <feDisplacementMap scale="10" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
        <feGaussianBlur stdDeviation="1.1169"/>
    </filter>

Затем вы используете это для фигур и текста по мере необходимости, например, так: 

    <text filter="url(#chalk)" font-size="26px" fill="white">f(x) = 4x + 7</text>
    <rect filter="url(#chalk)" width="150" stroke="#FFF" stroke-dasharray="16,4" stroke-width="4" fill="none"/>
...