[svgwg] Question about <use> inside a <clipPath> (#720)

RazrFalcon has just created a new issue for https://github.com/w3c/svgwg:

== Question about <use> inside a <clipPath> ==
- https://www.w3.org/TR/SVG11/struct.html#UseElement
- https://www.w3.org/TR/SVG11/masking.html#EstablishingANewClippingPath

According to the `clipPath` spec, it can have `use` as a child, but not groups and some other elements. But the spec doesn't specifies the details.

And from the `use` spec:

> In the generated content, the ‘use’ will be replaced by ‘g’

And the *Example Use01* shows:

```xml
  <!-- Start of generated content. Replaces 'use' -->
  <g transform="translate(20,10)">
    <rect width="60" height="10"/>
  </g>
  <!-- End of generated content -->
```

So if we have something like this:

```xml
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <circle id="circle1" cx="100" cy="100" r="70"/>
        <clipPath id="clip1">
            <use xlink:href="#circle1"/>
        </clipPath>
    </defs>
    <rect x="0" y="0" width="200" height="200" fill="green" clip-path="url(#clip1)"/>
</svg>
```

It should be translated into:

```xml
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <circle id="circle1" cx="100" cy="100" r="70"/>
        <clipPath id="clip1">
            <g>
                <circle cx="100" cy="100" r="70"/>
            </g>
        </clipPath>
    </defs>
    <rect x="0" y="0" width="200" height="200" fill="green" clip-path="url(#clip1)"/>
</svg>
```

And since `g` is not allowed we have to get an empty image. But Chrome, Firefox, Batik, Inkscape and librsvg are drawing a green circle. Is this correct?

Interestingly, if we try to reference a group, the results will change drastically.

```xml
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <g id="g1">
            <circle cx="100" cy="100" r="70"/>
        </g>
        <clipPath id="clip1">
            <use id="use1" xlink:href="#g1"/>
        </clipPath>
    </defs>
    <rect id="rect1" x="0" y="0" width="200" height="200" fill="green" clip-path="url(#clip1)"/>
</svg>
```

Now Chrome and Firefox doesn't render anything, and Batik, Inkscape and librsvg are drawing a green circle.

Please view or discuss this issue at https://github.com/w3c/svgwg/issues/720 using your GitHub account

Received on Wednesday, 7 August 2019 11:30:13 UTC