Re: Percentage on objectBoundingBox

On Thu, Jan 23, 2014 at 9:47 AM, Erik Dahlström <ed@opera.com> wrote:

> From http://www.w3.org/TR/SVG11/coords.html#ObjectBoundingBoxUnits:
>
> [ Snip ]

In 2008 roc wrote that authors then expected the percentages in this
> particular case to be relative to the OBB, not to the viewport:
> http://lists.w3.org/Archives/Public/www-svg/2008May/0048.html


This is the only interpretation that makes any sense at all sense to me,
from an authoring perspective (I haven't thought about how it would be
implemented).


> So, it looks like ISSUE-2013 has been rediscovered, and I assume your
> investigation means you want to take over ACTION-2077.
>
>
>
> On Thu, 23 Jan 2014 13:52:58 +0100, Dirk Schulze <dschulze@adobe.com>
> wrote:
>
>  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>
>>>
>>
>>
>>
>
> --
> Erik Dahlstrom, Web Technology Developer, Opera Software
> Co-Chair, W3C SVG Working Group
>
>