#### 1、问题描述 在svg绘制了一个面积图，通过渐变及滤镜无法还原成设计稿的样式(线条填充) #### 2、问题原因 对svg的标签及属性不熟悉，不知道如何实现 #### 3、解决方案 使用pattern标签，里面可以添加任何你想要的图形如(image, rect, ellipse...) ```html <!-- 垂直渐变 --> <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="80%" style="stop-color:rgb(255,155,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(155,0,0);stop-opacity:1" /> </linearGradient> <!-- SVG图案填充 --> <defs> <pattern id="patternFill" x="0" y="0" width="300" height="300" patternUnits="userSpaceOnUse"> <image xlink:href="../images/cat.jpg" width="300" height="400" /> </pattern> </defs> <rect x="0" y="600" width="300" height="300" fill="url(#patternFill)" stroke="blue" /> <!-- 线条填充 --> <defs> <pattern id="grid" x="20" y="100" width="0.01" height="1" > <!-- 此处的矩形使用渐变填充 --> <rect x="0" y="0" width="2" height="300" fill="url(#grad2)" stroke="none"></rect> </pattern> </defs> <!-- 这个矩形会横向平铺 pattern里的矩形--> <rect x="300" y="0" width="300" height="300" fill="url(#grid)" stroke="blue"></rect> ``` 填充效果如下：