svg中的简单填充模式：对angular阴影
起初，我认为我的问题是最简单的：如何填充SVG形状，而不是一个颜色，一个图像或一个渐变，但有一个孵化模式，如果可能对angular线。
这已经2个小时了，我什么也没有发现（至less在2005年之后），我正在转向这个帮助我。
我认为一个可能的黑客将是一个阴影的PNG，可以作为填充，但这并不理想。
我在互联网上没有find任何斜线孵化的东西，所以我会在这里分享我的解决scheme：
<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> （注意pathexpression式中的小写“l”）
上面创build一个舱口，从左下angular到右上angular的对angular线相距4个像素。 在对angular线（ M0,4 l4,-4 ）旁边M0,4 l4,-4还必须对图案区域的左上和右下边缘进行描边，否则由于剪切线与剪切区域的边缘相交，剪切线将被“收缩”广场。
要用此模式填充矩形，请执行以下操作：
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
使用patternTransform属性来旋转垂直（或水平）线段。 这种方法无缝拼接，并使用最简单的path。 图案width属性控制平行阴影的距离。
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse"> <line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:1" /> </pattern>
您可以使用<pattern>标签创build您想要的内容。
作为一个起点，您可以采用相应的MDN文档的示例：
<?xml version="1.0"?> <svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <pattern id="Triangle" width="10" height="10" patternUnits="userSpaceOnUse"> <polygon points="5,0 10,10 0,10"/> </pattern> </defs> <circle cx="60" cy="60" r="50" fill="url(#Triangle)"/> </svg>
在图案内绘制对angular线的一个问题是，当图案平铺时，线条不会总是排成一列 – 特别是在高度放大的情况下。 （这取决于你正在使用的SVG渲染引擎）。 @ Ingo上面的答案试图通过在左上angular和右下angular的三angular形中绘制来解决这个问题 – 但是再一次，使用一些渲染引擎和高放大倍数，它并不总是看起来最好 – 有时线最终会看起来有点像一串香肠。
另一种方法是在图案中绘制水平线并旋转图案，例如
<svg:svg viewBox="0 0 100 100" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg:defs> <svg:pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45 2 2)"> <svg:path d="M -1,2 l 6,0" stroke="#000000" stroke-width="1"/> </svg:pattern> </svg:defs> <svg:rect x="0" y="0" height="100" width="100" fill="url(#diagonalHatch)"/>
这个来自http://bl.ocks.org/jfsiii/7772281的代码看起来很干净且可重用：;
svg { width: 500px; height: 500px; } rect.hbar { mask: url(#mask-stripe) } .thing-1 { fill: blue; } .thing-2 { fill: green; }
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>SVG colored patterns via mask</title> </head> <body> <svg> <defs> <pattern id="pattern-stripe" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <rect width="2" height="4" transform="translate(0,0)" fill="white"></rect> </pattern> <mask id="mask-stripe"> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" /> </mask> </defs> <!-- bar chart --> <rect class="hbar thing-2" x="0" y="0" width="50" height="100"></rect> <rect class="hbar thing-2" x="51" y="50" width="50" height="50"></rect> <rect class="hbar thing-2" x="102" y="25" width="50" height="75"></rect> <!-- horizontal bar chart --> <rect class="hbar thing-1" x="0" y="200" width="10" height="50"></rect> <rect class="hbar thing-1" x="0" y="251" width="123" height="50"></rect> <rect class="hbar thing-1" x="0" y="302" width="41" height="50"></rect> </svg> </body> </html>
这两个资源非常有用： https ： //bocoup.com/weblog/using-svg-patterns-as-fills https://github.com/iros/patternfills/blob/master/public/patterns.css
例如：
<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'> <rect width='10' height='10' fill='red'/> <path d='M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2' stroke='orange' stroke-width='2'/> </svg>
这是使用圆形图案的对angular线的解决scheme。 您可以根据您的要求更改angular度。
<svg width="500" height="500"> <defs> <pattern id="transformedPattern" x="0" y="0" width="2" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(45)" > <circle cx="1" cy="1" r="2" style="stroke: none; fill: #0000ff" /> </pattern> </defs> <rect x="10" y="10" width="100" height="100" style="stroke: #000000; fill: url(#transformedPattern);" /> </svg>
