渐变 | 您所在的位置:网站首页 › 渐变色logo怎么做出实物 › 渐变 |
html #rect1 { fill: url(#Gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]>以上是一个应用了线性渐变的元素的示例。线性渐变内部有几个 结点,这些结点通过指定位置的 offset(偏移)属性和 stop-color(颜色中值)属性来说明在渐变的特定位置上应该是什么颜色;可以直接指定这两个属性值,也可以通过 CSS 来指定他们的值,该例子中混合使用了这两种方法。例如:该示例中指明了渐变开始颜色为红色,到中间位置时变成半透明的黑色,最后变成蓝色。虽然你可以根据需求按照自己的喜好插入很多中间颜色,但是偏移量应该始终从 0% 开始(或者 0 也可以,百分号可以扔掉),到 100%(或 1)结束。如果stop设置的位置有重合,将使用 XML 树中较晚设置的值。而且,类似于填充和描边,你也可以指定属性stop-opacity来设置某个位置的半透明度(同样,对于 FF3 你也可以设置 rgba 值)。 html 使用渐变时,我们需要在一个对象的属性fill或属性stroke中引用它,这跟你在 CSS 中使用url引用元素的方法一样。在本例中,url 只是一个渐变的引用,我们已经给这个渐变一个 ID——“Gradient”。要想附加它,将属性fill设置为url(#Gradient)即可。现在对象就变成多色的了,也可以用同样的方式处理stroke。 元素还需要一些其他的属性值,它们指定了渐变的大小和出现范围。渐变的方向可以通过两个点来控制,它们分别是属性 x1、x2、y1 和 y2,这些属性定义了渐变路线走向。渐变色默认是水平方向的,但是通过修改这些属性,就可以旋转该方向。下例中的 Gradient2 创建了一个垂直渐变。 html 备注: 你也可以在渐变上使用xlink:href 属性。如果使用了该属性时,一个渐变的属性和颜色中值(stop)可以被另一个渐变包含引用。在下例中,你就不需要在 Grandient2 中重新创建全部的颜色中值(stop)。 html 尽管通常你可能在文档的顶部就定义了 Gradient1,但我在结点上直接包含了 xlink 的命名空间,关于这点的更多信息我们会在讨论图片的时候详解。 |
CopyRight 2018-2019 实验室设备网 版权所有 |