Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Transitions and Transforms Transitions and Transforms

tina duyen tran
tina duyen tran
5,740 Points
Posted by tina duyen tran
tina duyen tran
5,740 Points

How do i select properties within a class for SVGs to style it using CSS?

I have the following HTML:

<!DOCTYPE html> <html> <head> <title>Animating SVG with CSS</title> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="style.css"> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="60 60 240 240"> <g> <circle class="star-bg" fill="#40adcf" stroke="#fff" stroke-width="6" cx="180" cy="180" r="108.3"/> <path class="star" fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z"/> </g> </svg> </body> </html>

And I am asked to do the following: "In style.css, create a new rule that targets .star-bg. Add a 1s transition for the fill property."

What would be the correct code for this?

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Animating SVG with CSS</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="60 60 240 240">
        <circle class="star-bg" fill="#40adcf" stroke="#fff" stroke-width="6" cx="180" cy="180" r="108.3"/>
        <path class="star" fill="#fff" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M180 107.8l16.9 52.1h54.8l-44.3 32.2 16.9 52.1-44.3-32.2-44.3 32.2 16.9-52.1-44.3-32.2h54.8z"/>
  </svg>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */

2 Answers

Giscard Boulou
Giscard Boulou
4,575 Points
Giscard Boulou
Giscard Boulou
4,575 Points

You will need a starting value and an ending value for the transition to take effect. And you cannot state the starting value in the HTML, I think. It will only work if you state the initial value in the CSS. But to answer your question, the rule should look like this.

.star-bg { transition: fill 1s; }

tina duyen tran
tina duyen tran
5,740 Points
tina duyen tran
tina duyen tran
5,740 Points

Thank you! II had the .star-bg {transition: .1s ease-out;) but couldn't figure out where to target the fill property and your answer helped!