Skip to content

Use linear gradient as fill/stroke colour? #29

@ivanbacher

Description

@ivanbacher

Is it possible to use a gradient fill instead of a single colour?

var def = svg.append('defs');
var gradient = def.append('linearGradient')
    .attr('id', 'custom_id_1')
    .attr('x1', '50%')
    .attr('y1', '0%')
    .attr('x2', '50%')
    .attr('y2', '100%');

//set start
gradient.append('stop')
    .attr('offset', '0%')
    .attr('stop-color', 'white')

//set color at the end
gradient.append('stop')
    .attr('offset', '100%')
    .attr('stop-color', 'blue')
var t = textures
    .lines()
    .shapeRendering("crispEdges")
    .background('url(#custom_id_1)');

screen shot 2017-04-17 at 14 06 30

var t = textures
    .lines()
    .shapeRendering("crispEdges")
    .stroke('url(#custom_id_1)');

screen shot 2017-04-17 at 14 06 18

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions