एसवीजी चाक लाइन परेशानी

Question

एक परियोजना के लिए मैं एक एसवीजी आयत वस्तु के चारों ओर एक चाक जैसी सीमा खींचना चाहता हूं। मैं एक 4 पीएक्स चौड़ी रेखा में एक पैटर्न जोड़ने में कामयाब रहा और यह कुछ हद तक चाक जैसा दिखता है, लेकिन मैं वास्तव में लाइन को और अधिक यथार्थवादी बनाने में देख रहा हूं।

मैंने अब तक जो कोशिश की है वह इलस्ट्रेटर में बनावट की तरह चाक बना रही है और इसे एसवीजी को निर्यात कर रही है, लेकिन मैं अपने मौजूदा एसवीजी में पैटर्न के रूप में इस एसवीजी फ़ाइल को पैटर्न के रूप में कैसे आयात कर सकता हूं, बिना सभी पथ जानकारी को प्रतिलिपि बनाये? और मैं इस बनावट को यथासंभव कुशल कैसे बना सकता हूं ताकि दर्शक को 23 एमबी पथ जानकारी लोड नहीं करनी पड़े?

मुझे आशा है कि आप लोग मेरी मदद कर सकते हैं।

चीयर्स,

छिपाएं

पी.एस. यह वही है मैं अब तक के साथ आए हैं है:

SVG Chalk like line as far as I got

Answer 1

मैं svg filters का उपयोग कर, अगर आप सिर्फ जल्दी से, प्रयोग Inkscape में अपनी फ़ाइल को खोलने के लिए, अपने आयतों में से एक का चयन करना चाहते सुझाव देंगे, तो एक जोड़ने "चाक और स्पंज" फिल्टर, और पैरामीटर के साथ खेलते हैं जब तक कि आप कुछ प्राप्त न करें।

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

:

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

आप उदाहरण के लिए उपयोग करें कि आकृति और पाठ पर आवश्यकतानुसार इस तरह तो:

सिर्फ एक शुरुआत है यही कारण है कि, लेकिन आप उस से काफी अच्छा परिणाम प्राप्त कर सकते हैं, यहाँ एक उदाहरण है