SVG tebeşir çizgisi sorunları

Question

Bir proje için SVG dikdörtgen nesnesi etrafında tebeşir benzeri bir kenar çizmek istiyorum. 4px geniş çizgiye bir desen eklemeyi başardım ve bu bir şekilde tebeşirlere benziyor, ama aslında çizgiyi daha gerçekçi hale getirmeye çalışıyorum.

Ben şimdiye kadar denedim Illustrator benzeri dokuyu tebeşir oluşturma ve SVG bu ihracat nedir

ama nasıl daha elle tüm yol bilgilerini kopyalamak zorunda kalmadan Mevcut SVG desen olarak bu SVG dosyasını alabilirsiniz? Ve bu dokuyu olabildiğince verimli hale getirebilirim, böylece izleyici 23 MB yol bilgisini yüklemek zorunda kalmaz?

Umarım bana yardımcı olabilirsiniz.

Alkış,

Hide

Not; Bu defa ile geldi budur:

SVG Chalk like line as far as I got

Answer 1

Ben sadece hızlı bir şekilde dikdörtgenler birini seçin, deneme Inkscape dosyanızı açmak istiyorsanız, svg filters kullanarak öneririm, daha sonra eklemek "Tebeşir ve sünger" filtre ve mutlu bir şey elde edene kadar parametrelerle oynayın.

<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"/> 

: Örneğin bu gibi şekiller ve metin üzerinde gerektiği gibi kullanan Sonra

<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> 

: sadece bir başlangıçtır, ancak bundan oldukça güzel sonuçlar alabilirsiniz

, işte size bir örnek