上面代码的返回结果如下:

你可以使用标准的SVG转换函数来对SVG填充模式进行转换。可以通过patternTransform属性来实现对填充模式的转换。下面是一个转换SVG填充模式的例子:

嵌套填充模式

SVG填充模式是指使用某种图像作为模式来填充SVG图形。这种模式可以是SVG图形或位图。

在下面的例子中,我们将width属性设置为25。注意观察,现在在两个圆形之间有5个像素的间距。

如果将height属性也设置为25,那么会得到下面的结果:

下面的例子和前面的例子类似,但是XY属性设置为。

然后,在下面的元素中,`style`属性的`fill`
CSS属性指向了
数据解读SVG进阶 | SVG填充模式-Web前端之家。元素。这意味着要使用这个模式来填充矩形。

widthheight属性用于设置模式的宽度和高度。在前一个例子中,圆形的宽度和高度都被设置为20,20个单位刚好是圆形的直径。所以两个圆形之间不会有间隙存在。

如果将上面的例子中的xy属性都设置为10,那么模式会从一个整圆开始,结果如下:

填充模式的X,Y和width,height属性

现在,圆形在矩形内部从左向右,从上向下反复不断的填充矩形。

`元素的XY`属性指定填充模式的开始位置。

得到的结果如下所示:

数据解读 ,填充模式的转换

上面的代码得到的结果如下:

其实SVG填充模式所做的事情就是使用某种图案反复的填充整个SVG图形,就像PhotoShop中的“图案图章工具”所做的那样。

在这个例子中定义了一个简单的模式,并在将它填充到矩形之前旋转35度。得到的结果如下所示:

`元素的widthheight`属性指定填充模式的宽度和高度。

SVG的填充模式也可以进行嵌套,这样会在一个填充模式的内部使用另一个填充模式。来看下面的例子,在一个矩形内部使用圆形的填充模式,而圆形填充模式的内部又嵌套一个矩形的填充模式。

下面是一个简单的SVG填充模式的例子:

返回SVG教程目录

在上面的代码中,元素被定义在元素中。在元素元素中包含一个元素,这个圆形将被用于作为填充模式。

填充模式的例子

注意观察,现在这个模式从矩形的左上角开始,第一个圆形只会显示1/4。通过调整XY属性我们可以得到多种不同的填充效果。

相关文章

网站地图xml地图