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

Hello,

I faced the same problem several times and I
will appreciate some enlightenment to :)

However, to circumvent those differences in implementation, I get used to
this sort of thing :

<?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>
       <g clip-path="url(#clip)">
              <use x="100" y="100" xlink:href="#image" />
       </g>
</svg>

By adding a g element, you will get a coherent rendering across all
browsers (which would be a rendering identical to your original test with
Opera 10.6 and Chrome 15).

Regards,
-- 
Jeremie
.............................
Web : http://jeremie.patonnier.net
Twitter : @JeremiePat <http://twitter.com/JeremiePat>

2011/11/21 Rafał Miłecki <zajec5@gmail.com>

> 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've tried reading specs [1] [2], but I'm not sure about the correct
> rendering of that case. Some help in interpretation would be nice.
>
> [0] http://www.w3.org/TR/SVG/struct.html#UseElement
> [1] http://www.w3.org/TR/SVG/masking.html#ClippingPaths
> [2] http://www.w3.org/TR/SVG/coords.html#ElementsThatEstablishViewports
>
> --
> Rafał
>