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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -