benutzerdefinierte svg Filter funktioniert nicht auf Firefox

Dieser Code unten funktioniert in Chrom und Filter angewendet wird, aber nicht in Firefox. Ein zusätzlicher Raum auch durch direkte Einbeziehung von SVG-Definition in der html hinzugefügt (Dies ist in allen Browsern). Nicht sicher, warum es so passiert. Kann mir jemand lassen das Problem weiß, ich bin neu in svgbenutzerdefinierte svg Filter funktioniert nicht auf Firefox

Hier ist die codepen Link: http://codepen.io/susheel61/pen/wJYgwr

<svg version="1.1" id="ThemeSvg"> 
    <defs> 
     <g> 
      <!--/* Polygon definitions for overlay shape */--> 
      <rect id="red-poly" x="0%" y="0%" width="53%" height="100%" fill="#b5121b" transform="skewX(-10)"></rect> 
      <rect id="rect-fade-out" x="0%" y="0%" width="53%" height="100%" fill="url(#fade-out)" transform="skewX(-10)"></rect> 
     </g> 
     <g> 
      <filter id="red-angled-overlay" x="0%" y="0%" width="100%" height="100%"> 
       <!--/* Bring in the mask for fading the image out */--> 
       <feImage xlink:href="#rect-fade-out" result="red-overlay" x="0" y="0"></feImage> 
       <!--/* Create composite of image and fade mask */--> 
       <feComposite in="SourceGraphic" in2="red-overlay" operator="out" result="composite"></feComposite> 
       <!--/* Bring in the colored polygon for the overlay */--> 
       <feImage xlink:href="#red-poly" result="overlay" x="0" y="0"></feImage> 
       <!--/* Blend the overlay with the faded image */--> 
       <feBlend in="composite" in2="overlay" mode="multiply"></feBlend> 
      </filter> 
     </g> 
    </defs> 
</svg> 

<svg version="1.1" viewBox="0 0 840 474" preserveAspectRatio="xMaxYMin slice"> 
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://wowslider.com/sliders/demo-10/data/images/autumn_leaves.jpg" width="100%" height="100%" filter="url(#red-angled-overlay)" class="svg-black-overlay"></image> 
</svg>

Quelle

2017-03-28 Susheel Singh

Firefox nicht feImage filters where the image is a fragment unterstützt. Es unterstützt nur feImage, wenn das Image ein vollständiges eigenständiges Image oder ein Daten-URI eines vollständigen SVG-Dokuments ist.

würden Sie haben zwei weitere eigenständige SVG-Bilder eines mit jeder Polygon Definition zu schaffen, in und um die feImage Elemente auf dem kompletten Bilddokument jeweils zeigen.

Quelle

2017-03-28 21:26:37

@MichaelMullany habe ich diese Option in der Antwort erwähnt. –

Können Sie ein Beispiel Ich bin ein nicht klar hinzufügen, was Sie erwähnen, wie ich bin neu –

ein vollständiges SVG-Dokument erstellen SVG, die rect darin bleiben. Richten Sie den Filter auf das Dokument und nicht auf das Rechteck. –

benutzerdefinierte svg Filter funktioniert nicht auf Firefox

Antwort

Verwandte Themen