Bug 150368

Summary: SVG symbols as not rendered when used as CSS backgrounds
Product: WebKit Reporter: Timothy Hatcher <timothy>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: RESOLVED WONTFIX    
Severity: Normal CC: dino, graouts, graouts, sabouhallawa, zimmermann
Priority: P2    
Version: WebKit Local Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Testcase
none
Image
none
Working test case none

Timothy Hatcher
Reported 2015-10-20 11:10:01 PDT
Created attachment 263593 [details] Testcase The attached test case does not work when a SVG symbol is references as fragment, like you can do with <use>.
Attachments
Testcase (190 bytes, text/html)
2015-10-20 11:10 PDT, Timothy Hatcher 		no flags
Details
Image (312 bytes, image/svg+xml)
2015-10-20 11:10 PDT, Timothy Hatcher 		no flags
Details
Working test case (1.84 KB, application/zip)
2015-10-20 13:45 PDT, Said Abou-Hallawa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Timothy Hatcher
Comment 1 2015-10-20 11:10:17 PDT
Created attachment 263594 [details] Image
Timothy Hatcher
Comment 2 2015-10-20 11:10:50 PDT
I was hoping to use this technique in the Web Inspector.
Said Abou-Hallawa
Comment 3 2015-10-20 13:44:42 PDT
This is not a bug. The meaning of these two URLs are different: <use xlink:href="images.svg#test"></use> div { background-image: url(images.svg#test); width: 100px; height: 100px } 1. For the SVG case, the element with the id='test' is retrieved from the images.svg and is included in the DOM tree of the SVG. Styles, transformations, filters, masks and clippers in the including SVG can be applied on this imported element. 2. For the CSS case, the "test" is a target to be used by the SVG document. The whole image has to be displayed and at the end we just scroll to the target element. There is no scrolling involved here but we set the CSS target element to element whose id is specified in the URL; have a look at SVGImage::draw() and search for scrollToFragment. This trick can used to show SVG fragments which means an SVG can have multiple images and from CSS world you can make the SVG draws different fragments if you specify different targets in the URL. For example images.svg#image1 is used to draw the element with id=image1 and images.svg#image2 used to draw the element with id=image2 etc. But since the SVG in the test case does not have displayable elements, nothing is drawn. The solution is to reference the symbol from a <use> element in the SVG and reference this <use> element from CSS instead. Also you have to hide all the elements in the SVG and show only the target element. Here is how the test case can work: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <style> .fragment { display: none } .fragment:target { display: inline } </style> <defs> <symbol id="symbol-element" viewBox="0 0 16 16"> <path d="M 2.5 1.5 L 2.5 14.5 L 13.5 14.5 L 13.5 5.5 L 9.5 1.5 L 2.5 1.5 Z" fill="none" stroke="currentColor"/> <path d="M 9.0 3.0 L 9.0 6.0 L 12.0 6.0 Z" fill="currentColor"/> </symbol> </defs> <use class="fragment" id="use-element" xlink:href="#symbol-element"/> <use class="fragment" style="color: red;" id="red-use-element" xlink:href="#symbol-element"/> <use class="fragment" style="color: green;" id="green-use-element" xlink:href="#symbol-element"/> <use class="fragment" style="color: blue;" id="blue-use-element" xlink:href="#symbol-element"/> </svg> In this SVG, different fragments are added as <use> elements. All of them are hidden and all of them reference the same symbol. Each use sets different css color which is going to affect the drawing of the <symbol>. This SVG will not show anything if it is referenced without specifying a target. If a target is specified in the URL and this target matches one of the fragments <use> element, this element will be shown. <html> <head> <style> svg { width: 100px; height: 100px; } div { display: inline-block; width: 100px; height: 100px } </style> </head> <body> <svg> <use xlink:href="images.svg#symbol-element"/> </svg> <svg> <use style="color: red;" xlink:href="images.svg#symbol-element"/> </svg> <svg> <use style="color: green;" xlink:href="images.svg#symbol-element"/> </svg> <svg> <use style="color: blue;" xlink:href="images.svg#symbol-element"/> </svg> <br> <div style="background-image: url(images.svg#use-element);"></div> <div style="background-image: url(images.svg#red-use-element);"></div> <div style="background-image: url(images.svg#green-use-element);"></div> <div style="background-image: url(images.svg#blue-use-element);"></div> </body> </html> In this HTML, the inline SVGs can reference the symbol in the images.svg. The style of the <use> elements in these inline SVGs will affect the drawing of the symbols since these symbols are imported to the DOM trees of the inline SVGs. The <div> elements should only reference the displayable fragments in images.svg and their CSS can't affect the drawing of these fragments.
Said Abou-Hallawa
Comment 4 2015-10-20 13:45:49 PDT
Created attachment 263612 [details] Working test case
Timothy Hatcher
Comment 5 2015-10-21 08:20:27 PDT
Thanks! I knew about fragments being used as targets. I just didn't think to target a <use> in the image file. It is more syntax and mildly annoying you can't reference the symbol directly from CSS. My main argument, <view> is allowed to be a bare target id ("images.svg#myView"). Why can't <symbol>? Symbols allow a viewBox attributes, so they stand well with <svg> and <view> in that regard to be targeted with a fragment. (Yeah, it would need to brought up with standards bodies to spec that in "17.3.2 SVG fragment identifiers".)
Note You need to log in before you can comment on or make changes to this bug.