Rắc rối dòng phấn SVG

Question

cho một dự án tôi muốn vẽ một đường viền giống như phấn xung quanh một đối tượng hình chữ nhật SVG. Tôi quản lý để thêm một mô hình cho một đường rộng 4px và điều này không giống như phấn hơi, nhưng tôi thực sự nhìn vào làm cho dòng thực tế hơn.

Những gì tôi đã thử cho đến nay là tạo phấn như kết cấu trong Illustrator và xuất sang SVG, nhưng làm cách nào tôi có thể nhập tệp SVG này làm mẫu trong SVG hiện tại mà không phải sao chép tất cả thông tin đường dẫn bằng tay? Và làm thế nào tôi có thể làm cho kết cấu này hiệu quả nhất có thể để người xem sẽ không phải tải 23 MB thông tin đường dẫn?

Tôi hy vọng các bạn có thể giúp tôi.

Chúc mừng,

Ẩn

T.B. Đây là những gì tôi đã đưa ra cho đến nay:

SVG Chalk like line as far as I got

Answer 1

tôi muốn đề nghị sử dụng svg filters, nếu bạn chỉ muốn nhanh chóng thử nghiệm, mở tập tin của bạn trong Inkscape, chọn một trong các hình chữ nhật của bạn, sau đó thêm một Bộ lọc "Phấn và miếng bọt biển" và chơi với các thông số cho đến khi bạn nhận được một cái gì đó mà bạn hài lòng.

Đó chỉ là một sự khởi đầu, nhưng bạn có thể có được kết quả khá tốt đẹp từ đó, đây là một ví dụ:

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

Sau đó, bạn sử dụng trên hình dạng và văn bản khi cần thiết, như thế này ví dụ:

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