本文主要是介绍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>这篇关于wap SVG 第七章 图案和渐变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
