wap SVG 第七章 图案和渐变

这一点，我们只使用了纯色填充和轮廓的图形对象。你是不是仅限使用纯色，你也可以使用图案或渐变填充或轮廓图形。这就是我们将在本章探讨。

模式

要使用一种模式，你定义了一个图形对象的复制水平和垂直填补另外一个对象(或边界线) to fill another object (or stroke).。此图形对象被称为瓷砖，，因为用图案填充对象的行为是非常喜欢与瓷砖地板面积。在本节中，我们将使用由SVG绘制二次曲线例7-1作为我们的瓷砖。中列出的灰色，以显示其面积（(20 by 20 user units）明确。

例7-1。图案瓷砖的路径

 

<path d="M 0 0 Q 5 20 10 10 T 20 20"
    style="stroke: black; fill: none;"/>
<path d="M 0 0 h20 v20 h-20 z"
    style="stroke: gray; fill: none;"/>

图7-1被放大，所以你可以看到它在细节

 

 

要创建一个图样拼贴，你必须附上<PATH>描述您的瓷砖<pattern>如果元素的元素，然后作出若干决定。第一个决定是你如何想空间的瓷砖，这反映在的patternUnits属性。你想的瓷砖间隔，以填补他们申请一定比例的每个对象，或者你希望他们以等间隔的，不管什么大小的对象，他们正在填补？

如果想要瓷砖尺寸对象，通过的对象的基础上，您指定模式的上部左x Ÿ坐标，和它的宽度和高度的范围为零到一个百分比或小数，设置到objectBoundingBox的patternUnits属性。对象的边界框是最小的矩形完全包围一个特定的图形对象。例7-2显示样品瓷砖复制五倍水平和垂直五倍的任何对象，它填补。

<defs>
<pattern id="tile" x="0" y="0" width="20%" height="20%"
    patternUnits="objectBoundingBox">
<path d="M 0 0 Q 5 20 10 10 T 20 20"
    style="stroke: black; fill: none;"/>
<path d="M 0 0 h 20 v 20 h -20 z"
    style="stroke: gray; fill: none;"/>
</pattern>
</defs>

<rect x="20" y="20" width="100" height="100"
    style="fill: url(#tile); stroke: black;"/>
<rect x="135" y="20" width="70" height="80"
    style="fill: url(#tile); stroke: black;"/>
<rect x="220" y="20" width="150" height="130"
    style="fill: url(#tile); stroke: black;"/>

在图7-2中，最左边的矩形，这是100个用户单位的高度和宽度，提供了一个准确的适合五个瓷砖是每20个用户单位的高度和宽度。在中间的矩形的宽度和高度都完全显示任何一个图案瓷砖不够大，所以他们将被截断。在最右边的矩形，增加额外的空间，因为矩形的宽度和高度超过五次，所需的空间为一个单一的瓷砖。在所有的情况下，由于我们瓷砖的左上角的x 和Ý，设置为与该矩形的左上角重合。

如果你已经习惯了大多数图形程序，这种行为会有点震惊。典型的图形编辑程序直接把砖一个接着一个，以填补该地区，无论其大小。砖之间从未有微胖，和瓷砖边缘填充的对象，他们只能通过切断。如果这是你想要的行为，则必须设置patternUnits属性userSpaceOnUse的，并指定x 和Ý的坐标，以用户为单位的宽度与高度的瓷砖，实施例7-3使用的样品瓷砖，设置为它的确切的宽度和高度的20个用户单位。

 

警告

如果你不指定一个值patternUnits，默认是objectBoundingBox的。

patternContentUnits

接下来必须决定将用于表达图案数据本身的单位是什么。默认情况下，patternContentUnits属性设置为userSpaceOnUse的。如果您设置的属性到objectBoundingBox，路径数据点表示对象填充产生的SVG 图7-4 例7-4显示。

 

注意

如果使用objectBoundingBox为您patternContentUnits，你要利用任何物体来填补其边界框左上角的原点（0，0）。此外，你将不得不减少中风的格局数据宽度为0.01，因为这些单位是百分比，而不是用户单位。

例7-4。patternContentUnits设置objectBoundingBox，

 

<defs>
<pattern id="tile"
    patternUnits="objectBoundingBox"
    patternContentUnits="objectBoundingBox"
     x="0" y="0" width=".2" height=".2">
    <path d="M 0 0 Q .05 .20 .10 .10 T .20 .20"
        style="stroke: black; fill: none; stroke-width: 0.01;"/>
    <path d="M 0 0 h 0.2 v 0.2 h-0.2z"
        style="stroke: black; fill: none; stroke-width: 0.01;"/>
</pattern>

</defs>

<g transform="translate(20,20)">
<rect x="0" y="0" width="100" height="100"
    style="fill: url(#tile); stroke: black;"/>
</g>

<g transform="translate(135,20)">
<rect x="0" y="0" width="70" height="80"
    style="fill: url(#tile); stroke: black;"/>
</g>

<g transform="translate(220,20)">
<rect x="0" y="0" width="150" height="130"
    style="fill: url(#tile); stroke: black;"/>
</g>

 

如果你想使用瓷砖，以减少现有的图形对象，它更容易使用的viewBox属性，它的规模。指定的viewBox将覆盖任何patternContentUnits的的信息。另一种可能的选项是使用preserveAspectRatio属性，第2章中所描述的，在2.4节例7-5采用了缩小版的的立方polybézier曲线图6-12瓷砖。中风宽度设置为5，否则，缩小时，你在图7-5中看到的格局不会是可见的。

 

<defs>
<pattern id="tile"
    patternUnits="userSpaceOnUse"
    x="0" y="0" width="20" height="20"
    viewBox="0 0 150 150">
    <path d="M30 100 C 50 50, 70 20, 100 100, 110, 130, 45, 150, 65, 100"
        style="stroke: black; stroke-width: 5; fill: none;"/>
</pattern>
</defs>

<rect x="20" y="20" width="100" height="100"
    style="fill: url(#tile); stroke: black;"/>

 

 

 

嵌套模式

 

同样，这可能已发生的话：“如果一个对象可以用图案填充，该柄用图案填充以及？“ 答案是肯定的。相对于嵌套标记，很少有必要，也有一些效果，您可以轻松实现无嵌套模式。例7-6圈，无不洋溢着横条纹充满了创建一个矩形。这就产生了不寻常的，但有效，圆点的效果如图7-6所示。

<defs>
<pattern id="stripe"
    patternUnits="userSpaceOnUse"
     x="0" y="0" width="6" height="6">
    <path d="M 0 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(#stripe);  stroke: black;"/>
</pattern>
</defs>

<rect x="36" y="36" width="100" height="100"
    style="fill: url(#polkadot); stroke: black;"/>

渐变

 

而不是纯色填充对象，您可以填写梯度，平滑的色彩过渡到另一个从一个树荫。梯度可以是线性的，沿一条直线的颜色转变发生，或径向，发生过渡沿圆形路径。

的LinearGradient

线性渐变是沿直线通过一系列的颜色过渡。您可以指定你想要的颜色在特定地点，被称为渐变停止。站的梯度结构的一部分;颜色是演示文稿的一部分。例7-7显示了一个渐变填充一个矩形与平稳过渡，从金青，你可以看到在图7中的SVG - 7。

<defs>
<linearGradient id="two_hues">
    <stop offset="0%" style="stop-color: #ffcc00;"/>
    <stop offset="100%" style="stop-color: #0099cc;"/>
</linearGradient>
</defs>

<rect x="20" y="20" width="200" height="100"
    style="fill: url(#two_hues);  stroke: black;"/>

 

止动元件

 

让我们来看看的<STOP>元素更加紧密。它有两个必需的属性; 抵消告诉点沿着线的颜色应该是等于停止颜色。的偏移量来表示从0到100％或从0到1.0的小数值的百分比。虽然你并不需要把停在0％和100％，你通常会例7-8是一个稍微复杂的线性渐变，停止黄金在0％，33.3％的红紫色，浅绿色。在100％，它是在图7-8中所示。

<defs>
<linearGradient id="three_stops">
    <stop offset="0%" style="stop-color: #ffcc00;"/>
    <stop offset="33.3%" style="stop-color: #cc6699"/>
    <stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>
</defs>

<rect x="20" y="20" width="200" height="100"
    style="fill: url(#three_stops); stroke: black;"/>

 

建立一个过渡线的线性渐变

 

的线性梯度的默认行为的一个对象从左侧到右侧沿水平线是过渡。如果你想要颜色的过渡发生在一个垂直线或一条线的角度，你必须指定线的起点与X1和Y1属性和结束点的X2和Y2属性。默认情况下，这些都表示为百分比从0％到100％或从0到1的小数。在例7-9中，我们将使用相同的颜色停在水平，垂直和对角线梯度。而不是重复的停止到每个<linearGradient>元素，我们将使用XLINK：HREF属性指到原来的左到右梯度。站将被继承，但是- 由各个梯度和y轴坐标将被覆盖。图7-9中的箭头不显示实施例7-9中的SVG 。

例7-9。定义向量的线性梯度

 

<defs>
<linearGradient id="three_stops">
    <stop offset="0%" style="stop-color: #ffcc00;"/>
    <stop offset="33.3%" style="stop-color: #cc6699"/>
    <stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>

<linearGradient id="right_to_left"
    xlink:href="#three_stops"
    x1="100%" y1="0%" x2="0%" y2="0%"/>

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

<linearGradient id="up"
    xlink:href="#three_stops"
    x1="0%" y1="100%" x2="0%" y2="0%"/>

<linearGradient id="diagonal"
    xlink:href="#three_stops"
    x1="0%" y1="0%" x2="100%" y2="100%"/>
</defs>

<rect x="40" y="20" width="200" height="40"
    style="fill: url(#three_stops); stroke: black;"/>

<rect x="40" y="70" width="200" height="40"
    style="fill: url(#right_to_left); stroke: black;"/>

<rect x="250" y="20" width="40" height="200"
    style="fill: url(#down); stroke: black;"/>

<rect x="300" y="20" width="40" height="200"
    style="fill: url(#up); stroke: black;"/>

<rect x="40" y="120" width="200" height="100"
    style="fill: url(#diagonal); stroke: black;"/>

 

 

注意

如果你想建立的过渡线使用用户空间的坐标，而不是百分比中，设置gradientUnits userSpaceOnUse，而不是默认值，这是objectBoundingBox。

spreadMethod属性

 

没有一个对象从一个角到另一个的过渡线。如果你说的过渡线（20％，30％）（40％，80％），会发生什么事？该行以外的对象会发生什么事？您可以设置spreadMethod属性的下列值之一：

垫

开始和结束的一站式颜色将延长对象的边缘。

重复

渐变将被重复，直到达到所要填充对象的边缘开始到结束的。

反映

梯度将反映结束 - 开始，开始 - 结束，直到达到所要填充对象的边缘。

图7-10显示了最左边的正方形的梯度棉服，广场中间的渐变重复，并且右方的梯度反映。原来的过渡线已被添加到在实施例7-10中，以使效果更容易检测到，每平方米的SVG 。

例7-10。影响的spreadMethod值的线性渐变

<defs> <linearGradient id="partial" x1="20%" y1="30%" x2="40%" y2="80%"> <stop offset="0%" style="stop-color: #ffcc00;"/> <stop offset="33.3%" style="stop-color: #cc6699"/> <stop offset="100%" style="stop-color: #66cc99;"/> </linearGradient> <linearGradient id="padded" xlink:href="#partial" spreadMethod="pad"/> <linearGradient id="repeated" xlink:href="#partial" spreadMethod="repeat"/> <linearGradient id="reflected" xlink:href="#partial" spreadMethod="reflect"/> <line id="show-line" x1="20" y1="30" x2="40" y2="80" style="stroke: white;"/> </defs> <rect x="20" y="20" width="100" height="100" style="fill: url(#padded); stroke: black;"/> <use xlink:href="#show-line" transform="translate (20,20)"/> <rect x="130" y="20" width="100" height="100" style="fill: url(#repeated); stroke: black;"/> <use xlink:href="#show-line" transform="translate (130,20)"/> <rect x="240" y="20" width="100" height="100" style="fill: url(#reflected); stroke: black;"/> <use xlink:href="#show-line" transform="translate (240,20)"/>

图7-10。的spreadMethod值垫，重复，并反映为线性渐变

 

radialGradient

 

您可以使用其他类型的梯度径向渐变，色彩过渡时沿着圆形路径。[1]它的设置在大致相同的方式为线性渐变。例7-11设置了三个站，其中，作为在图7-11中，你看到的是橙色，绿色，紫色。

例7-11。三站的径向渐变

<defs> <radialGradient id="three_stops"> <stop offset="0%" style="stop-color: #f96;"/> <stop offset="50%" style="stop-color: #9c9;"/> <stop offset="100%" style="stop-color: #906;"/> </radialGradient> </defs> <rect x="20" y="20" width="100" height="100" style="fill: url(#three_stops); stroke: black;"/>

 

 

 

 

 

 

建立径向渐变过渡限制

 

而不是使用的电话线，以确定应该在0％和100％的停止点，径向渐变的限制是由圆确定，该中心是0％的停止点，与外周100％的停止点定义。您可以定义外圆CX（中心x），CY（中心Ÿ）和ŗ（半径）属性。所有这些都是在对象的边界框的百分比。所有这些属性的缺省值是50％。实施例7-12绘制一个正方形，用径向渐变中心在左上角的平方和的外边缘在右下方的零点。其结果示于图7-12。

例7-12。设置为径向渐变的限制

 

<defs>
<radialGradient id="center_origin"
    cx="0" cy="0" r="100%">
    <stop offset="0%" style="stop-color: #f96;"/>
    <stop offset="50%" style="stop-color: #9c9;"/>
    <stop offset="100%" style="stop-color: #906;"/>
</radialGradient>
</defs>

<rect x="20" y="20" width="100" height="100"
    style="fill: url(#center_origin); stroke: black;"/>

 

 

终止点为0％，也被称为焦点，缺省情况下，上面定义100％的停止点的圆的中心下。如果你想有0％的止损点，在一些点极限环的中心以外，则必须更改FX和FY属性的。的重点应该是建立100％的停止点的圆圈内。如果它不是，SVG浏览器程序会自动移动焦点到年底圆的外圆周。

在实施例7-13中，圆的中心在原点，半径为100％，但焦点是在（30％，30％）。正如你看到的在图7-13中，这个“中心移动的视觉效果。”

例7-13。焦点设置为径向渐变

 

<defs>
<radialGradient id="focal_set"
    cx="0" cy="0" fx="30%" fy="30%" r="100%">
    <stop offset="0%" style="stop-color: #f96;"/>
    <stop offset="50%" style="stop-color: #9c9;"/>
    <stop offset="100%" style="stop-color: #906;"/>
</radialGradient>
</defs>

<rect x="20" y="20" width="100" height="100"
    style="fill: url(#focal_set); stroke: black;"/>

 

 

注意

如果你想，建立圈子限制使用用户空间的坐标，而不是百分数中，设置gradientUnits userSpaceOnUse而不是默认的值，这是objectBoundingBox。

径向渐变spreadMethod属性

 

在事件的限制没有达到你所描述的对象的边缘，你可以设置spreadMethod属性的值垫，重复，或反映如前所述，在第7.2.1.3节，填补了剩余的空间如你所愿。广场中间的渐变重复，我们已经写了所有三个的效果示例7-14，图7-14显示了最左边的正方形的梯度棉服，右方的梯度反映。

示例7-14。径向渐变的spreadMethod值的影响

<defs>
<radialGradient id="three_stops"
    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="padded" xlink:href="#three_stops"
    spreadMethod="pad"/>
<radialGradient id="repeated" xlink:href="#three_stops"
    spreadMethod="repeat"/>
<radialGradient id="reflected" xlink:href="#three_stops"
    spreadMethod="reflect"/>
</defs>

<rect x="20" y="20" width="100" height="100"
    style="fill: url(#padded); stroke: black;"/>
<rect x="130" y="20" width="100" height="100"
    style="fill: url(#repeated); stroke: black;"/>
<rect x="240" y="20" width="100" height="100"
    style="fill: url(#reflected); stroke: black;"/>

 

 

梯度参考汇总

 

 

线性和径向渐变使用的颜色填充对象描述了一个平稳过渡。有问题的对象，定义为完全包含对象的最小矩形边界框。本<linearGradient>和<radialGradient>元素是一系列的<STOP>元素的两个容器中。这些的<STOP>元素中的每一个都指定了一个停止颜色和偏移量。线性渐变的偏移量是沿着渐变的直线距离矢量的百分比。径向渐变，这是一个渐变的半径距离沿百分比。

对于一个线性梯度矢量的起点（0％停止颜色）所定义的属性x1，Y1，由属性中的2倍和Y2的结束点（具有100％的停止颜色）。

径向渐变的焦点（0％停止颜色）定义属性FX和FY的圈子，有100％的停止颜色被定义为它的中心坐标CX和CY和其半径ŗ。

如果gradientUnits属性的值objectBoundingBox，坐标作为边界框的尺寸的百分比（这是默认的）。如果该值被设置为userSpaceOnuse，则坐标值是被填充的对象，该对象所使用的坐标系中。

如果向量的线性渐变或径向渐变圆对象填充的边界没有达到，剩下的空间将是彩色的spreadMethod属性的值决定：垫，默认情况下，开始延伸和结束的颜色的边界; 重复重复从开始到结束，直到它到达的边界，反映复制梯度的梯度终端到就开始到结束，直到它到达该对象的边界。

渐变和图案转化

 

有时你可能需要倾斜，伸展，或旋转图案或渐变。你不是改造对象填充，你将用于填充对象的图案或色彩频谱。该gradientTransform和patternTransform属性让你做，只是写在示例7-15和图7-15所示：

 

示例7-15。变换图案和渐变

 

<defs>
<linearGradient id="plain">
    <stop offset="0%" style="stop-color: #ffcc00;"/>
    <stop offset="33.3%" style="stop-color: #cc6699"/>
    <stop offset="100%" style="stop-color: #66cc99;"/>
</linearGradient>

<linearGradient id="skewed-gradient"
  gradientTransform="skewX(10)"
  xlink:href="#plain"/>

<pattern id="tile" x="0" y="0" width="20%" height="20%"
    patternUnits="objectBoundingBox">
<path d="M 0 0 Q 5 20 10 10 T 20 20"
    style="stroke: black; fill: none;"/>
<path d="M 0 0 h 20 v 20 h -20 z"
    style="stroke: gray; fill: none;"/>
</pattern>

<pattern id="skewed-tile"
    patternTransform="skewY(15)"
    xlink:href="#tile"/>
</defs>

<rect x="20" y="10" width="100" height="100"
    style="fill: url(#tile); stroke: black;"/>
<rect x="135" y="10" width="100" height="100"
    style="fill: url(#skewed-tile); stroke: black;"/>

<rect x="20" y="120" width="200" height="50"
    style="fill: url(#plain); stroke: black;"/>
<rect x="20" y="190" width="200" height="50"
    style="fill: url(#skewed-gradient); stroke: black;"/>

 

 

 

最后要注意的渐变和图案-虽然我们只适用于他们的形状填充区域，你也可以将他们的行程。这可以让你的对象产生一个彩色或图案的轮廓。您通常会设置一个大于1的数中风宽度，使效果更加清晰可见。

笔记

1. ↑如果对象填充的边框不是正方形的，过渡路径将成为椭圆形，边界框相匹配的宽高比。