1031861 - Loading external SVG effect in css does not work as documented

Status: VERIFIED INVALID

(Firefox :: Untriaged, defect)

Description

[Jacob]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0 (Beta/Release)
Build ID: 20140605174243

Steps to reproduce:

Reference an external svg: http://plnkr.co/edit/xkINZMcoBjPbk15TAMpJ?p=preview

.gradient-text text {
  fill: url(effects.svg#gradient-text);
}


Actual results:

Firefox does not load the svg file; in dev tools, it displays the following error when hovering over the url: 'Could not load the image'. Double-clicking on the supposedly bad url opens a new tab with the svg (source text) displayed.


Expected results:

Firefox should have loaded the referenced file, according to its own documentation: https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content#Using_external_references

Comment 1

[Robert Longson [:longsonr]]

Sure it does if you get the syntax of the external SVG file right. You are missing the SVG namespace and you aren't including the stylesheet you are using so the fill-colors and opacities are not applied.

<?xml-stylesheet type="text/css" href="style.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" class="sev-defs">
    <linearGradient id="gradient-text" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%"/>
        <stop offset="68%"/>
    </linearGradient>
</svg>

Comment 2

[Jacob]

Odd, because it works without any of that when the svg and css is embedded in the html. Plunkr is broken right now, so I can't provide a non-working example it with that extra bit in (it does not work locally). Can you provide a working example?