svg 中的简单填充模式:对角线阴影 [英] Simple fill pattern in svg : diagonal hatching

问题描述

我将如何填充 SVG 形状，而不是使用单一颜色、图像或渐变，而是使用剖面线图案(如果可能的话)对角线.

How would I fill an SVG shape, not with a single colour, an image or a gradient, but with a hatching pattern, diagonal if possible.

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

It's been 2 hours and I've found nothing (at least after 2005).

我认为一个可能的破解方法是将孵化的 PNG 用作填充，但这并不理想.

I figure a possible hack would be a hatched PNG that would serve as fill, but that is not ideal.

推荐答案

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

I did not find anything for diagonal hatching on the internet either, so I'll share my solution here:

<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")

(note the lower case "l" in the path expression)

以上创建了一个剖面线，从左下角到右上角的对角线相隔 4 个像素.除了对角线 (M0,4 l4,-4) 之外，您还必须描边图案区域的左上边缘和右下边缘，否则该线将被压缩".由于在与正方形边缘相交的地方被剪裁.

The above creates a hatch with diagonal lines from the lower left to the upper right that are 4 pixels apart. Besides the diagonal line (M0,4 l4,-4) you also have to stroke the upper left and the lower right edges of the pattern area, since the line will otherwise be "constricted" due to clipping where it intersects the edges of the square.

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

To fill a rectangle with this pattern, do:

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

这篇关于svg 中的简单填充模式:对角线阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！