SVG之旅:填充特性

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

通过前面的学习,你可以用你掌握的知识来绘制任何图形,接下来的目标是给绘制的图形着色。可以使用几种方法来着色,包括指定对象的属性,使用内联CSS样式或者内嵌的CSS样式,或者使用外部的CSS样式文件。大多数的Web网站的SVG使用的是内联样式CSS。但这些方法都有各自的优缺点。

在SVG中要给已绘制好的图形着色,我们主要通过SVG的填充和描边特性来完成。比如在前面的示例中,我们常能看到的fill属性,就是用来给图形设置填充颜色;stroke属性设置绘制对象的线条的颜色。但SVG的填充和描边特性不仅仅就这两个属性,那么今天的目标就是来学习这方面的特性。

首先我们要知道,在SVG中要让绘制的图形显示出来,就必须使用以下指定填充和描边特性:

SVG填充特性

属性名称 属性描述
fill 给绘制的图形填充颜色或图案,默认是black
fill-opacity 指定绘制图形填充的透明度,其值是0.0~1.0,其中0.0表示完全透明,1.0表示完全不透明,默认值是1.0
fill-rule 用来决定判断某个点是否在图形内部的方法,只有当边线交叉时或者内部有“洞”时和有效。属性值有nonzeroevenodd,其默认值是nonzero

SVG2的规范中涉及到有关于填充特性主要有上表所列的几个特性,但是在CSS 填充和描边模块(Level3)中除了上表的几个特性之外,还有fill-breakfill-colorfill-imagefill-originfill-positionfill-sizefill-repeat几个,看上去非常的类似于CSS中的background属性。

但在这篇文章中,只会初步的涉略上表中所列的几个填充特性,其他有关于填充的特性将会在其他的章节中进行介绍。

在这篇文章中,我们主要来了解和学习SVG中的fillfill-opacityfill-rule三个属性。

fill特性

在SVG中,可以使用fill给绘制的图形填充色,而填充色又分为三种:纯色渐变色图案。掌握这些技能,直接能决定你绘制的图形是否能引人入胜。

纯色填充

纯色填充其实没有什么特别,只需要在fill属性中添加颜色值就可以完成。其遵循的规则有:

  • 基本颜色名称,比如:aquablackblue这样的颜色关键词
  • SVG规范中规定的扩展颜色名称
  • 六位十六进制数字#rrggbb,从前往后,每两位分别表示redgreenblue颜色值
  • 三位十六进制数字#rgb,三位数字分别表示redgreenblue颜色值。这是六位十六进制数字#rrggbb的缩写
  • rgb(r,g,b)rgb分别是redgreenblue,其每个值的范围是0~2550%~100%
  • currentColor,来自元素的(当前运用的)color属性,一般是继承的
  • CSS3颜色模块规范规定的其他方法

说了这么多,我们来看一个简单的示例:

<svg  style="height: 300px;width: 100%;">
    <rect x="50" y="50" width="100" height="100" stroke="#000" stroke-width="10" fill="#f40" />   
    <rect x="170" y="50" width="100" height="100" stroke="#000" stroke-width="10" fill="#0f5" />  
    <rect x="290" y="50" width="100" height="100" stroke="#000" stroke-width="10" fill="#09f" />
</svg>

效果如下:

渐变填充

SVG中还可以使用渐变来填充,但这一部分咱们还没有接触过。而渐变又分为线性渐变、径向渐变和角度渐变。但在SVG中渐变的做法较为特殊,首先要先定义一个渐变层<defs>,接着让需要使用渐变的元件,指向这个已定义的渐变层。由于没有接触过SVG中的渐变相关的知识,但并不要紧,我们继续使用老办法,通过制图软件来绘制,然后导出相应的代码。 比如我们绘制了对应的三种渐变:

渐变填充

在绘制的时候,每一种都可以在对应的面板中选择颜色以及调整颜色的位置,比如:

渐变填充

接下来导出的.svg文件,查看清理后的代码:

<svg width="543px" height="162px" viewBox="0 0 543 162">
    <defs>
        <linearGradient x1="50%" y1="23.0100236%" x2="50%" y2="100%" id="linearGradient-1">
            <stop stop-color="#C33B35" offset="0%"></stop>
            <stop stop-color="#164AFB" offset="100%"></stop>
        </linearGradient>
        <rect id="path-2" x="0" y="0" width="167" height="159"></rect>
        <radialGradient cx="50%" cy="45.1700079%" fx="50%" fy="45.1700079%" r="76.9899764%" gradientTransform="translate(0.500000,0.451700),scale(0.952096,1.000000),rotate(90.000000),translate(-0.500000,-0.451700)" id="radialGradient-3">
            <stop stop-color="#C33B35" offset="0%"></stop>
            <stop stop-color="#164AFB" offset="100%"></stop>
        </radialGradient>
        <rect id="path-4" x="187" y="2" width="167" height="159"></rect>
        <rect id="path-5" x="376" y="3" width="167" height="159"></rect>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Rectangle">
            <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
            <rect stroke="#000000" stroke-width="6" x="3" y="3" width="161" height="153"></rect>
        </g>
        <g id="Rectangle">
            <use fill="url(#radialGradient-3)" fill-rule="evenodd" xlink:href="#path-4"></use>
            <rect stroke="#000000" stroke-width="6" x="190" y="5" width="161" height="153"></rect>
    
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/svg/svg-fill-features.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部