SVG Pattern filling-pattern, svg Pattern-pattern

SVG Pattern filling-pattern, svg Pattern-pattern

SVG pattern is generally used for filling SVG graphics objects.fillOr strokestroke. This image can be an SVG element or a bitmap image.<pattern>Element inxAxis oryThe axis direction is tiled at a fixed interval.

<Pattern> is a pattern filling label of SVG. You can define a pattern in pattern and then fill the pattern with id reference, the width/height attribute of <pattern> is determined by the percentage of the filled image by default.

The following is an example.

    <svg width="1000" height="1000">        <defs>            <pattern id="grid" x="100" y="100" width="0.2" height="0.2" patternUnits="objextBoundingBox">                <circle cx="10" cy="10" r="5" fill="red"></circle>                <polygon points="30 10 60 50 0 50" fill="green"></polygon>            </pattern>        </defs>        <rect x="100" y="100" width="400" height="300" fill="url(#grid)" stroke="blue"></rect>    </svg>    

The effect is as follows:

Analysis Code:

In<defs>The pattern defined in the tag,<pattern>The content in the element is not displayed until it is referenced.

<Pattern> Set id to "grid". Changing the values of x and y determines the position of the pattern. The default width and height are the percentage of pattern to the filled image.
Two graphs, <circle> and <polugon>, are defined in <pattern>.

The default patternUnits value is objextBoundingBox, indicating that the pattern size occupies the size of the rect filled image.
A <rect> rectangle is defined externally and the id name is referenced in the fill of the rectangle.

When you change the width of the filling image rect to 200:

<rect x="100" y="100" width="200" height="200" fill="url(#grid)" stroke="blue"></rect>

The number of patterns has not changed. The width/height attribute of <pattern> is determined by the percentage of the filled image by default.

When patternUnits is set to userSpaceOnUse, the effect is as follows:

    <svg width="1000" height="1000">        <defs>            <pattern id="grid" x="100" y="100" width="80" height="60" patternUnits="userSpaceOnUse">                <!-- <path stroke="#f0f0f0" fill="none" d="M0,0H20V20"></path> -->                <circle cx="10" cy="10" r="5" fill="red"></circle>                <polygon points="30 10 60 50 0 50" fill="green"></polygon>            </pattern>        </defs>        <rect x="100" y="100" width="400" height="300" fill="url(#grid)" stroke="blue"></rect>    </svg>

The other two attributes of the pattern label are patternUnits and patternContentUnits. The two attributes are the same, but the default value of patternUnits is objectBoundingBox, and the default value of "occurrence" is userSpaceOnUse, such as circle and polygon in the above instance.

UserSpaceOnUse:x,y,widthAndheightThe value is the value of the current user coordinate system. That is to say, these values are absolute values without scaling. For example, in the above example, Set width and height in pattern80, 60 hours, Which is equivalent to 0.2 in width and height.

ObjectBoundingBox (default):x,y,widthAndheightThe value is the percentage of the value of the outer box (the element of the package pattern. For example, in the above example, Set width and height in pattern1 hour, Equivalent to pattern in 0.2 of the rect, the above instance is set to 20%, equivalent to of the rect.