Loading external SVG effect in css does not work as documented

VERIFIED INVALID

Status

()

Firefox
Untriaged
VERIFIED INVALID
4 years ago
4 years ago

People

(Reporter: Jacob, Unassigned)

Tracking

30 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

4 years ago
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
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>
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → INVALID
(Reporter)

Comment 2

4 years ago
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?
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 years ago4 years ago
Resolution: --- → INVALID
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.