Jump to content
Search Community

SVG: position mask relative

ViolettaDigitalCraft test
Moderator Tag

Recommended Posts

Hi all!

 

I have problems with the relative positioning of the mask path. First I had a "circle" object, but I had problems with the animation in Safari, so I switched to a path object. Now I have problems with the positioning.

 

I want the red circle to always be on the right center of the parent element. Since the browser window is always different in size (responsive), the whole must be relative. At the moment it is not positioned at all.

 

The code example is reduced. I also want to move the position at certain breakpoints. For example with smaller viewports, instead of right center, bottom center.

 

Do you know possible solutions to this problem? :-).

If something is unclear, please ask.

See the Pen ZEEjrzb by alsodenn (@alsodenn) on CodePen

Link to comment
Share on other sites

Hey Violetta and welcome to the GreenSock forums.

 

With this sort of use case, you might want to use a clip-path rather than a mask. See this article for more info on why.

 

There are several ways to do this sort of effect. The first is to not use SVG/CSS at all and just use CSS clip paths:

See the Pen KKKBRMG?editors=1000 by GreenSock (@GreenSock) on CodePen

 

Another option would be to position the circle with GSAP/JS on resize:

See the Pen MWWBGOd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You could also move the HTML outside of the foreignObject (duplicating it using .cloneNode(true) in JS) and then apply the SVG mask/clip path to that content.

 

I'm not sure which method is the best supported across different browsers. The best way may depend on who your clients are. You can check support for this sort of thing.

 

  • Like 3
Link to comment
Share on other sites

14 hours ago, ViolettaDigitalCraft said:

Thank you very much for the great examples. clip-path is out of the question for my projects because of the browser support. I will take a closer look at your example and adjust it to my needs. Thank you!

 

Just use an SVG clip-path or mask. The support is near 100% and that's how CSS clip-path/mask work under the hood.

  • Like 1
Link to comment
Share on other sites

12 minutes ago, ViolettaDigitalCraft said:

Why? It works with FF, Chrome, Safari and IE Edge. I use now SVG mask.

 

It's just very problematic. It can create rendering artifacts during animations. And if you transform anything inside the foreign object, it will mess up the positioning.

 

If all you're doing is a circle, then using a div with a border-radius of 50%, and overflow set to hidden might be the easiest solution.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
On 11/13/2019 at 8:09 AM, OSUblake said:

 

It works the same way as a clip-path or mask.

 

Move your mouse over the text.

 

 

 

 

Hi, does anyone know how I can make the mask be center of the cursor on load? At the moment it snaps to the cursor as soon as you move it. I was also thinking if there was a way to delay the movement? like it follows the cursor? Maybe that will combat the jump

Link to comment
Share on other sites

51 minutes ago, TrulyNewbie said:

Hi, does anyone know how I can make the mask be center of the cursor on load?

 

Sorry, but there is no way to get the cursor position until it has moved.

 

You could have it hidden, and then move it to the center on the first move or animate it. 

 

container.addEventListener("mousemove", onFirstMove);

function onFirstMove() {
  container.removeEventListener("mousemove", onFirstMove);
  
  // make visible and set position
}

 

Also note that that demos are using the older syntax.

 

  • Like 2
Link to comment
Share on other sites

 

"The browser doesn't know where the mouse is until it moves.

It's more complicated than just "get me the cursor position". What if there is no mouse (tablet) or what if the mouse is not over the browser window?

For the same reason, you can't get hover events on an item if the cursor is already hovering when the page loads. It takes a mouse movement for those events to fire.

Go to some site, hover over a link that has a hover effect (like underline), refresh the page (without moving your cursor) and you'll see that even though your cursor is hovering over the link, it doesn't get the hover treatment until you move the cursor.

Unfortunately this is a browser-level issue, not a javascript issue."

See stackoverflow

 

 

  • Like 2
Link to comment
Share on other sites

10 minutes ago, mikel said:

It's more complicated than just "get me the cursor position". What if there is no mouse (tablet) or what if the mouse is not over the browser window?

 

Another excellent point, which is why I would suggest having it hidden until there has been a "first" mouse movement.

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

image.png

I would be very grateful if you could help get this animation when hovering the cursor changes text and color as well as text as if inside a circle. I've been looking for a very long time for a solution but couldn't find one. Thank you very much in advance!

image.png

Link to comment
Share on other sites

@Display Name 

Please don't expect people to do all the work for you. You've already been asked gently to stop rephrasing and reposting the same question. I'm going to repeat that again. Please stop rephrasing and reposting the same question.

Asking the same question multiple times will not provide a different result. If you read the information provided you will have everything you need to achieve your goal. If you try and get stuck we are happy to help. 

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.
×
×
  • Create New...