0

Below code works on home page where "page URL" == "base URL"

but fails on any other page

<svg>
  <filter id="blur">
    <feGaussianBlur stdDeviation="5"></feGaussianBlur>
  </filter>

  <image id="svg-image" xmlns:href="http://x.com/image.jpg"       
         filter="url(#blur)">
  </image>
</svg>

Is there a way to reference "only the filter" from an external svg file ?

eg:

1.External file @(http://localhost/somewhere/external.svg)

<svg>
  <filter id="blur">
    <feGaussianBlur stdDeviation="5"></feGaussianBlur>
  </filter>
</svg>

2.HTML document @(http://localhost/elsewhere)

<svg>
  <image id="svg-image" xmlns:href="http://x.com/image.jpg"       
         filter="url(/somewhere/external.svg#blur)">
  </image>
</svg>
6
  • In reference to the title, probably best not to do that. Sep 26, 2015 at 3:05
  • @RobertLongson my dilemma is that SVG is used at only one place(but necessary) and BASE is used site-wide. So I just wanted to have a work-around if possible ? Sep 26, 2015 at 3:08
  • Stop using base or stop using filters (or clip-paths or markers or masks) or stop using Chrome (or IE or Safari or Opera). Sep 26, 2015 at 3:10
  • @RobertLongson very nice of you, thanks ! Sep 26, 2015 at 3:18
  • Your other alternative is to move all SVG into a single standalone file and then embed it via <object> or <iframe> tags so that the <base> tag is in a different document and will then not affect the SVG. Sep 26, 2015 at 8:11

2 Answers 2

0

Using a filename in your url() like that should work. Especially if you are referencing the current file. That will fix your problem with <base>.

However not all browsers support pointing to another file (yet).

Incidentally, your xmlns:xlink attribute is wrong. That should be xlink:hef="".

3
  • actually it was xmlns:href="" originally , i mixed it up with w3 reference link while removing to make it look smaller. Sep 26, 2015 at 2:44
  • no it's not working. i have mod_rewrite on (problem?) but it doen't even work with absolute reference. Is there a problem in svg filter definition ? Sep 26, 2015 at 2:47
  • @user3380710 No, as stated in the answer, not all browsers support it. Firefox does for instance, but Chrome only supports some filters and I don't know which ones, perhaps gaussian blur is not one of them. Your best bet is to stop using the <base> tag. Sep 26, 2015 at 3:01
0

Just Don't || !possible

(as suggested by @RobertLongson and @PaulLeBeau)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.