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
Alexander D
8,685 PointsHow to target SVG shapes in CSS
Hello there,
I am working on a personal project drawing a character, you can see the Codepen here:
https://codepen.io/DeMichieli/pen/oNvpOqG
I am working with Illustrator and exporting the file as DVG. I am able to target with CSS most elements that are made with rectangles. However, It seems I can't modify the shape of the mouth or other elliptical shapes.
As you can see, in the project with the Dev Tool you can point to basically anything. If you try to change the shape of the belt or the buckle, it works. However, I am trying to modify the shape of the mouth, but I can't seem to make it larger or smaller or anything else.
Looking at the dev tool and at the HTML markup, anything that is not "rect" can't be changed.
Any thoughts on that?
1 Answer
Alan Brown
20,524 PointsYour mouth markup doesn’t appear to have an id set.
martinjones1
Front End Web Development Techdegree Graduate 44,819 Pointsmartinjones1
Front End Web Development Techdegree Graduate 44,819 PointsYou could try playing around with CSS transforms like scale and skew to see what impact this has on the mouth and if it has the desired effect.
Outside of this it would either be a JavaScript approach to change the rx and ry attributes, or for quickly swapping in and out the different mouth shapes available, or rethinking the SVG altogether, could similar shapes be created without using an ellipse.
Lots of different ways to approach this one, looks like a fun project and definitely one you will learn a lot from :)