Fill and stroke

.fill() and .stroke() allow us to paint the SVG elements' interior and border. In fact, there are a lot of methods related. Let's review the most important.

fill

The .fill() method defines how paints the interior of a specific SVG element. This fill can be a solid color, a gradient, or a pattern.

const svg = gySVG().viewBox('0 0 100 100').width(75).height(75);
svg.add('rect').x(0).y(0).width(100).height(100).fill('blue');

<svg viewBox="0 0 100 100" width="75" height="75">
  <rect x="0" y="0" width="100" height="100" fill="blue"></rect>
</svg>

The .fill_rule() method indicates the mode to be used to fill a shape. The accepted values are nonzero, evenodd, or inherit (to take the value specified by its parent).

The value nonzero determines the "insideness" of a point in the shape by drawing a line from that point to infinity in any direction and then examining the places where a segment of the shape crosses the line. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.

The value evenodd determines the "insideness" of a point in the shape by drawing a line from that point to infinity in any direction and counting the number of path segments from the given shape that the line crosses. If this number is odd, the point is inside; if even, the point is outside.

const svg = gySVG().viewBox('0 0 200 100').width(150).height(75);
svg.add('polygon').points(50,0, 21,90, 98,35, 2,35, 79,90)
  .fill('blue').fill_rule('nonzero');
svg.add('polygon').points(150,0, 121,90, 198,35, 102,35, 179,90)
  .fill('blue').fill_rule('evenodd');

<svg viewBox="0 0 200 100" width="75" height="75">
  <polygon points="50,0,21,90,98,35,2,35,79,90" fill="blue" fill-rule="zero"></polygon>
  <polygon points="150,0,121,90,198,35,102,35,179,90" fill="blue" fill-rule="evenodd"></polygon>
</svg>

The .fill_opacity() method defines the opacity level of the interior paint fill. A value 0 results in complete transparency, the value 1 is no transparency.

const svg = gySVG().viewBox('0 0 130 100').width(75).height(75);
svg.add('circle').cx(40).cy(50).r(40).fill('blue').fill_opacity(0.5);
svg.add('circle').cx(90).cy(50).r(40).fill('green').fill_opacity(0.5);

<svg viewBox="0 0 130 100" width="75" height="75">
  <circle cx="40" cy="50" r="40" fill="blue" fill-opacity="0.5"></circle>
  <circle cx="90" cy="50" r="40" fill="green" fill-opacity="0.5"></circle>
</svg>

As with other visual properties, you can use CSS and the .style. object for handling.

const svg = gySVG().viewBox('0 0 100 100').width(75).height(75);

<svg viewBox="0 0 100 100" width="75" height="75">
  <circle cx="50" cy="50" r="50" style="fill: blue; fill-opacity: 0.5;"></circle>
</svg>

stroke

The .stroke() method defines the color border paint of SGV element, and .stroke_width() the border width. This stroke can be use in combination with .fill().

const svg = gySVG().viewBox('0 0 100 100').width(75).height(75);
svg.add('rect').x(10).y(10).width(80).height(80)
  .fill('yellow').stroke('red').stroke_width(10);

<svg viewBox="0 0 100 100" width="75" height="75">
  <rect x="10" y="10" width="80" height="80" fill="yellow" stroke="red" stroke-width="10"></rect>
</svg>

stroke_linecap() defines which shape the end of an open path will take and there are four acceptable values: butt, round, square, inherit.

const svg = gySVG().viewBox('0 0 100 100').width(100).height(100);
svg.add('line').x1(10).x2(80).y1(25).y2(25)
  .stroke('red').stroke_width(10).stroke_linecap('butt');
svg.add('line').x1(10).x2(80).y1(50).y2(50)
  .stroke('green').stroke_width(10).stroke_linecap('round');
svg.add('line').x1(10).x2(80).y1(75).y2(75)
  .stroke('blue').stroke_width(10).stroke_linecap('square');

