html svg填充图片,SVG进阶 | SVG填充模式

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

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

填充模式的例子

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

x="10" y="10" width="20" height="20"

patternUnits="userSpaceOnUse" >

style="stroke: #000000; fill: url(#pattern1);" />

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

然后，在下面的元素中，style属性的fill CSS属性指向了元素。这意味着要使用这个模式来填充矩形。

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

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

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

元素的X和Y属性指定填充模式的开始位置。

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

下面的例子和前面的例子类似，但是X和Y属性设置为(0,0)。

x="0" y="0" width="20" height="20"

patternUnits="userSpaceOnUse" >

style="stroke: #000000; fill: url(#pattern1);" />

得到的结果如下所示：

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

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

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

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

如果将上面的例子中的x和y属性都设置为10，那么模式会从一个整圆开始，结果如下：

嵌套填充模式

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

x="3" y="3" width="9" height="9"

patternUnits="userSpaceOnUse"

>

style="stroke: none; fill: #ff0000;" />

x="12" y="12" width="25" height="25"

patternUnits="userSpaceOnUse"

>

style="stroke: #0000ff; fill: url(#innerPattern)" />

style="stroke: #000000; fill: url(#outerPattern);" />

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

填充模式的转换

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

x="10" y="10" width="20" height="20"

patternUnits="userSpaceOnUse"

patternTransform="rotate(35)"

>

style="stroke: #000000;

fill: url(#transformedPattern);" />

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

相关阅读