Learn SVG (7) Patterns and Gradient Fills

Get into the habit of writing together! This is the 7th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

Introduction

In addition to solid colors, patterns and gradients can also be used for the fill and outline of graphics in SVG.

pattern fill

• Pattern fills require the use of patternselements, one of the fill types.
• patternUnitsThe property sets how the patterns are arranged. Default value objectBoundingBox.

1. When used objectBoundingBox, the size of the pattern is calculated based on the size of the object to be filled.

    <svg width="400" height="400">
      <defs>
        <pattern id="pa" x="0" y="0" patternUnits="objectBoundingBox" width="20%" height="20%">
          <path d="M 0 0 h 20 v 20 h -20 z" style="stroke: black; fill: none"></path>
        </pattern>
      </defs>

      <rect width="100" height="100" stroke="#aaa" fill="url(#pa)" />
      <rect x="110" width="200" height="200" stroke="#aaa" fill="url(#pa)" />
    </svg>
复制代码

1.2 Set the width and height to 20%. A 20px square is drawn in the pattern. The first image 20% smaller than the 20px square is intercepted, and then the pattern is tiled. The second image is 20% larger than 20px, the pattern becomes larger, and then the pattern is tiled.

2. Use userSpaceOnUseattributes to width和heightmake patterns according to.

  <pattern id="pa" x="0" y="0" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M 0 0 h 40 v 40 h -40 z" style="stroke: black; fill: none"></path>
    <path d="M 20 22 A 5 10 -45 1 0 20 34" fill="#aaa" />
    <path d="M 20 22 A 5 10 45 1 1 20 34" fill="#aaa" />
  </pattern>

  <rect fill="url(#pa)" stroke="black" x="0" y="0" width="200" height="200" />
复制代码

2.2 width和heightTile the generated pattern according to the setting.

• patternContentUnitsThe property sets what type of graphics width and height in the pattern. Default value userSpaceOnUse.

1. userSpaceOnUseSets the size of the pattern using the default coordinate type px.
2. objectBoundingBoxUse percentages to set the size of the pattern.

      <defs>
        <pattern
          id="pa"
          x="0"
          y="0"
          width=".2"
          height=".2"
          patternUnits="objectBoundingBox"
          patternContentUnits="objectBoundingBox"
        >
          <path d="M 0 0 h 0.2 v 0.2 h -0.2z" style="stroke: black; stroke-width: 0.01; fill: none"></path>
        </pattern>
      </defs>
      <rect width="100" height="100" stroke="#aaa" fill="url(#pa)" />
      <rect x="110" width="200" height="200" stroke="#aaa" fill="url(#pa)" />
复制代码

2.1 The squares in the visible pattern are also calculated as percentages.

Gradient fill

• linearGradientLinear gradient, a series of colors that transition along a straight line, specifying the desired color at a specific location.
• Attributes:

1. x1,y1The starting point of the gradient, expressed as a percentage. The default gradient direction is from left to right.
2. x2,y2The end position of the gradient, expressed as a percentage.
3. spreadMethodSet the gradient fill method.

      <defs>
        <linearGradient id="linear" x1="100%" y2="100%">
          <stop offset="0%" style="stop-color: #ffcc00"></stop>
          <stop offset="100%" style="stop-color: #0099cc"></stop>
        </linearGradient>
      </defs>
      <rect x="10" y="10" width="200" height="100" fill="url(#linear)"></rect>
复制代码

• radialGradientRadial gradient, where each gradient point is a circular path that spreads out from the center point.
• Attributes:

1. cx,cy,rDefines the range of the gradient. The unit of measuring the radius is the average width and height of the object. The default value is 50%.
2. fx,fyThe center of the circle path where the 0% point is located.
3. spreadMethodSets the case where the drawing range does not reach the edge of the graphic.

      <defs>
        <radialGradient id="rad" cx="0%" cy="0%" r="60%">
          <stop offset="0%" style="stop-color: #f96" />
          <stop offset="50%" style="stop-color: #9c9" />
          <stop offset="100%" style="stop-color: #906" />
        </radialGradient>
        <radialGradient id="pad" xlink:href="#rad" spreadMethod="pad" />
        <radialGradient id="repeat" xlink:href="#rad" spreadMethod="repeat" />
        <radialGradient id="reflect" xlink:href="#rad" spreadMethod="reflect" />
      </defs>
      <rect x="10" y="10" width="100" height="100" fill="url(#pad)" />
      <rect x="10" y="120" width="100" height="100" fill="url(#repeat)" />
      <rect x="10" y="230" width="100" height="100" fill="url(#reflect)" />
复制代码

• stopelement, set the gradient point.

1. offsetproperty to specify the gradient point location. The value range is 0%-100%.
2. stop-colorAttribute, corresponding to offsetthe color of the position point.
3. stop-opacityAttribute, corresponding to offsetthe opacity of the position point.