<svg viewBox="0 0 100 100" width="100" height="100">
  <line x1="10" x2="80" y1="25" y2="25" 
    stroke="red" stroke-width="10" stroke-linecap="butt"></line>
  <line x1="10" x2="80" y1="50" y2="50" 
    stroke="green" stroke-width="10" stroke-linecap="round"></line>
  <line x1="10" x2="80" y1="75" y2="75" 
    stroke="blue" stroke-width="10" stroke-linecap="square"></line>
</svg>

.stroke_linejoin() defines how the corners of strokes will look on paths and basic shapes.

const svg = gySVG().viewBox('0 0 400 100').width(400).height(100);
svg.add('polygon').points(50,10, 90,90, 10,90)
  .fill('none').stroke('red').stroke_width(10).stroke_linejoin('miter');
svg.add('polygon').points(70,10, 160,10, 110,90)
  .fill('none').stroke('red').stroke_width(10).stroke_linejoin('round');
svg.add('polygon').points(180,10, 130,90, 220,90)
  .fill('none').stroke('red').stroke_width(10).stroke_linejoin('bevel');

<svg viewBox="0 0 200 100" width="75" height="75">
  <polygon points="50,0,21,90,98,35,2,35,79,90" fill="blue" fill-rule="zero"></polygon>
  <polygon points="150,0,121,90,198,35,102,35,179,90" fill="blue" fill-rule="evenodd"></polygon>
</svg>

.stroke_linejoin('mitter') and .stroke_linejoin('mitter-clip') work together .stroke_miterlimit()) method. This last allows how far this joint/corner extends. This value is a limit on the ratio of the miter length to the .stroke_width(). The minimum value is 1.

const svg = gySVG().viewBox('0 0 300 100').width(225).height(75);
svg.add('polygon').points(50,10, 90,90, 50,60, 10,90).fill('none')
  .stroke('red').stroke_width(10).stroke_linejoin('miter');
svg.add('polygon').points(150,10, 190,90, 150,60, 110,90).fill('none')
  .stroke('red').stroke_width(10).stroke_linejoin('miter').stroke_miterlimit(1);
svg.add('polygon').points(250,10, 290,90, 250,60, 210,90).fill('none')
  .stroke('red').stroke_width(10).stroke_linejoin('miter').stroke_miterlimit(6);

<svg viewBox="0 0 300 100" width="225" height="75">
  <polygon points="50,10,90,90,50,60,10,90" fill="none" stroke="red" 
    stroke-width="10" stroke-linejoin="miter"></polygon>
  <polygon points="150,10,190,90,150,60,110,90" fill="none" stroke="red" 
    stroke-width="10" stroke-linejoin="miter" stroke-miterlimit="1"></polygon>
  <polygon points="250,10,290,90,250,60,210,90" fill="none" stroke="red" 
    stroke-width="10" stroke-linejoin="miter" stroke-miterlimit="6"></polygon>
</svg>```

With .stroke_dasharray() you can specify the length of the dash, and the distance between dashes, rather than solid lines.

const svg = gySVG().viewBox('0 0 100 100').width(75).height(75);
svg.add('line').x1(0).x2(100).y1(50).y2(50).stroke_width(10).stroke_dash(10,10,10,20,10);

<svg viewBox="0 0 100 100" width="75" height="75">
</svg>

Use .stroke_dashoffset() to specify the distance at which the dashes should start, and .stroke_opacity() to define the opacity. As with other visual properties, you can use CSS and the .style. members to configure these features.

const svg = gySVG().viewBox('0 0 100 100').width(75).height(75);
svg.add('circle').cx(50).cy(50).r(40).fill('none')
  .style.stroke('violet')
  .style.strokeWidth(10)
  .style.strokeDasharray(62.5)
  .style.strokeDashoffset(31);

<svg viewBox="0 0 100 100" width="75" height="75">
  <circle cx="50" cy="50" r="40" fill="none" 
    style="stroke: violet; stroke-width: 10; stroke-dasharray: 62.5; stroke-dashoffset: 31;">
  </circle>
</svg>