W3C home > Mailing lists > Public > www-svg@w3.org > September 2015

Re: SVG z-index

From: Rik Cabanier <cabanier@gmail.com>
Date: Tue, 8 Sep 2015 01:20:16 +0200
Message-ID: <CAGN7qDA9Kbdn4dkVwwZPjzsw+TR2tkkQEs6P4V-uPA4_CJqM_A@mail.gmail.com>
To: Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com>
Cc: "Curtis@HawaiianHope.org" <Curtis@hawaiianhope.org>, Gavin Kistner <phrogz@me.com>, "www-svg@w3.org" <www-svg@w3.org>
On Mon, Sep 7, 2015 at 6:02 PM, Amelia Bellamy-Royds <
amelia.bellamy.royds@gmail.com> wrote:

> Yes, there are plans for z-index in SVG.  It has been included in the SVG
> 2 specifications.
>
> https://svgwg.org/svg2-draft/render.html#ZIndexProperty
>
> Unfortunately, last time I checked none of the browsers had implemented
> support.
>

Hopefully they won't add it. SVG already has a reputation for being slow
and adding another level of layering will only make it slower.
Moreover, since stacking contexts can appear under many conditions in SVG,
authors will have a hard time using them.
z-index has also proven tricky to use and implement in HTML [1].


> Regarding Gavin's suggestion that you can replace z-index by DOM
> modifications:
>
> If all you care about is the final appearance of a static image, yes, this
> is an option.  WYSIWYG graphics editors have been using this approach for
> SVG for 15 years.
>
> However, for structured or interactive web graphics, the inability to
> separate painting order from document order is quite problematic.  Instead
> of using semantic groups (such as a shape plus its label in a chart or
> diagram) that can be moved together or respond to user events together, you
> need to sort elements into painting order groups (e.g., all the shapes in
> one group, then all the labels in another).
>

Since transforms create stacking contexts, how would you do this? Wouldn't
you have to promote the transforms to each element and then change the
transform in all the elements if you drag the group.

Also, can you show me how this scenario would be coded in HTML? (I tried to
create an example but I couldn't get it to work)


> Equally important, screen readers read an SVG document in DOM order unless
> ARIA attributes (aria-owns or aria-flowto) direct them otherwise.
> Copy&paste functionality uses DOM order regardless of ARIA.  If you want to
> overlap text for graphical effect, you can end up completely jumbling its
> meaning.  Adding sensible, structured alternative text becomes much more
> difficult.
>
> And finally, as Curtis noted, it is a hassle when converting back and
> forth from other graphics formats that do have native support for layering
> control.
>

Apart from HTML, can you give some examples of a graphics format that has
this type of layering control? (= you have a single graphics tree but parts
of the tree render out of order)

1:
http://w3cmemes.tumblr.com/post/91907824147/a-book-dedicated-to-the-z-index-property-appears
Received on Monday, 7 September 2015 23:20:44 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 8 March 2017 09:47:42 UTC