一篇教你如何使用SVG填充图案的文章

SVG填充图案用于用图像组成的图案填充形状。图案可以由SVG图像（形状）或位图图像组成。SVG填充图案看起来就像您在Photoshop等中习惯使用的图案一样，称为“平铺”。1.填充图案简单的svg填充图案。示例：代码分析：首先，在元素内部定义元素。该模式包含一个圆形元素。圆形元素将用作填充图案。其次，声明一个元素填充一个CSS属性，该属性在其样式属性中引用元素ID。其次，在CSS填充属性的样式属性中声明一个引用元素ID的元素。运行后图像效果：注意元素中定义的圆如何用作矩形的填充。还要注意圆圈如何从左到右、从上到下不断重复。二、X、Y、Width和Height图案元素的x和y属性定义了图案在元素形状中开始的距离。元素的宽度和高度属性定义了图案的宽度和高度。案例研究这是一个从头开始的例子，将x和y设置为0：之后-运行图像效果：注意图案现在是如何从圆圈的中间开始的（在矩形的顶部和左侧）。创建自己的填充图案时，使用x和y属性值来达到所需的效果。由width和height属性设置的图案的宽度和高度。在前面的示例中，宽度和高度都设置为20，即圆的直径。所以圆圈一遍又一遍地重复，中间没有空格。将图案的宽度设置为25而不是20。这样，水平圆圈之间现在有5个像素的间距。宽度、高度都设置为25下面是同一个例子，只是x和y是设置为10（元素内的圆心）现在，图案从一个完整的圆开始，但仍然有额外的垂直和水平空间。3.嵌套图案填充图案可以嵌套，以便一个填充图案在内部使用另一个填充图案。这个例子有一个矩形和一个圆作为填充图案。使用矩形作为圆圈内的填充图案。示例：运行后图像效果：外矩形现在被一个圆圈填充，而圆圈又被一个矩形填充。4.转换模式填充模式可以使用标准的SVG转换函数进行转换。这可以使用patternTransform属性来实现。SVG模式转换示例定义了一个简单的模式，该模式在用作矩形的填充模式之前旋转了35度。运行后的图像效果：五、总结本文基于Html基础，讲解SVG填充的相关知识点。如何填充图案，通过改变图案的属性，呈现不同的填充效果。还有嵌套模式，转换模式的实际应用。通过案例的分析和效果图的展示，读者可以更好的了解填充图的属性。本文转载自微信公众号《前端进阶学习交流》，可通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。