Re: Percentage on objectBoundingBox

Hi,

I had an action to check the behavior of percentage values on objectBoundingBox.

More specific: An element is a descendant of a <mask>, <clipPath> or <pattern>. The <mask>, <clipPath> or <pattern> have the attribute maskContentUnits, clipPathUnits or patternContentUnits set to “objectBoundingBox”. How are percentage on the element resolved.

Introduction
=========

Just as ramp up, for objectBoundingBox, the reference box is assumed to have 1 unit width and 1 unit height. The resulting clipPath, mask or pattern is then scaled to the object bounding box of the referencing element.

Example:

<svg width=“600” height=“600">
<clipPath clipPathUnits=“objectBoundingBox” id=“clip">
    <ellipse cx=“0.5” cy=“0.5” rx=“0.5” ry=“0.5"/>
</clipPath>

<rect width=“150” height=“300” clip-path=“url(#clip)”/>
</svg>

The result will be an ellipse similar to <ellipse cx=“75” cy=“150” rx=“75” ry=“150”/>.

Now I want to use percentage for the clipping path. Which value would I need to chose to get the same result? According to the spec (at least it seems), percentage should be relative to the viewport (independent of the clipPathUnits value).

The viewport has a width and height of 600 units. The resulting clipping ellipse should look like this:

<ellipse cx=“12.5%” cy=“25%” rx=“12.5%” ry=“25%”/>

12.5% = 75 * 1 / 600 (width of viewport)
25% = 150 * 1 / 600 (height of viewport)

Note: If the ellipse in the clipPath would be a circle, we would run into a problem, since the aspect ratio between the rect (1:2) is not corresponding to the one of the svg (1:1) and we have a circle where we just can specify one radius.

Implementations
============

* Illustrator sometimes follows the spec but not for the example above.
* All browsers + Batik
Browsers are interoperable but do not follow the spec. In fact, for all browsers the following values create the same result as in the initial example:

<ellipse cx=“0.08333%” cy=“0.08333%” rx=“0.08333%” ry=“0.08333%”/>

At the beginning, browsers follow the spec:

12.5% = 75 * 1 / 600 (width of viewport)
25% = 150 * 1 / 600 (height of viewport)

But since the values are relative to the object bounding box, the results are scaled to the boundaries of the referencing element.

0.08333% = 75 * 1 / 600 (width of viewport) * 1 / 150 (width of <rect>)
0.08333% = 150 * 1 / 600 (height of viewport) * 1 / 300 (height of <rect>)

* Inkscape didn’t accept any of the values. The whole content was clipped away for all percentage examples.

Conclusion
========

* None of the UAs follow the specification as the SVG WG interpreted the spec in the last call.
* Especially authoring tools expect something different than UAs display.

Even if browsers are interoperable, I do not believe that the way percentages are handled is particularly useful for authors.
Since no UA follows the spec, it wouldn’t harm to change the spec.
Since (IMO), the behavior of browsers isn’t great, the WG can come up with a better solution for resolving percentage values. A suggestion is to follow the CSS specification and resolve percentage to a reference box. I suggest that the reference box for userSpaceOnUse will be the viewport (as it is today). The reference box for objectBoundingBox will be the object bounding box of the referencing element. This would also harmonize the usage of percentage on the content with the usage on the x, y, width and height attributes of <mask>, <pattern> and <filter>.

Greetings,
Dirk


On Jan 3, 2014, at 8:53 PM, Dirk Schulze <dschulze@adobe.com> wrote:

> Hi,
> 
> I checked the behavior of objectBoundingBox on content with percentage values:
> 
> <clipPath clipPathUnits="objectBoundingBox" id="clip1">
> <circle cx="0.5" cy="0.5" r="0.5"/>
> </clipPath>
> <clipPath clipPathUnits="objectBoundingBox" id="clip2">
> <circle cx="50%" cy="50%" r="50%"/>
> </clipPath>
> 
>> From the section “Object bounding box units” in SVG 1.1 [1] I would assume that both clipping paths do exactly the same. And yet, all SVG viewers seem to hide content completely clipped with the second clipping path. 
> 
> “”
> If percentages are used within the content of a ‘pattern’, ‘clipPath’, ‘mask’ or ‘filter’ element, these values are treated according to the processing rules for percentages as defined in Units.
> “”
> 
> The section about Units[2] say that percentage are resolved to the nearest viewport.
> 
> “”
> The three rectangles on the right demonstrate the use of percentages. Note that the width and height of the viewport in the user coordinate system for the viewport element (in this case, the outermost svg element) are 4000 and 2000, respectively, because processing the ‘viewBox’ attribute results in a transformed user coordinate system
> “”
> 
> Of course it depends if <pattern>, <mask>, <clipPath> and so on create a new viewport. I am not sure if that is ever explicitly said. Especially for userSpaceOnUse we take the nearest viewport of the affected element. Even though, what does it mean for the example above?
> 
> Greetings,
> Dirk
> 
> [1] http://www.w3.org/TR/SVG11/coords.html#ObjectBoundingBox
> [2] http://www.w3.org/TR/SVG11/coords.html#Units
> <clip-path.svg>

Received on Thursday, 23 January 2014 12:53:29 UTC