SVG图案和渐变填充

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

一、图案填充:

我们首先来看图案填充,要使用图案,首先要定义一个水平或垂直方向重复的图形对象,然后用它填充另一个对象或者作为画笔使用。这个图形对象称作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%"/>



©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页