This is the 10th 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)

preface

Back in the previous article, we learned how to use THE most powerful path in SVG to draw a graph. In previous examples, we used attributes such as stroke and fill to draw a graph, and today we will look at how these attributes are used.

fill

The fill property sets the inner color of the drawing (default is black). If you don’t want to fill the color, set the fill value to None. For example:

<rect x="10" y="10" width="50" height="50"></rect>
<rect x="70" y="10" width="50" height="50" fill="red"></rect>
<rect x="130" y="10" width="50" height="50" fill="RGB (91158) 5"></rect>
Copy the code

The fill-opacity property sets the opacity range of the fill color 0-1, for example:

<rect x="10" y="10" width="50" height="50"></rect>
<rect x="70" y="10" width="50" height="50" fill="red"></rect>
<rect x="130" y="10" width="50" height="50" fill="RGB (91158) 5" fill-opacity="0.5"></rect>
Copy the code

stroke

The stroke property sets the line element that draws the graph, for example:

<rect x="10" y="10" width="50" height="50"></rect>
<rect x="70" y="10" width="50" height="50" fill="red" stroke="blue"></rect>
<rect x="130" y="10" width="50" height="50" fill="RGB (91158) 5" stroke="RGB (165101 lancet)"></rect>
Copy the code

The stroke-opacity property sets the opacity range of the border color to 0-1, for example:

<rect x="10" y="10" width="50" height="50"></rect>
<rect x="70" y="10" width="50" height="50" fill="none" stroke="blue" stroke-opacity="0.2"></rect>
<rect x="130" y="10" width="50" height="50" fill="RGB (91158) 5" stroke="RGB (165101 lancet)"></rect>
Copy the code

The stroke-linecap attribute sets the shape of the border end point. The parameters are:

  • buttWe end the segment with a straight edge, which is the usual way, line segment boundary90Degree is perpendicular to the direction of stroke through its end point.
  • squareThe effect is similar, but slightly more than thatThe actual pathOf the range, beyond the size bystroke-widthControl.
  • roundIndicates that the end point of the border is a rounded corner, and the radius of the rounded corner is also specified bystroke-widthControl.

The stroke-linejoin property controls how two stroke-line segments are connected. The parameters are:

  • miterIs the default value for using a square brush to create sharp corners at the joint
  • roundRepresents a rounded corner connection to achieve smooth effect
  • bevel, the joint will form a miter
<polyline points="10 10 60 50 110 10" fill="none" stroke-width="Seven" stroke="red" stroke-linecap="butt"></polyline>
<polyline points="130 10 180 50 230 10" fill="none" stroke-width="Seven" stroke="red" stroke-linecap="square"></polyline>
<polyline points="250 10 300 50 350 10" fill="none" stroke-width="Seven" stroke="red" stroke-linecap="round"></polyline>
<polyline points="10 70 60 110 110 70" fill="none" stroke-width="Seven" stroke="red" stroke-linejoin="miter"></polyline>
<polyline points="130 70 180 110 230 70" fill="none" stroke-width="Seven" stroke="red" stroke-linejoin="round"></polyline>
<polyline points="250 70 300 110 350 70" fill="none" stroke-width="Seven" stroke="red" stroke-linejoin="bevel"></polyline>
Copy the code

In addition to defining attributes in the tag, you can also use CSS to fill and stroke the drawing. The syntax is the same as using CSS in HTML, with a slight difference in the property names, as shown in the table below

CSS properties The SVG attribute instructions
background-color fill Fill/background color
border stroke Stroke line color

The width, height, and path commands in the graph label cannot be set using the CSS. They need to be written in the label

Let’s look at an example using CSS:

.zrect{
    stroke: black;
     fill: red;
}
Copy the code
<rect x="10" y="10" width="50" height="50" class="zrect"></rect>
Copy the code

In this case, we write some attributes to the style and bind the class to the element. If you have multiple elements with the same attributes, then this is a great option!

The last

This article covered some of the common extended properties of basic graphics in SVG, as well as the use of CSS to style graphics.

Thanks for reading!

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