您的位置：首页 > 其它

SVG图案和渐变填充

2016-06-14 10:14 651 查看

在基本图形绘制中，我们只用了纯色为图形对象填充颜色和绘制轮廓。其实，出来纯色以外，我们还可以使用图案和渐变来填充图形或者绘制图形轮廓。

一、图案填充：

我们首先来看图案填充，要使用图案，首先要定义一个水平或垂直方向重复的图形对象，然后用它填充另一个对象或者作为画笔使用。这个图形对象称作tile（瓷砖），因为使用图案填充对象的行为很想在地面上铺瓷砖的过程。

<body>
<svg width="1000" height="1000" xmlns ="http://www.w3.org/2000/svg">
<defs>
<pattern id="strip" patternUnits="userSpaceOnUse" x="0" y="0" width="6" height="6">
<path d="M0 0 6 0" style="stroke: black;fill: none"/>
</pattern>
<pattern id="polkadot" patternUnits="userSpaceOnUse" x="0" y="0" width="36" height="36" >
<circle cx="12" cy="12" r="12" style="fill: url(#strip);stroke: black"/>
</pattern>
</defs>
<rect x="36" y="36" width="100" height="100" style="fill: url(#polkadot);fill:url(#polkadot);stroke: black"/>
</svg>
</body>

以上代码显示，我们使用<pattern>元素将创建图案的<path>元素包裹了起来，然后确定一些事。同时，我们还可以发现，不仅仅对象可以用图案来填充，就连图案也是可以用图案进行填充的，都是通过fill:url(#xxx)来进行的。结果如下图：

这里介绍几个属性：

1、patternUnits属性（如何排列图案）：当它属性值为：objectBoundingBox时，把边界框尺寸的百分比作为坐标（默认行为）；当它的值为：userSpaceOnUse时，则采用填充对象的坐标系统，也就是绝对的。

2、patternContentUnits属性（用什么单位表示图案数据本身）：默认情况下为userSpaceOnUse。如果设置成objectBoundingBox，则路径本身的数据点会基于被填充的对象来确定。

3、viewBox：在pattern里设置viewBox的属性值，可以实现图案的缩放。

二、渐变色填充

接下来我们来看一下渐变色填充。渐变分为径向渐变（radialGradient）和线性渐变（linearGradient）。

线性渐变：一系列颜色沿着一条直线过渡；

径向渐变：每个渐变点表示一个圆形路径，从中心店向外扩散。

两种渐变的设置方式大致相同。我们以径向渐变为例：

<body>
<svg width="1000" height="1000" xmlns ="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="two" cx="0%" cy="0%" r="70%" >
<stop offset="0%" style="stop-color: #f96;"/>
<stop offset="50%" style="stop-color: #9c9;"/>
<stop offset="100%" style="stop-color: #906;"/>
</radialGradient>
<radialGradient id="pad" xlink:href="#two" spreadMethod="pad"/>
<radialGradient id="repeat" xlink:href="#two" spreadMethod="repeat"/>
<radialGradient id="reflect" xlink:href="#two" spreadMethod="reflect"/>
</defs>
<rect x="36" y="36" width="100" height="100" style="fill: url(#polkadot);fill:url(#reflect);stroke: black"/>

</svg>
</body>

效果图：

通过上述代码，我们先来分析线性渐变和径向渐变共有的：

1、<stop>元素：stop元素拥有两个必要属性：①offset：确定哪个点的颜色应该等于stop-color，值为0%~100%；②stop-color被指定在style中，但也可以指定它为独立属性。

2、<spreadMethod>属性：该属性拥有三个属性值：①pad：起始和结束渐变点会扩展到对象的边缘；②repeat：渐变会重复起点到终点的过程直到填充满整个对象；③reflect：渐变会按终点到起点、起点到终点的排列重复，直到填充满整个对象。

3、绘制多彩边框：设置好渐变色并标上id，在绘制图形的时候，将stroke属性设置为：stroke：url(#id)，注意调整stroke-width为大于1，否则太细看不清楚。

径向渐变：cx、cy、r定义渐变圆，默认圆心为焦点。如果要改变焦点，则需要设置fx、fy属性；

线性渐变：通过对x1、y1、x2、y2的设置，定义线性渐变的方向，代码如下：

<linearGradient id="left_to_right" xlink:href="#two" x1="0%" y1="0%" x2="100%" y2="0%"/>
<linearGradient id="down" xlink:href="#two" x1="0%" y1="0%" x2="0%" y2="100%"/>
<linearGradient id="diagonal" xlink:href="#two" x1="0%" y1="0%" x2="100%" y2="100%"/>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： svg pattern linearGradient radialGradient

相关文章推荐

新的分享

章节导航