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:
- are these 2 gradient definitions equivalent?
- in second case, svg standard specify happens points 100, 100, use extrapolated colors gradient vector?
- 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
orrepeat
. otherwise, gradient "size" determined bounding box whenspreadmethod
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:
- when
spreadmethod
pad
: yes, equivalent; otherwise: no - yes, explained above.
yes, setting
spreadmethod
otherpad
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:
Comments
Post a Comment