Please have a look at this Pen:
http://codepen.io/troywarr/pen/VYmbaa
What I'm doing here is:
- defining an SVG symbol (
<symbol>
) - defining an SVG linear gradient (
<linearGradient>
) - using the
<use>
element to reference the SVG symbol I've created - in the CSS, defining two classes:
external
, which references the linear gradient defined in this external.svg
file (right click and view source)internal
, which references the linear gradient defined in the local HTML (which is, I believe, effectively identical to the one in the external file)
Because I've applied the internal
class to the <svg>
element at the bottom of the HTML example, the gradient is applied, rendering a blue gradient checkmark. That's what I'm after.
But, if you switch the internal
class to external
in the HTML example, the checkmark is no longer visible:
http://codepen.io/troywarr/pen/vEymKX
When I watch Chrome Inspector's "Network" tab, I don't see the browser trying to load the SVG file at all. Is there a problem with my syntax, or is something else going on here?
It at least looks like I'm doing this right, based on a few references I've found:
- http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
- http://www.w3.org/TR/SVG/linking.html#IRIReference
- https://stackoverflow.com/a/7118142/167911
But, nothing I've tried so far has allowed me to reference a linear gradient defined in an external .svg
file.
Thanks for any help!