[Webkit-unassigned] [Bug 150368] SVG symbols as not rendered when used as CSS backgrounds

Tue Oct 20 13:44:42 PDT 2015

https://bugs.webkit.org/show_bug.cgi?id=150368

--- Comment #3 from Said Abou-Hallawa <sabouhallawa at apple.com> ---
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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20151020/b9e9faf7/attachment.html>