Problemi con la linea di gesso SVG

per un progetto Vorrei disegnare un bordo simile a un gesso attorno a un oggetto rettangolo SVG. Sono riuscito ad aggiungere un pattern a una linea larga 4px e questo in qualche modo somiglia al gesso, ma in realtà sto cercando di rendere la linea più realistica.Problemi con la linea di gesso SVG

Quello che ho provato finora è la creazione di un gesso come texture in Illustrator ed esportare questo per SVG, ma come ho di poter importare questo file SVG come modello nel mio SVG esistente senza dover copiare tutte le informazioni sul percorso a mano? E come posso rendere questa texture il più efficiente possibile in modo che lo spettatore non debba caricare 23 MB di informazioni sul percorso?

Spero che voi ragazzi potete darmi una mano.

Cheers,

Nascondi

P.S. Questo è quello che sono venuto in mente finora:

SVG Chalk like line as far as I got

fonte

2012-03-16 Hidde Stokvis

Io suggerirei usando svg filters, se si desidera solo di sperimentare velocemente, aprire il file in Inkscape, selezionare uno dei vostri rettangoli, quindi aggiungere un Filtro "Chalk and sponge" e gioca con i parametri fino a ottenere qualcosa di cui sei soddisfatto.

questo è solo un inizio, ma è possibile ottenere abbastanza piacevoli risultati da questo, ecco un esempio:

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

Quindi si utilizza che sulle forme e il testo, se necessario, in questo modo, per esempio:

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

fonte

2012-03-16 13:17:34

Perché volevo vederlo, l'ho messo online qui: http://jsfiddle.net/kDem5/ Bel lavoro, Erik! :) Modificando leggermente i parametri, ecco una versione leggermente meno sfocata e più stretta dell'effetto: http://jsfiddle.net/kDem5/2/ – Phrogz

E ... con un'immagine di sfondo e colorazione: http: // jsfiddle. net/kDem5/3/... e quindi variando il dasharray in modo che i tratti non siano così regolari: http://jsfiddle.net/kDem5/4/ E infine (!) un uso per Comic Sans che non suck: http://jsfiddle.net/kDem5/5/ – Phrogz

Ottimo lavoro entrambi, +1 ':)' – halfer

Problemi con la linea di gesso SVG

risposta

Problemi correlati