SVG填充图案

image

<svg xmlns="http://www.w3.org/2000/svg"
    width="200px" height="200px" viewBox="0 0 200 200">
    <defs>
        <pattern id="tile" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 0 0 Q 5 20 10 10 T 20 20" stroke="black" fill="none"/>
            <path d="M 0 0 h 20 v 20 h -20 z" stroke="gray" fill="none"/>
        </pattern>
    </defs>
    <rect x="20" y="20" width="100" height="100" fill="url(#tile)" stroke="black"/>
    <rect x="135" y="20" width="70" height="80" fill="url(#tile)" stroke="black"/>
    <rect x="220" y="20" width="150" height="130" fill="url(#tile)" stroke="black"/>
</svg>
posted @ 2022-02-03 21:17  xl4ng  阅读(160)  评论(0)  编辑  收藏  举报