SVG basics | SVG and CSS Cascading Style Sheets-

We can use CSS to add styles for SVG images. Adding styles to SVG images is to change their appearance. You can modify the stroke color and width, fill color, transparency, and so on .,.

We can use CSS to add styles for SVG images. Adding styles to SVG images is to change their appearance. You can modify the stroke color and width, fill color, transparency, and so on.

We can add styles for SVG images in six ways. We will introduce these six methods in this article. At the end of this article, we will show all CSS attributes that can be used on SVG.

The CSS attributes that can be used by SVG images are slightly different from those that can be used by HTML elements, but most of the attributes are the same.

　　Use attributes to add CSS styles

We can use some attributes to add styles for SVG graphics, such as stroke and fill attributes. The following is an example:

A series of style attributes can be used, but we recommend that you use an inline style sheet or an external style sheet to add styles for SVG images.

　Use STYLE attributes

This method does not use attributes to add styles, but uses the style attribute to specify the required CSS styles. If you need to embed styles directly in SVG images, this method can meet your needs. The CSS attributes here are the same as those in the inline-level external CSS style sheet. You can copy them directly.

The following is an example of using the style attribute:

　　Use inline Style Sheets

You can use an inline style sheet to add styles for SVG images. See the following example:

This way of working with Inline style sheets is exactly the same as using inline style sheets on HTML elements.

Inline style sheets can work properly on IE7 and Firefox 3.0.5 browsers.

　　CLASS Style

You can also add a class for each graph. Use this class to select the corresponding graph in the style sheet as the selector.

The following is an example with two circles in red and green. Set different classes for them respectively, and use the class in the style sheet to select the image settings style.

　　Use external style sheets

When you use an external style sheet, the style sheet is a separate file, which is the same as the CSS external style sheet. You need to use the following syntax to introduce an external style sheet.

Check the svg-stylesheet.css file on the local code handler.

The following is an example of using an external style sheet. The declaration of an external style sheet is placed in an SVG file.

　　Use STYLE labels on HTML pages

If you embed an SVG file into an HTML page, you can use the style label in the HTML page to set a style for the SVG image. For example:

To set a style for an SVG image, you only need to add the CSS attribute to the style label. This is exactly the same as setting styles for DOM elements on the HTML page. The following is an example:

If you embed SVG directly into an HTML page, this method is the simplest and most straightforward way to add styles for SVG images.

　Style priority

If you set an inline or external style table for an SVG file and a local style inside the SVG file, if these styles conflict, the local style overwrites the style in the inline or external style sheet.

　CSS style attributes of SVG

The following are some CSS attributes that you can set on SVG. Not all elements can use these attributes. The classification has been completed below.

　　CSS attributes of the image

Below is

CSS attributes	Description
Fill	Set the fill color of the image.
Fill-opacity	Sets the transparency of the fill color of the image.
Fill-rule	Set filling rules for images
Marker	Set the marker used by the straight line (edge) on the graph.
Marker-start	Set the start marker for this graph along the straight line (edge)
Marker-mid	Sets the middle marker used by the straight line (edge) on the graph.
Marker-end	Set the End marker for this graph along the straight line (edge)
Stroke	Set stroke color of the image
Stroke-dasharray	Set to use dotted lines to draw edges on the Image
Stroke-dashoffset	Set the Offset Value of the graph stroke dotted line
Stroke-linecap	Set the type of the stroke line header. Options include round, butt, and square.
Stroke-miterlimit	Set the oblique limit of Stroke
Stroke-opacity	Set the transparency of rice.
Stroke-width	Set stroke width
Text-rendering	Set the text-rendering attribute of the stroke

CSS attributes of Text

CSS attributes	Description
Alignment-baseline	Set text alignment in x and y coordinate systems
Baseline-shift	Set text baseline offset
Dominant-baseline	Set the dominant baseline of Text
Glyph-orientation-horizontal	Set horizontal font Orientation
Glyph-orientation-vertical	Set vertical font Orientation
Kerning	Set text padding

　Gradient CSS attributes

CSS attributes	Description
Stop-color	Set the stop color of the stop element in the gradient.
Stop-opacity	Sets the stop transparency of the stop element in the gradient.

The above is the basis of SVG | content of the SVG and CSS Cascading Style Sheets. For more information, see PHP Chinese Network (www.php1.cn )!