#### 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> ``` 填充效果如下：