Re: display different elements in transparent areas based on z-index values

Thanks for your response.  As an example, imagine that you need to add a logo to your website.  Since the background of the page might be changed or redesigned frequently you only want to include the text in the image and then specify transparent areas where the background can bleed through.  If you embed the svg image directly in the body tag then the body's background color or background image will always show through your svg image's transparent areas.  However if you embed the image in another element, let's say a div element, then only the div's background color will show through the transparent areas.  It would be great if you could specify the element which should appear in the svg image's transparent areas.  I originally suggested assigning a z-index to each transparent area, but a better solution might be to simply specify the id of the element that you want to appear in the transparent area.  If the svg image is embedded in a div within the
 body and you wanted to show the body's background color through a transparent area then you would simply assign an id to the body and then include that id in an attribute on one of the svg elements.

Example:
<body id="mainbody">
  <div>
    <svg:svg>
      <svg:circle cx="200" cy="150" r="7" fill="#0000ff" fill-opacity="0.5" transparency="mainbody"/>
    </svg:svg>
  </div>
</body>

In the example above a transparency attribute has been set on the svg:circle element that specifies the id of the body element.  If the element containing the id 'mainbody' is found to be positioned directly behind the svg:circle then that element will appear in the transparent area of the image.  If the element is not directly behind the svg:circle then the transparent area of the image will simply display it's parentNode.

The main purpose of this feature would be to incorporate existing elements and content into the svg image.  Currently it's only possible to incorporate the element directly behind the svg image into it's transparent areas.  But imagine how many possibilities there would be if you could integrate multiple elements on the page into the same svg image via transparency.  I've drawn a basic example at the link below.

http://img502.imageshack.us/img502/2120/logosew.png

On a separate topic, is it possible to send attachments through this mailing list?  Most mailing lists return a delivery error if the message contains an attachment so I haven't even attempted it yet with this mailing list.  I have an html example that contains an embedded svg image that I've tested in Firefox.  If attachments are supported then I'll send it in the next message.




> 

> Currently, SVG does not have any z-index properties (though we are considering 
> something similar for use with pseudo-3D transforms). Therefore, we don't have 
> any such functionality as you describe.
> 
> I don't immediately see any application for such a feature, but I may be 
> overlooking something... can you give us some examples where this might be 
> useful?  Note that SVG does allow you to change opacity and provide clipping 
> paths or masks in a shape, so you might be able to use some combination of those 
> features along with scripting and 'display:none' to get the desired effect, 
> without having to have a special feature in the language for it.  As a rule, 
> specifications try to cover the most general use cases.
> 
> Regards-
> -Doug Schepers
> W3C Team Contact, SVG and WebApps WGs

Received on Monday, 9 March 2009 22:58:05 UTC