SVG Properties in CSS Guide

This guide explores the intersection of CSS and Scalable Vector Graphics (SVG), focusing on styling SVG elements using CSS properties. While numerous SVG attributes exist, only certain ones—primarily presentation attributes—can be directly styled with CSS. Some CSS properties are shared with SVG (like font-size and opacity), while others are SVG-specific.

For instance, to color an element red, the fill property works in CSS because fill is a presentation attribute:

circle {
  fill: red;
}

This guide comprehensively details available SVG elements and their corresponding CSS properties, covering various styling techniques including general styles and animations.

SVG Elements and CSS Properties: A Categorized Overview

The following outlines presentation attributes usable as CSS properties, categorized for clarity. Deprecated elements are excluded.

CSS and SVG Shared Properties

Font Properties

Text Properties

Masking Properties

Interactivity Properties

Color Properties

Visibility Properties

SVG-Specific CSS Properties

Text Properties

Clip Properties

Masking Properties

Filter Effects

Gradient Properties

Interactivity Properties

Color Properties

Painting Properties

SVG 2 and CSS Styling

While presentation attributes bridge the gap between CSS and SVG styling, SVG 2 (currently in Candidate Recommendation) significantly enhances this interaction, allowing control over element coordinates and dimensions using CSS.

The SVG 2 specification clarifies:

"Some styling properties can be specified not only in style sheets and ‘style‘ attributes, but also in presentation attributes. These are attributes whose name matches (or is similar to) a given CSS property and whose value is parsed as a value of that property.”

This means CSS, including pseudo-classes like :hover and :active, can style SVG properties through presentation attributes or stylesheets. SVG 2 also introduces additional presentation attributes for styling. Refer to the SVG 2 specification for a complete list.

Element-Specific Property Support

It's crucial to remember that CSS property support varies across SVG elements. Certain properties are element-specific. For example, <circle></circle> and <ellipse></ellipse> support cx, cy, rx, and ry, but other elements might not.

Geometry Properties

SVG 2 defines properties like rx and ry as geometry properties, stylable with CSS alongside presentation attributes like fill or stroke.

Positioning SVG Elements with CSS (SVG 2)

SVG 2 allows CSS-based positioning. Consider a rectangle:

<svg height="170" width="170"><rect height="150" width="150" x="10" y="10"></rect></svg>

With SVG 2, the x and y attributes can be controlled via CSS:

/* Works with SVG 2 */
rect {
  x: 10;
  y: 10;
  /* ...other styles... */
}

Simplifying the SVG markup to:

<svg height="170" width="170"><rect height="150" width="150"></rect></svg>

Similarly, width and height can be set using CSS, further minimizing the SVG code.

Currently, Blink (Chrome, Opera) and WebKit (Safari) browsers offer better support for these SVG 2 features. For broader compatibility, alternative techniques are necessary.

SVG Shape Morphing with CSS

CSS can be used to create shape morphing effects. The SVG paths involved must have identical commands and the same number of points for successful morphing.

Example: Morphing a triangle into a square.

<svg height="220" width="300"><path d="M150 10 L40 200 L260 200Z"></path></svg>

CSS to override the path:

path {
  d: path("M150, 10 L40, 200 L260, 200Z"); /* Initial shape */
  fill: #4c6edb;
}

path:active {
  d: path("M10,10 L160,10 L160,160 L10,160 Z"); /* Morphed shape */
  fill: #4c6edb;
  transition: all 0.35s ease;
}

The SVG markup simplifies to:

<svg height="220" width="300"><path></path></svg>

Animating SVG Properties with CSS

CSS animations and transitions animate SVG properties. This example demonstrates a wave animation with five circles:

<svg height="250" width="350"><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle></svg>

CSS with variables and :nth-child() for styling and animation:

/* ... CSS for colors and initial circle styles ... */

.shape {
  /* ... initial styles ... */
  animation: moveCircle 1250ms ease-in-out both infinite;
}

/* ... animation-delay for each circle ... */

@keyframes moveCircle {
  50% {
    cy: 150;
    r: 13;
  }
}

Animations within <pattern></pattern> elements are also possible.

Conclusion

While SVG 2 offers powerful CSS styling capabilities, widespread browser support is still developing. For production use, consider compatibility carefully. As SVG 2 matures, CSS styling of SVG geometry properties will become increasingly robust and reliable.

The above is the detailed content of SVG Properties in CSS Guide. For more information, please follow other related articles on the PHP Chinese website!