SVG Chapter 3

资料来源 imooc 慕课网

SVG中的颜色: RGB和HSL

  • 两种颜色表示方法都被CSS3 支持
  • 互相转换的原理

RGB: 调整颜色时很麻烦,通常需要对3个参数都进行修改

RGB

RGB的使用

HSL

HSL

HSL的使用

推荐网站:http://paletton.com/

透明度
在SVG中,有两种方法改变透明度

  • 直接在颜色中定义rgba(r, g, b, a)
    hsla(h, s%, l%, a) 中的a => 取值范围为[0, 1]
  • opacity属性对透明度进行定义 => 取值范围为[0, 1]

举例:

<rect fill=“rgb(255,0,0)” opacity=“0.5" /> 
<rect stroke=“hsla(0,50%,60%, 0.5)” />

线性渐变 和 径向渐变

渐变让图像更丰满,SVG中有两种渐变方式:线性渐变和径向渐变

  • 线性渐变


    线性渐变
<svg xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stop-color="#1497FC"/>
                <stop offset="0.5" stop-color="#A469BE"/>
                <stop offset="1" stop-color="#FF8C00"/>
        </linearGradient>
        </defs>

        <rect x="100" y="50" width="200" height="150" fill="url(#grad1)" stroke="none"/>
    </svg>

gradientUnits:objectBoundingBox | userSpaceOnUse
objectBoundingBox以实际使用该gradient的形状作为单位1,用0-1选取百分比
userSpaceOnUse 世界坐标系

  • 径向渐变


    径向渐变
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
        <defs>
            <radialGradient id="grad2" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5" fx="0.6" fy="0.3">
                <stop offset="0" stop-color="#1497FC"/>
                <stop offset="0.5" stop-color="#A469BE"/>
                <stop offset="1" stop-color="#FF8C00"/>
            </radialGradient>
        </defs>

        <rect x="100" y="100" width="500" height="150" fill="url(#grad2)"/>
    </svg>

笔刷的使用

笔刷用于绘制纹理,相当于一个容器。纹理会被重复的填充到目标图形上。

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
        <defs>
            <pattern id="p1" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox">
                <circle r="5" cx="10" cy="10" fill="red"></circle>
                <polygon points="30 10 60 50 0 50" fill="green"></polygon>
            </pattern>
        </defs>
        <rect x="100" y="100" width="800" height="300" fill="url(#p1)" stroke="blue"></rect>
    </svg>

patternUnits

  • patternUnits="objectBoundingBox" 情况下: 通过调节 rect 的 width 发现,显示的pattern数量是不变的,改变的只有间距
  • patternUnits="userSpaceOnUse" 情况下: 通过调节 rect 的 width 发现,显示的pattern数量会随容器大小改变
    patternContentUnits
    pattern本身相对/绝对的比例或宽高

推荐阅读更多精彩内容

  • 因为近期项目没有压力,主要工作就是一些涉及功能增删相关的界面的小工作,修修补补,搞个图标之类,设计师小伙伴们都懂的...
    泱泱悲秋阅读 3,822评论 1 27
  • 在React Native中使用ARTReact Native ART 究竟是什么?所谓ART,是一个在React...
    JackfengGG阅读 8,461评论 2 50
  • SVG 学习笔记 SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) S...
    Penn_Xu阅读 599评论 0 1
  • 一.什么是SVG? SVG 指的是可伸缩矢量图形 (Scalable Vector Graphics),它用来定义...
    nightZing阅读 15,693评论 11 62
  • 乌镇的美,是多面的。我最喜欢雨时的乌镇。试想:一个穿着旗袍,撑着油纸伞的女子。走在青砖石瓦路上,静静地走着。其身上...
    落叶不过如此阅读 67评论 0 0
  • 1.以《三言两拍》中“二拍”的第一篇为标尺,确定出自己的阅读层次,并据此制定一个阅读套餐。(文言几成+旧小说几成+...
    久迩阅读 144评论 2 1
  • 很多时候,观念的转变,比收入的转变,要难很多。带领团队创新项目的时间是不完全属于你的,你的时间是很贵的,如果浪费在...
    福兴阅读 237评论 0 0