SVG填充图案

SVG填充图案

<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>
上一篇:H5C3基础学习总结之定位堆叠顺序及定位特殊性


下一篇:html圣杯布局