SVG学习笔记(2)渐变、图案、文本

渐变

填充一个渐变之前,首先要在<defs>中定义渐变的样式,再通过fill="url(#id)"来填充到具体图形中

线性渐变<linearGradient>的参数

  • id:唯一标识,填充时自动匹配
  • x1y1:渐变起点坐标,默认以比例作单位,(0, 0)代表左上角,(1, 1)代表右下角
  • x2y2:渐变终点坐标,默认以比例作单位,(0, 0)代表左上角,(1, 1)代表右下角

径向渐变<radialGradient>的参数

  • id:唯一标识,填充时自动匹配

  • cxcy:渐变区域的圆心坐标,默认以比例作单位,(0.5, 0.5)代表容器中心

  • r:渐变区域的半径,默认以比例作单位

  • fxfy:渐变颜色焦点坐标,默认以比例作单位,若不设置,则默认以区域圆心作为焦点

    • 若这个坐标在渐变区域外,则区域会变成一个扇形,该扇形的两条边刚好是渐变区域圆的切线
    • 若这个坐标在渐变区域内,则渐变从焦点坐标开始,在区域边缘结束

渐变其他参数

spreadMethod:控制渐变区域外的填充,pad | reflect | repeat,前往MDN

  • pad 当渐变到达终点时,最终的偏移颜色被用于填充对象剩下的空间
  • reflect 会让渐变一直持续下去,不过它的效果是与渐变本身是相反的
  • repeat 也会让渐变继续,但是它不会像reflect那样反向渐变

QQ20180212-105036@2x

view jsfiddle

gradientUnits:userSpaceOnUse | objectBoundingBox,控制参数是绝对单位还是比例单位,默认是objectBoundingBox即比例单位
gradientTransform:控制渐变区域和渐变内容的变形,只会令填充的渐变变形,不影响其容器本身形状

子标签<stop>

<stop>作为子标签存在渐变标签内,用来设置渐变的变化点及颜色,其属性包括:

  • offset:变化点,以百分号作为单位,如offset="50%"
  • stop-color:颜色,支持常用颜色字符和RGB格式,如stop-color="black"
  • stop-opacity:不透明度,0表示全透明,1表示不透明

图案

图案与渐变一样用作图形的填充值,首先要在<defs>中定义图案,再通过fill="url(#id)"来填充到具体图形中

图案<pattern>的参数

  • xy:填充开始点的横向偏移和纵向偏移(相对容器的坐标),默认以比例作单位
  • widthheight:填充图案的尺寸,默认以比例作单位

其他参数

  • patternUnits:userSpaceOnUse | objectBoundingBox,控制参数是绝对单位还是比例单位,默认是objectBoundingBox即比例单位

  • patternContentUnits:userSpaceOnUse | objectBoundingBox,控制图案内部的图形的单位,默认是userSpaceOnUse即绝对单位而非比例单位,个人感觉使用比例单位的时候写坐标的感觉比较尴尬

    patternContentUnits="objectBoundingBox"时,图案内部图形单位为比例单位,但其比例的并不是相对图案本身,而是相对于填容该图案的容器


文本

SVG对文本支持非常优秀,其主标签是<text>除了常用的属性定义,还可以让文本沿着设定的路径进行绘制,绘制出来后还可以被选中复制。但是毕竟是绘图的范畴,所以不支持自动换行

普通参数

  • x:起始绘制坐标

  • y:起始绘制坐标

  • text-anchor:定义文本相对起始点的水平对齐方式,前往MDN(支持 start | middle | end | inherit)

    QQ20180219-090107@2x

  • alignment-baseline:定义文本相对起始点的垂直对齐方式,MDN(支持 auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit)

    QQ20180219-090605@2x

  • dominant-baseline:与alignment-baseline傻傻分不清,求清晰的朋友指教一下

  • font-family:字体

  • font-style:字体样式,其实只有正常和斜体两种(支持 normal | italic | oblique,italic 和 oblique 都是斜体,前者是字体作者中预定义的倾斜形态,后者是用倾斜的方式绘制正常形态)

  • font-weight:字体粗细(支持数字或 normal | bold | bolder | lighter)

  • font-variant:字体变体(支持normal | inherit | small-caps,small-caps 是把小写字母显示成字号偏小的大写字母)

  • font-stretch:字体伸展,根据文档测试各种值并没有变化(支持 normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)

  • font-size:字体大小

  • font-size-adjust:参透不了,MDN

  • kerning:参透不了,MDN

  • letter-spacing:字母间距,中英文有效

  • word-spacing:单词间距,对中文无效

  • text-decoration:字符修饰,下划线,上划线或删除线的效果(支持 none | underline | overline | line-through | blink | inherit)

子标签tspan

  • x:若设置,则它会覆盖父元素的x属性,作为全新的起始绘制的坐标x
  • dx:在x轴上相对父元素的偏移值
  • rotate:字符的旋转角度,注意是每个字符以自身为中心单独旋转
  • textLength:文本长度,设置后浏览器会自动根据该长度调整字母间距,即letter-spacing,使文本刚好达到该长度。注意若设置textLength,请把letter-spacingword-spacing置0

子标签trefMDN

terf元素允许引用已经定义的文本,高效地把它复制到当前位置。你可以使用xlink:href属性,把它指向一个元素,取得其文本内容。你可以独立于源样式化它、修改它的外观。

<text id="example">This is an example text.</text>
<text>
    <tref xlink:href="#example" />
</text>

子标签textPathMDN

textPath元素利用它的xlink:href属性取得一个任意路径,把字符对齐到路径,于是字体会环绕路径、顺着路径走:

QQ20180219-105307@2x

<path id="my_path" d="M 20,20 C 40,40 80,40 100,20 h 80 v 40" fill="transparent" stroke="#cccccc" stroke-width="1" />
<text fill="#dd0000" font-size="14" letter-spacing="2">
    <textPath xlink:href="#my_path">这是一段绕着路径绘制的文字</textPath>
</text>
若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