It is basically feasible to add styles to SVG elements, but you need to pay attention to their characteristics. 1. Inline SVG can be controlled by CSS through class name, label name, and ID, such as setting properties such as fill, stroke, and supports dynamic effects; 2. External SVG cannot be controlled directly with page CSS, and solutions include inline introduction, SVG internal writing style or JavaScript injection; 3. SVG has unique properties such as fill and stroke, and traditional CSS properties such as background-color are not applicable; 4. Using CSS variables can improve flexibility, facilitate unified management of colors and sizes, and suitable for theme switching and reuse styles.

Adding styles to SVG elements is actually similar to writing ordinary HTML CSS, but it also has its own characteristics. It is completely feasible to directly control SVG with CSS on the web page, but you should pay attention to some details, such as how to select elements, which attributes can be controlled, etc.

1. Inline SVG can be directly controlled with the CSS selector

If you write SVG directly in an HTML file (inline SVG), you can set the style by class name, tag name, and ID just like operating a normal DOM element. For example:

 <svg width="100"    style="max-width:90%">
  <circle class="my-circle" cx="50" cy="50" r="40" />
</svg>

Then write it in CSS:

 .my-circle {
  fill: red;
  stroke: black;
  stroke-width: 2px;
}

The advantage of this method is that it can dynamically modify the style, such as adding a hover effect or media query.

2. External SVG files cannot be directly used for external CSS

If you introduce an SVG file through the <img alt="Styling SVG elements using css" > tag, or use it as a background image, then you cannot use the CSS on the page to control the elements inside. Because at this time, SVG is loaded as a whole picture, and the content inside is "closed".
There are several solutions:

• Put SVG on the page as inline content
• Write <style> tag inside the SVG file and add styles to enter
• Dynamic style injection using JavaScript

3. Pay attention to the properties unique to SVG

SVG has its own drawing properties, such as fill , stroke , stroke-width , etc., which can be set through CSS, but some traditional CSS properties do not work for SVG. For example, you cannot use background-color to change the color of the SVG graphics, you have to use fill or stroke .

In addition, the abbreviation properties of CSS (such as border ) are not applicable to SVG. Remember: SVG's rendering mechanism is different from HTML, so the style rules are slightly different.

4. Using CSS variables can enhance flexibility

You can use CSS custom properties to define colors or sizes, which makes it easier to reuse multiple SVG elements. For example:

 :root {
  --icon-color: blue;
}

Then quote in the SVG style:

 .fill-primary {
  fill: var(--icon-color);
}

This method is especially suitable for theme switching or unified management of icon colors.

Basically that's it. Although SVG looks like an image, if handled properly on the page, you can actually control the style flexibly.

The above is the detailed content of Styling SVG elements using css. For more information, please follow other related articles on the PHP Chinese website!