Jump to content
You must now use your email address to sign in [click for more info] ×

Add an option to flip the order of the layers in the layers panel


Recommended Posts

When working with SVG files (The code) as inline SVGs - the source order is the same layers panel.

However, when visual designers are mockup up layout ideas for HTML components, the layers panel is in the opposite order as the HTML source. With HTML, the elements will be 'on top' of each other when they appear after one another in the source.

A toggle to flip this could help us with the visual-design/graphic creation and the mental model for how things will work between graphic artist and the developer who will be working with that file later.

 

CleanShot 2022-03-26 at 07.11.04@2x.png

CleanShot 2022-03-26 at 07.15.51@2x.png

Link to comment
Share on other sites

7 hours ago, GarryP said:

Can you give us an example of where this is a problem and explain a bit more about what you mean by “SVG files (The code)” and “inline SVGs”?

Ah! I have it wrong. The SVG is in the correct order but the HTML would in the incorrect order. I'll edit the request.

It's not a problem exactly - but I will explain how it would be helpful in the edited post. : )

As far as the code - I'll link to this CodePen: https://codepen.io/perpetual-education/pen/NWaWxrx?editors=1100 which shows some SVGs being used inline - (as opposed to as src in an img element) and being manipulated with CSS state and animated.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.