SVG漸層

基本方法


svg(viewbox="-50 -50 100 100")
 //defs svg描述標籤
 defs
  linearGradient#mygra
    stop(offset="5%" stop-color="#C29979")
    stop(offset="80%" stop-color="#c1d7ae")
 circle(cx=0, cy=0, r=20)

svg
 border: 1px solid #000
 width: 500px  

circle
 fill: url(#mygra)

Display

漸層方向

x1, y1→漸層起點,x2, y2→漸層終點

  • 左往右 (default) :x1=0%, y1=0%, x2=100%, y2=0%
  • 右往左:x1=100%, y1=0%, x2=0%, y2=0%
  • 上至下:x1=0%, y1=0%, x2=0%, y2=100%
  • 下至上:x1=0%, y1=100%, x2=0%, y2=0%

svg(viewbox="-50 -50 100 100")
 //上至下漸層
 defs
  linearGradient(x1="0%" y1="0%" x2="0%" y2="100%")#mygra
    stop(offset="5%" stop-color="#C29979")
    stop(offset="80%" stop-color="#c1d7ae")
 circle(cx=0, cy=0, r=20)

svg
 border: 1px solid #000
 width: 500px  

circle
 fill: url(#mygra)

Display

漸層範圍:gradientUnits

  • objectBoundingBox (default):只有指定物件上色
  • userSpaceOnUse:整個svg上色,指定的物件擷取一部份svg的漸層呈現

Display
gradientUnits=”objectBoundingBox” (default):只有指定物件上色

gradientUnits=”userSpaceOnUse”:整個svg上色,指定的物件擷取一部份svg的漸層呈現

注意:line漸層

line的漸層必須使用userSpaceOnUse(整個svg上色),否則漸層無效


svg(viewbox="-50 -50 100 100")
 defs
  //由上到下
  //必須使用userSpaceOnUse
  linearGradient(x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse")#mygra5
    stop(offset="5%" stop-color="#C29979")
    stop(offset="30%" stop-color="#c1d7ae")
 line(x1="0" y1="-20" x2="0" y2="50")

svg
 border: 1px solid #000
 width: 300px
 line
  stroke: url(#mygra5)
  stroke-width: 3

Display

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *