This is the 12th day of my participation in the August More Text Challenge. For details, see:August is more challenging

This is the SVG series directory:

  • Front end will know will learn | SVG see this article is enough (a)
  • Front end will know will learn | SVG see this article is enough (2)
  • Front end will know will learn | SVG see this article is enough (3)
  • Front end will know will learn | SVG see this article is enough (4)
  • Front end will know will learn | SVG see this article is enough (5)
  • Front end will know will learn | SVG see this article is enough (6)

preface

In SVG, graphic objects are typically filled with fill and stroke. SVG can customize a graph as the padding background, which can be either an SVG element or a bitmap image. The following examples show how to use it.

pattern

The pattern tag is used to define a fill object that can be repeated, tiled, or overfilled into the specified graph. The custom fill object pattern is then referenced with its own property fill/stroke.

It needs to be placed in the defs tag, just like gradient.

Let’s start with this simple example:

<svg width="200" height="200">
    <defs>
        <pattern id="bg_red_circle" width="100%" height="100%">
            <circle cx="25" cy="25" r="20" stroke="red" fill="none" fill-opacity="0.5"/>
        </pattern>
    </defs>
    <rect width="50" height="50" x="10" y="10" stroke="blue" fill="url(#bg_red_circle)"></rect>
Copy the code

Use pattern to define a custom pattern. Place the pattern you want in the pattern tag. In this case, we put a red unfilled circle. The pattern tag is bound to an ID value that we use to reference the custom pattern on other elements for padding.

Where width and height define whether the pattern fills the applied graph, 100% (or 1) is the entire element. If it is not full, it is tiled repeatedly over the applied graph. You can also use the X and y properties if you want to offset the starting point of the rectangle when drawing

In pattern, it also has its own positioning systems and their sizes. Similar to SVG.

In the example above, our background is filled to a ratio of 1:1. Let’s look at another example:

<svg width="300" height="300">
    <defs>
        <pattern id="bg_red_circle" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"
        </pattern>
    </defs>
    <rect width="200" height="200" stroke="blue" fill="url(#bg_red_circle)"></rect>
</svg>
Copy the code

Unlike the previous example, this example sets the width and height of the custom figure (which is related to patternUnits), fills the figure with a size of 200 by 200, and tils the fill when the canvas has excess space.

This example also has a patternUnits property that defines the units of the pattern effect area. It has two values, userSpaceOnUse and objectBoundingBox. Its default value is objectBoundingBox.

  • objectBoundingBox:x,y,widthandheightThe values represented are the coordinate system of the outer box (packagepattern). In other words, the units of the pattern are scaled. For example, in pattern, is1The value of is changed to the box surrounding the elementwidthandheightThe same size. When using this value, width and height need to be less than1.0Otherwise the pattern will only appear once)
  • userSpaceOnUse:x,y,widthandheightValues are the values of the current user’s coordinate system. In other words, these values are not scaled, they are absolute values.

In the example above, the circle perfectly overlaps the entire rectangle. We can set the values of x and y and see what happens. Okay?

<svg width="300" height="300">
    <defs>
        <pattern id="bg_red_circle" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="10" stroke="red" fill="none"/>
        </pattern>
    </defs>
    <rect width="200" height="200" stroke="blue" fill="url(#bg_red_circle)"></rect>
</svg>
Copy the code

From the four sides of the rectangle, we can see that the entire graph background is offset, that is, the x and y properties are changing the position of the whole graph.

Similarly, we can apply this pattern to the stroke

<svg width="300" height="300">
    <defs>
        <pattern id="bg_red_circle" x="10" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="10" stroke="red" fill="none"/>
        </pattern>
    </defs>
    <rect width="200" height="200" fill="none" stroke-width="20" stroke="url(#bg_red_circle)"></rect>
</svg>
Copy the code

attribute instructions
x Custom patternxAxis coordinates
y Custom patternyAxis coordinates
width Custom pattern width
height Custom pattern width
preserveAspectRatio To preserve the aspect ratio of the original content
xlink:href Used of another pattern
patternUnits The unit used to define the effect area of a pattern
patternContentUnits The unit used to define the content area of the schema

The last

This article showed you how to create a pattern in SVG and then use the fill and stroke properties to refer to the drawn figure. And some related properties in the pattern, thank you for reading!

😀😀 Pay attention to me, don’t get lost! 😀 😀