Re: Request for explaining/interpreting clipping for <use> element

On Mon, 21 Nov 2011 00:02:14 +0100, Rafał Miłecki <zajec5@gmail.com> wrote:

> Hello,
>
> I'm trying to use <use> element [0] in my project and I've noticed
> cross-browsers problem when using clip-path attribute for <use>.
>
> The problem is shown by the following code:
>
> <?xml version="1.0" standalone="no"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"
> xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
>  <defs>
>   <image id="image" height="200" width="200" xlink:href="image.png" />
>   <clipPath id="clip">
>    <rect x="100" y="100" width="100" height="100" />
>   </clipPath>
>  </defs>
>  <use x="100" y="100" xlink:href="#image" clip-path="url(#clip)" />
> </svg>
>
> Browsers treat coordinates used in clip path differently.
>
> 1) Firefox 7, Firefox 8, Opera 11.52, Interner Explorer 9
> That group of browsers takes coordinates of clip path as relative to
> the <use> element (which is placed at x=100 y=100). As the result clip
> path is:
> a) starting at (100, 100) in relative to <use>
> b) starting at (200, 200) in relation to <svg>
> The result is that we you can see bottom right part of the image.png.
>
> 2) Google Chrome 15 and Opera 11.60 beta
> They are treating coordinates of clip path as relative to the <svg>
> root element. The clip path is:
> a) starting at (0, 0) in relation to <use>
> b) starting at (100, 100) in relation to <svg>
> This results in visible top left part of the image.png
>
> Could you tell me, which behavior is the correct one?

I think this stems from the change we (Opera) made to make the <use>  
boundingbox include the x,y offset.

Since "clipPathUnits" on the <clipPath> defaults to "userSpaceOnUse", the  
coordinate system used is the one defined on the <use> element.

Firefox, Opera 11.5x reports:
<use> getBBox: 0 0 200 200
<use> getCTM: 1 0 0 1 100 100

Opera 11.6x, Chrome 15 reports:
<use> getBBox: 100 100 200 200
<use> getCTM: 1 0 0 1 0 0

Now, which of these makes the most sense? I would say the latter. That  
means the clipping behaves the same as on a rect element, meaning:

     <rect id="r" x="100" y="100" width="200" height="200"  
clip-path="url(#clip)" />

will clip the same area as the <use> element. If you wanted the CTM to  
change, then you would use a transform attribute, same as you would on a  
<rect>, and again, both would behave the same.


-- 
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

Received on Friday, 2 December 2011 14:53:31 UTC