SVG & CSS spec and inheritance questions

Folks, could you please help out with the SVG/CSS questions below?

If more clarification is needed in the SVG-in-OT spec we have a window of opportunity right now. However, at least some of the questions have to do with the SVG & CSS specs themselves.

—

If the glyph ID is specified on an SVG element other than the root element (for example a <g id=”glyph6”/>), we can’t find any statements within the spec that make it clear whether we should inherit CSS attributes from above, or whether parent transformations / viewports apply to the element. Here’s a more detailed example:

<?xml version="1.0"?>
<svg viewBox="0 0 100 100" version="1.1"
     xmlns="http://www.w3.org/2000/svg<https://na01.safelinks.protection.outlook.com/?url=http%3a%2f%2fwww.w3.org%2f2000%2fsvg&data=01%7c01%7cMiles.Cohen%40microsoft.com%7c3e01a84387f745c7ea4b08d344871959%7c72f988bf86f141af91ab2d7cd011db47%7c1&sdata=S9Ui6cHKm%2f2RkLKpPk5FvDN2eMGClNQZ4UR35OEeD1c%3d>" xmlns:xlink="http://www.w3.org/1999/xlink<https://na01.safelinks.protection.outlook.com/?url=http%3a%2f%2fwww.w3.org%2f1999%2fxlink&data=01%7c01%7cMiles.Cohen%40microsoft.com%7c3e01a84387f745c7ea4b08d344871959%7c72f988bf86f141af91ab2d7cd011db47%7c1&sdata=7RxHsNCnxKxIGeMMdOZUPaAuRiAep1uETyODIcvI4Yc%3d>">
  <svg viewBox="0 0 50 50">
      <g fill="blue" transform="rotate(45)">
          <rect id="glyph6" width="60" height="10"/>
      </g>
  </svg>
</svg>

Questions in this case:

1.       Should the rect be blue (coming from the g element?) or should it be black (default CSS fill property)

2.       Should the rect be rotated (by the g element)?

3.       Should the rect be placed within the viewBox of “0 0 100 100” from the outer SVG, or the “0 0 50 50” viewBox of the inner SVG?

4.       Should the inner SVG clip the rect?

We’ve been playing with Firefox’s implementation to see what they did here. So far, it looks like Firefox has the following results:

1.       Blue

2.       Not rotated

3.       Outer SVG viewBox is used

4.       No clipping from inner CSS


Perhaps the rule is that CSS properties inherit, and non-CSS properties on ancestors don’t do anything. This is different than if the element were referenced by a <use> tag, in which case none of the ancestors have any relevance.

Do you have any guidance on these spec issues? Perhaps more clarification could be added to the spec here.

Received on Friday, 18 March 2016 22:00:56 UTC