|
<svg>
<defs>
<radialGradient
cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15"
fill="url(#Gradient5)" stroke="black" stroke-width="2"/>
<circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
<circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>
看效果图就知道"焦点"的含义了。
此外，还有渐变色元素还有一些变换的属性，如gradientTransform，这个不是这里的重点，后面会总结变换。
另外一个可能用到的属性是spreadMethod属性，这个属性定义了渐变色到达它的终点时应该采取的行为。该属性有3个可选值：pad(默认值),reflect,repeat。pad不用说了，属于自然过渡，渐变色结束以后，使用最后一个成员色直接渲染对象剩下的部分。refect会让渐变色继续，只不过渐变色会反向继续渲染，从最后一个颜色开始到第一个颜色这个顺序渲染；等到再次到达渐变色终点时，再反序，如此这般指导对象填充完毕。repeat也会让渐变色继续渲染，但是不会反序，还是一遍一遍从第一种颜色到最后一种颜色渲染。效果图如下所示：
看一段重复渲染的代码：
复制代码 代码如下:
<svg>
<defs>
<radialGradient
cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25"
spreadMethod="repeat">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="50" y="50" rx="15" ry="15"
fill="url(#Gradient)"/>
</svg>
纹理填充
纹理填充也是一种流行的填充方式，在SVG中，可以使用pattern创建一个纹理，然后用这个pattern去填充别的对象。直接看例子：
复制代码 代码如下:
<svg>
<defs>
<linearGradient>
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<linearGradient x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="orange"/>
</linearGradient>
</defs>
<defs>
<pattern x=".05" y=".05">
<rect x="0" y="0" fill="skyblue"/>
<rect x="0" y="0" fill="url(#Gradient7)"/>
<circle cx="25" cy="25" r="20" fill="url(#Gradient6)" fill-opacity="0.5"/>
</pattern>
</defs>
<rect fill="url(#Pattern)" stroke="black" x="0" y="0"/>
</svg>
例子看起来很简单，由渐变色创建pattern，然后使用pattern
填充矩形。这里需要注意：
1. 不同的浏览器填充这个pattern的时候效果不一样。
比如例子在FireFix和Chrome中效果一样。但是如果你把渐变色
和pattern定义在同一个defs组合里，则FireFox仍然能正常渲染，
但是Chrome就识别不了渐变色，只会用默认的黑色填充。
2. pattern也需要定义id。
3. pattern也必须要定义在defs中。
4. pattern的使用也是把url(#id)直接赋值给fill或stroke。
上面这些都是很简单的，我们重点看一下例子中的坐标表示情况，坐标在pattern中比较复杂。
pattern中包含两个相关属性：patternUnits和patternContentUnits属性；这两个属性的取值都还是只有2个：objectBoundingBox和userSpaceOnUse，这两个值的含义上面以及讲过了。这里容易混淆的是这两个属性的默认值不同，但是当你理解这么做的原因以后，你又会发现这么做还真是有道理。
1. patternUnits属性
这个属性与Gradient的gradientUnits属性是一样的，默认采用objectBoundingBox。受这个属性影响的属性有x,y,width,height，这4个属性分别定义了pattern的起点，宽高度。它们都采用了相对值，例子中想要在水平和竖直方向上都填充4次，所以width和height都设为了0.25。
2. patternContentUnits属性
这个属性的默认值正好相反，采用userSpaceOnUse。这个属性描述了pattern中绘制的形状(比如上面的rect,circle)的坐标系统。也就是说在默认情况下，你在pattern中绘制的形状和pattern自身的大小/位置使用了不一样的坐标系。考虑上面例子中的情况，我们想填充一个200*200的矩形，而且每个方向重复4次。这就意味着每个pattern是50*50的，那么pattern里面的两个矩形和一个圆形就是画在这个50*50的矩形中。这样我们就能理解上面pattern中的矩形和圆的坐标了。此外，这个例子中的pattern为了居中，需要偏移10px后开始渲染，而这个值是受patternUnits属性制约的，所以默认情况下，x,y值就为：10/200=0.05。
那么pattern为什么要这么设置两个属性的默认值呢？
（编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
