Confused about SVG styling with d3.js

The most d3.js examples use SVG to draw the diagrams, etc. This means for instance rect instead of div. This then again means, that CSS properties like drop-shadow cannot be applied.

The alternative approach is to define filters in <defs>. The same is true if you want to fill the rect with a gradient color. Is that right so far?

So I define some filter and gradients, but it seems very redundant to redefine these definitions for every page again. Wouldn't it be possible to reference all these definitions from a separate svg-file?

I tried things like: filter: url(.../my_file.svg) but it does not seem to work, but isn't that how it's supposed to be?

Answers


Say you have a file called filters.svg, and it contains a few filter defitions. It looks something like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="my_filter" x="0%" y="0%" width="100%" height="100%">
    ...
  </filter>
</svg>

If you were using my_filter in that same document, you'd just refer to it using #my_filter. But you're not. You want to use it in another document. What you have to do then is refer to it in those documents as /filters.svg#my_filter. Like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="100" height="100" fill="url(/filters.svg#my_filter)" />
</svg>

This is of course assuming that both documents are accessible from the same domain, and that they're located in the right places, etc. I don't know if this will work in CSS stylesheets, but it will work across SVG documents. Check out the section on Linking in the SVG Specification for more details.


Need Your Help

Incorrect items count with specific index usage

mongodb indexing document-database

I'm using MongoDB, version 2.4.8 on windows server 2008 R2 and I have strange index behaviour which I can't explain. Here example of structure that I have in my collection:

How to verify date input into 3 separate fields?

javascript date

I have three fields for date input - day, month, year.