Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
franklylate

Scale element but retain stroke-width

Recommended Posts

Hi all, bit of a conundrum:

 

I have a rudimentary globe and looking to animate a simple spin. I've decided on using scaleX and transformOrigin: "100% 50%" to just scale over to -1 and it works 'perfectly'. Unfortunately scaleX also scales the stroke—I tested vector-effect="non-scaling-stroke" but unfortunately it removes the proportion / resizing attributes that I'm relying on to keep the SVG working as intended in IE11.

 

Besides switching to stroke-width: 3.5vw and media queries or some variation, any simple solutions?

See the Pen OJyrPwm by jcollette (@jcollette) on CodePen

Link to post
Share on other sites

vector-effect="non-scaling-stroke" or using units like vw which aren't related to the SVG's size are the only way of doing this to my knowledge.

  • Like 1
Link to post
Share on other sites
14 minutes ago, franklylate said:

Besides switching to stroke-width: 3.5vw and media queries or some variation, any simple solutions?

 

Don't worry about IE.

 

Or don't use strokes. Canvas can do what you want.

Link to post
Share on other sites
3 hours ago, OSUblake said:

 

Don't worry about IE.

 

Or don't use strokes. Canvas can do what you want.

 

Unfortunately my user base is still 10% IE11. Canvas isn't an option since I'm exporting an SVG from Illustrator and would prefer to not recreate in JS.  Can you tell me more about not using strokes? Not certain what that entails.

 

Thanks!

Link to post
Share on other sites
3 hours ago, franklylate said:

Unfortunately my user base is still 10% IE11.

 

That's unusually high. You need to get better users. 😉

 

3 hours ago, franklylate said:

Canvas isn't an option since I'm exporting an SVG from Illustrator and would prefer to not recreate in JS.  Can you tell me more about not using strokes? Not certain what that entails.

 

I was trying to nudge you to canvas. In canvas, you would just draw each arc with the same line width, but with a variable radius based on the size of the container.

 

Here's a naive approach. This assumes there is no other scaling being applied to the element. I'm manually setting the stroke width on the top arc. The bottom arc has a non-scaling-stroke.

 

See the Pen fc06e44a73675195758bf95fda2aafbd by osublake (@osublake) on CodePen

 

 

 

Also, I'd recommend switching to v3 and the new syntax.

 

 

 

  • Like 3
Link to post
Share on other sites
16 hours ago, OSUblake said:

You need to get better users. 😉

🤣

 

I always send this video to IE users.

 

  • Haha 1
Link to post
Share on other sites
40 minutes ago, PointC said:

I always send this video to IE users.

 

So true!

 

In other news, I just downloaded the new Edge, and I love it. It's exactly like Chrome, but with smooth scrolling and a couple other features.  Can't wait for MS to push that out to all the legacy IE/Edge users.

 

  • Like 2
Link to post
Share on other sites
3 hours ago, OSUblake said:

but with smooth scrolling

Smooth scrolling in Edge? Cool. I'll miss the clunky jerky scrolling of the past.

 

Is this new version pushing out with a Win10 update or do you have to go find it?

Link to post
Share on other sites
1 hour ago, PointC said:

Smooth scrolling in Edge? Cool. I'll miss the clunky jerky scrolling of the past.

 

I've always had smooth scrolling in IE, Edge, and FF. I know it's a setting in IE. Not sure about the other browsers.

 

image.png.32b8970a3c89ffd9c2674927e747b6d1.png

 

1 hour ago, PointC said:

Is this new version pushing out with a Win10 update or do you have to go find it?

 

It's supposed to be pushed automatically in a couple months, but you can get it now.

https://www.microsoft.com/en-us/edge

 

But I followed Option 1 here so that it doesn't get rid of the old Edge. Still might need for testing purposes for the next year or so.

https://www.tenforums.com/tutorials/144061-enable-microsoft-edge-side-side-browser-experience-windows-10-a.html

 

  • Like 1
Link to post
Share on other sites
14 minutes ago, OSUblake said:

But I followed Option 1 here so that it doesn't get rid of the old Edge. Still might need for testing purposes for the next year or so.

Cool. I'll give it a whirl. 👍

Link to post
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.

×