Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ryanroehl@gmail.com

Masking - ID vs CLASS

Recommended Posts

This seems like such a simple question. But I spent the last 2 hours trying to figure this out to no avail. I even asked a coworker with some experience in SVG.

 

Why can I not change the Mask call out from "ID" to "Class"? 

 

In my example you can see that I simply copied the code from this original post (

See the Pen KzmXYK by PointC (@PointC) on CodePen

), and pasted it using classes in stead of IDs, and it breaks the mask.

 

What am I missing? This technically isn't a GreenSock question, but I am feeling a little desperate. 

 

 

Thanks for any help!

See the Pen EZyELE by ryanroehl (@ryanroehl) on CodePen

Link to comment
Share on other sites

Hmmm... great question. I couldnt find any example that used class.

 

Question: Why does have to be a class instead of an id?

  • Like 1
Link to comment
Share on other sites

HI ryanroehl@gmail.com  :)

 

As far as I know the spec doesn't allow that. Every mask is unique so it should have a unique identifier.

 

If you can describe a reason/scenario (preferably with a CodePen) for wanting to use class instead of an ID, I might be able to point you in the right direction.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

The reason that I want to use class is in regards to a unique scenario that I am in. I am a designer working with developers. I don't have a lot of coding experience so my developers gave me some guidelines to keep my code clean for the developers to have the easiest plug and play experience.

 

So, we agreed for various reasons that it would be easier if I just simply avoided using ID. 

 

If this is truly a unique scenario where I have to use IDs, I am sure thats fine. I just wanted to make sure that this would not become a reoccurring problem that I would keep running into.

 

Thanks for the response, alwaysambitious. I couldn't find any examples either.

 

And thanks for the tip, PointC. Thats basically the same answer I got from some of my developers. It seems that no one quite really understand why. But that indeed, specifically masks require the use of IDs.

  • Like 1
Link to comment
Share on other sites

And thanks for the tip, PointC. Thats basically the same answer I got from some of my developers. It seems that no one quite really understand why. But that indeed, specifically masks require the use of IDs.

Yep - I stopped asking why a long time ago. We're in the Wild West of SVGs and I just work here.  ;)

 

Good luck with your project and happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hello ryanroehl@gmail.com

 

If you do use ID's they have to be unique since the id attribute shares the same namespace as the name attribute. And most modern browsers will fail or only apply the first ID declared. In that case classes are better since they do not have to be unique like ID's. If your worried about performance, using ID's will always be faster than classes due to the way the CSS parser works.

 

BUT ...

 

If your only targeting the id then it is fast as your only selector in the CSS rule. But if you also have other selectors mixed with your id, then you will negate any speed performance. Especially if you add other selectors to the left of your CSS selector rule.

 

The CSS parser reads the full selector of the rule from right to left.

#jonny {
   /* faster since only using an id */
}

.wrapper #jonny {
   /* still fast since id is last selector in rule */
}

#jonny .box {
   /* slower since id is first and the class is last, but the class will be read first when parsed so slow */
}

So if the id is not the last selector in the rule, the id will really make no difference as far as performance or speed. So then classes will be better and plus using classes is easier and can be chained with other classes on the same element.

 

Taken form Mozilla (link is a cached version since Mozilla did not do the proper redirects to fix path to this older article)

 

https://webcache.googleusercontent.com/search?q=cache:iU0wv489pjYJ:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS+&cd=1&hl=en&ct=clnk&gl=us

  • The style system matches a rule by starting with the rightmost selector and moving to the left through the rule’s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.

Hope this helps :)

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×