通过

Gradients and patterns

  • 项目

SVG provides the ability to paint or stroke shapes and text using color, gradients, or patterns. Windows Internet Explorer 9 introduced support for SVG gradients and patterns, as specified in the Gradients and Patterns module of the SVG 1.1 (Second Edition) specification.

Gradients

Gradient support is provided through the gradient elements (linearGradient and radialGradient) and attributes (gradientUnits and gradientTransform). Gradient colors are defined by the stop element. The gradient elements can be used in the fill and stroke properties of SVG shapes. For example, consider the following markup:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="10%" stop-color="yellow" />
        <stop offset="90%" stop-color="blue" />
      </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
          x="20" y="20" width="300" height="100"/>
 </svg>

This markup defines a rectangle with a linear gradient. The two stop elements specify color stops along a vector for the color transitions—a yellow one at the 10% point and a blue one at the 90% point. This appears as follows in Internet Explorer 9:

SVG yellow to blue gradient

Patterns

Pattern support is provided through the pattern element and its attributes. Like gradients, pattern elements can be used in the fill and stroke properties of SVG shapes. For example, consider the following markup.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"
        x="0" y="0" width="150" height="100">
      <circle cx="50" cy="50" r="10" fill="yellow" stroke="blue"
        />
      <rect x="100" y="0" width="50" height="50" fill="blue"   
        stroke="yellow" />
    </pattern>
  </defs>
  <ellipse fill="url(#mycircleandsquare)" stroke="black"
     stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
 </svg>

In this example, the pattern element defines a pattern that consists of an alternating small blue square and tiny yellow circle. The ellipse that is then specified is given a fill of the pattern. The following image shows how this appears in Internet Explorer 9.

Ellipse of yellow circles and blue squares

SVG