Reference filters from different svg file

Question

How do you reference filters which are defined in a different file? For instance there is a filter.svg in the folder assets which has:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
</svg>

Now in another file I draw some shapes in another svg element. How do I apply this gradient filter? Simply: fill="url(assets/filter.svg#gradient)"? Because it looks like it is not picking up the definition.

Answer 1

As indicated in the comments, Chrome (still!) does not support referencing filters, fills, strokes, clip-paths, masks or markers defined in external files, as at Chrome v45.

See this bug report which seems to be tracking this issue.

There also seem to be webkit bugs on this, so although I have not tested it myself, I would assume that other webkit based browsers may also have this limitation.