CODEWITHSUNDEEP
csssvg
Johnny G.
Johnny G.

Reputation: 525

SVG transform scale is not applied

I've included an inline svg in the html. My goal is to identify the individual stars and apply a "twinkle" effect as a keyframe. I noticed there are inline style attributes for its transform properties.

I changed the transform-origin of the individual star, #star to transform-origin: 50% 50% and added a transform: scale(1.2), just to test a simple scaling effect.

For some reason, I don't see the transform being applied when I hover over #star element. The star disappears on hover.

Heres a link to my codepen

Upvotes: 2

Views: 978

Answers (1)

Joe B.
Joe B.

Reputation: 1174

Apply the transform:scale() to #star:hover polygon this should change the size of the polygons within the group.

#star:hover polygon{
 transform: scale(1.2)
}

CODEPEN

Upvotes: 2

Related Questions