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
Post a Comment