xml - svg use filter from another file -


i'm trying define several filters, don't want them cluttering main html document. i'd use relative uris reference filters using relative iris, which docs indicate should work.

filters.svg

<?xml version="1.0"?> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg">     <defs>         <filter id="blur" x="-100%" y="-100%" width="300%" height="300%">             <fegaussianblur in="sourcegraphic" stddeviation="8" />         </filter>     </defs> </svg> 

page.html

<!doctype html> <html> <head>     <meta chartype="utf-8" />     <title>remote filter loading</title> </head> <body>     <svg         id="blurs"         version="1.1"         xmlns="http://www.w3.org/2000/svg"         xmlns:xlink="http://www.w3.org/1999/xlink"     >         <defs>             <use xlink:href="filters.svg#blur"></use>         </defs>          <circle cx="50" cy="50" fill="red" r="25"             filter="url(filters.svg#blur)"         />          <circle cx="100" cy="50" fill="red" r="25"             filter="url(#blur)"         />     </svg> </body> </html> 

serving these python -m simplehttpserver, in chrome, expect see 2 fuzzy little dots:

http://imgur.com/g8an9bx,adlhf4g#1

(generated pasting filter defs directly, thought <use> did.)

what get:

http://imgur.com/g8an9bx,adlhf4g#0

later

as @jason aller points out, isn't supported in chrome. mention, filters don't seem working on firefox. there possible workarounds keep (the actual image has several, , they're rather complex) in separate file?

after looking @ caniuse.com , testing can see work in firefox, not chrome.


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -