SVG linear gradient definition -


i confused svg linear gradient specification. suppose, want fill 100x100 rectangle linear gradient slanted @ 45 deg. straightforward way specify gradient points x1 = 0, y1 = 0, x2 = 100 , y2 =100. but, not clear happens when provide points x1 = 86, y1 = 0, x2 = 100 , y2 = 14. note, gradient vector still parallel previous one, gradient vector length not cover entire bounding box. so, having following doubts:

  1. are these 2 gradient definitions equivalent?
  2. in second case, svg standard specify happens points 100, 100, use extrapolated colors gradient vector?
  3. i know svg gradient has attribute spreadmethod, according documentation plays role when gradient starts or ends inside bounds of target rectangle. since second definition not same case (the start , end points lie on bounding box edge), spreadmethod still play role here?

the sentence spec: "indicates happens if gradient starts or ends inside bounds of target rectangle" merely emphasizes fact there no visible effect if gradient vector's endpoints lie outside target rectangle. the gradient , attributes behave same no matter gradient vector's endpoints are: inside, outside, or on bounding box.

in more detail: there 2 gradient attributes relevant question:

  • the gradient vector determines "size" of gradient if spreadmethod reflect or repeat. otherwise, gradient "size" determined bounding box when spreadmethod pad (the default). of course, gradient vector determines direction of gradient.
  • the spreadmethod attribute determines if gradient repeats , how repeats (start again first stop or last stop?). if gradient vector "padded" size of bounding box there no need repeat.


answer questions specifically:

  1. when spreadmethod pad: yes, equivalent; otherwise: no
  2. yes, explained above.
  3. yes, setting spreadmethod other pad have 2 effects:

    a. size of gradient shrink bounding box size of vector

    b. gradient repeat based on value of spreadmethod attribute

here nice illustration of difference between pad, repeat, , reflect. line segment represents gradient vector:

enter image description here

from: svg essentials/patterns , gradients


Comments

Popular posts from this blog

jasper reports - Fixed header in Excel using JasperReports -

media player - Android: mediaplayer went away with unhandled events -

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -