- From: Mike Bremford via GitHub <sysbot+gh@w3.org>
- Date: Thu, 12 Sep 2019 11:39:28 +0000
- To: public-css-archive@w3.org
faceless2 has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-images-4] media fragment example incorrect ==
There is a subtle error in this example: https://drafts.csswg.org/css-images-4/#example-036516b1
The "xywh" media fragment on an SVG will set (or override) the *viewBox* on the SVG root element (see below). But this does not affect the intrinsic dimensions of the image, which remain at 180x20 - as set by the SVG root element's width and height.
So the background-image will not be 20x20, unless you add:
```css
background-size: 20px 20px
```
to the example CSS. No-one supports xywh media fragments on SVG yet, but you can get exactly the same result by replacing the URL with
```css
background-image: image('sprites.svg#svgView(viewBox(40,0,20,20))')
```
I've put a demo at https://jsbin.com/nerutacenu/edit?html,output
--
Section from SVG spec that is relevant:
<blockquote>If the SVG fragment identifier addresses a space segment (e.g., MyDrawing.svg#xywh=0,0,100,100),then the initial view into the SVG document is established using the view specification attributes on the outermost svg element where the 'viewBox' is overriden by the x, y, width and height values provided by the fragment identifier.</blockquote>
See https://svgwg.org/svg2-draft/single-page.html#linking-LinksIntoSVG
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4298 using your GitHub account
Received on Thursday, 12 September 2019 11:39:29 UTC