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),spreadmethodstill 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
spreadmethodreflectorrepeat. otherwise, gradient "size" determined bounding box whenspreadmethodpad(the default). of course, gradient vector determines direction of gradient. - the
spreadmethodattribute 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
spreadmethodpad: yes, equivalent; otherwise: no - yes, explained above.
yes, setting
spreadmethodotherpadhave 2 effects:a. size of gradient shrink bounding box size of vector
b. gradient repeat based on value of
spreadmethodattribute
here nice illustration of difference between pad, repeat, , reflect. line segment represents gradient vector:

Comments
Post a Comment