html5 - SVG with Shadow not displaying on some pages in Firefox -
so here's svg script (i have embedded on page):
<svg id="carttab" viewbox="0 0 600 65" preserveaspectratio="xminymin"> <defs> <filter id="tabshadow" x="-10%" y="-10%" width="110%" height="110%"> <feoffset result="offout" in="sourcealpha" dx="0" dy="0" /> <fegaussianblur result="blurout" in="offout" stddeviation="2" /> <fecomponenttransfer> <fefunca type="linear" slope="0.3"/> </fecomponenttransfer> <femerge> <femergenode/> <femergenode in="sourcegraphic"/> </femerge> </filter> </defs> <path fill="#658fbf" d="m4,65.7v16.4c4,9.7,9.7,4,16.4,4c0,0,234.6,0,276.8,0c136,0,113.6,61.7,272.1,61.7 c625.1,65.7,4,65.7,4,65.7z" filter="url(#tabshadow)"/> </svg>
now displays in chrome , ie on pages fine, in firefox, can display on homepage, other pages it's not there. if remove shadow filter works though.
am doing wrong filter?
ah found answer here: svg filter working when added in style attribute (firefox)
i had prepend current page before #tabshadow.
so filter is:
filter="url([current url]#tabshadow)"
so example be:
filter="url(about#tabshadow)"
Comments
Post a Comment