- From: Erik Dahlstrom <ed@opera.com>
- Date: Fri, 02 Dec 2011 15:52:51 +0100
- To: www-svg@w3.org, Rafał Miłecki <zajec5@gmail.com>
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