svg - svg 中的简单填充图案 : diagonal hatching

Question

我如何填充 SVG 形状，不是使用单一颜色、图像或渐变，而是使用阴影图案，如果可能的话对角线。

已经过去 2 个小时了，我什么也没发现(至少在 2005 年之后)。

我认为可能的破解方法是使用阴影 PNG 作为填充，但这并不理想。

Answer 1

我在互联网上也没有找到任何有关对角线孵化的内容，所以我将在这里分享我的解决方案:

<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
  <path d="M-1,1 l2,-2
           M0,4 l4,-4
           M3,5 l2,-2" 
        style="stroke:black; stroke-width:1" />
</pattern>

(注意路径表达式中的小写“l”)

上面创建了一个阴影线，其对角线从左下角到右上角，间隔 4 个像素。除了对角线(M0,4 l4,-4)之外，您还必须描边图案区域的左上边缘和右下边缘，因为否则该线会因剪切而“收缩”它与正方形边缘相交的地方。

要使用此图案填充矩形，请执行以下操作:

<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>