Apply Blur Filter auf bestimmte Bereich von Svg Bild

Question

Ich habe eine ziemlich komplexe, dynamisch erstellte Svg-Bild, das mit jQuery SVG erstellt wurde. Ich möchte einen "Popup" -Bereich erstellen, der über allen SVG-Elementen im Canvas angezeigt wird. Um einen modernen, lichtdurchlässigen iOS7-ähnlichen Look zu erstellen, möchte ich einen Weichzeichnungsfilter auf alles unter dem Popup-Bereich anwenden. Ich möchte in der Lage sein, die X-, Y- und auch die Breiten- und Höhenattribute dieses Popup-Bereichs dynamisch festzulegen.

Werfen Sie einen Blick auf this example:

<svg width="500" height="500"> 
    <rect x="10" y="10" height="235" width="235" fill="red" /> 
    <rect x="255" y="10" height="235" width="235" fill="green" /> 
    <rect x="10" y="255" height="235" width="235" fill="blue" /> 
    <rect x="255" y="255" height="235" width="235" fill="yellow" /> 

    <rect x="50" y="50" height="400" width="400" fill="rgba(255,255,255,0.8)" /> 
</svg> 

In diesem Fall alles, was verwischt werden sollte durch den weißen Bereich abgedeckt ist. Es sollte dann wie folgt aussehen:

ich this gefunden habe, aber hier ein statisches Hintergrundbild verwendet wird, die ich nicht habe. Gibt es irgendwelche Gründe, diesen Effekt mit Svg, CSS und jQuery zu erreichen?

Answer 1

Wie über diesen Ansatz? Es ist ein bisschen schwieriger zu benutzen, aber es scheint auf allen Browsern zu funktionieren.

http://jsfiddle.net/J3X4p/2/

<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500"> 
    <defs> 
    <filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse"> 
     <feGaussianBlur x="50" y="50" width="400" height="400" stdDeviation="40" in="SourceGraphic" result="blurSquares"/> 
     <feComponentTransfer in="blurSquares" result="opaqueBlur"> 
     <feFuncA type="linear" intercept="1"/> 
     </feComponentTransfer> 
     <feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"/> 
    </filter> 
    </defs> 

    <g id="squares" filter="url(#blurry)"> 
    <rect x="10" y="10" height="235" width="235" fill="red" /> 
    <rect x="255" y="10" height="235" width="235" fill="green" /> 
    <rect x="10" y="255" height="235" width="235" fill="blue" /> 
    <rect x="255" y="255" height="235" width="235" fill="yellow" /> 
    </g> 

    <rect x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" fill-opacity="0.8" /> 
</svg> 

Es ist schwieriger, weil der Filter auf den Hintergrund angewendet wird, anstatt die <rect>. Damit es funktioniert, müssen Sie die x, y, width und height von der <rect> zu der feGaussianBlur Primitive kopieren.

Answer 2

Dies ist nur direkt mit Inline-SVG in einem einzigen Browser - Internet Explorer 10 - möglich, verwenden Sie das Attribut "enable-background" und verwenden Sie die integrierte "BackgroundImage" Quelle. Dies ist die Methode, die im Text des Tutorials angezeigt wird, mit dem Sie verknüpft sind.

Es gibt eine Problemumgehung, wenn Ihr Hintergrund ausschließlich Bilder sind. Sie schreiben einen Filter, der den feImage-Filter verwendet, um dieselben Bilder im Hintergrund einzufügen, sie zu verwischen und die Unschärfe unter dem Inhalt zusammenzufassen, der oben angezeigt werden soll. Dies ist die Methode, die im aktuellen Code des Tutorials verwendet wird, mit dem Sie verbunden sind.

Wenn Ihr Hintergrund anderer SVG-Inhalt ist (Text, Pfade usw.), dann gibt es keinen browserübergreifenden Weg, um Ihren Effekt zu erzielen, da Firefox keine SVG-Objekte als Eingaben für das feImage-Filter-Primitiv unterstützt. Wenn Sie sich nicht für Firefox interessieren, können Sie die gleiche Problemumgehung verwenden, die das Tutorial für Bilder verwendet. Hier

ist ein Beispiel für letzteres - es ziemlich nah dran ist, was Sie wollen, aber ich habe nur getestet es in Chrom/Fenster (ich weiß, es ist nicht in Firefox funktioniert)

<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500"> 
    <defs> 
    <filter id="blurry" x="-20%" y="-20%" height="140%" width="140%" primitiveUnits="userSpaceOnUse"> 
     <feImage x="0" y="0" width="500" height="500" xlink:href="#squares" result="mySquares"/> 
     <feGaussianBlur stdDeviation="40" in="mySquares" result="blurSquares"/> 
     <feComponentTransfer in="blurSquares" result="morealpha"> 
     <feFuncA type="linear" intercept=".8"/> 
     </feComponentTransfer> 
     <feComposite operator="in" in="morealpha" in2="SourceGraphic" result="clipBlur"/> 
     <feFlood x="10%" y="10%" width="80%" height="80%" flood-color="white" flood-opacity="0.6" result="whitesquare"/> 
     <feBlend mode="screen" in="clipBlur" in2="whitesquare"/> 
    </filter> 
    </defs> 

    <g id="squares"> 
    <rect x="10" y="10" height="235" width="235" fill="red" /> 
    <rect x="255" y="10" height="235" width="235" fill="green" /> 
    <rect x="10" y="255" height="235" width="235" fill="blue" /> 
    <rect x="255" y="255" height="235" width="235" fill="yellow" /> 
    </g> 

    <rect filter="url(#blurry)" x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" /> 
</svg> 

(Update:.. Neuentdeckung - Sie Javascript verwenden können jeden Inhalt, den Sie feImage in eine svg + xml codierte Daten URI einspeisen wollen zu kodieren - dann die Cross-Browser funktioniert super hässlich)