Skip to content

Need to better define what rules apply to an element in an <svg:use> subtree. #504

@emilio

Description

@emilio

https://svgwg.org/svg2-draft/struct.html#UseStyleInheritance says:

Instead, the shadow tree maintains its own list of stylesheets, whose CSS rules are matched against elements in the shadow tree.

I don't think that's reasonable if the referenced element is in another document, since it means that base URIs should differ and such, and that itself means that the sheets should be reparsed, which is not acceptable.

Instead, what everyone seems to do is that document rules apply to the elements in the <use> shadow tree. Which is itself a bit of a hack. Indeed, everyone but Firefox don't implement selector-matching correctly, and they just seem to return the style of the referenced element.

For example, this should show green, but shows red in WebKit, Edge and Blink:

<!doctype html>
<meta charset=utf-8>
<style>
.inside-use rect {
  fill: green;
}
defs .inside-use rect {
  fill: red;
}
</style>
<p>
  You should see a green square, and no red.
</p>
<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="square">
      <g class="inside-use">
        <rect width="100" height="100"/>
      </g>
    </g>
  </defs>
  <g id="test">
    <use xlink:href="#square" />
  </g>
</svg>

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions