So erstellen Sie eine Transparenzgradientenmaske mit einem SVG-Filter

Ich verwende derzeit einen SVG-Farbverlauf, um einen Ausblendeffekt für Pfade anzuwenden. Dies ermöglicht der Weg zu 100% Opazität bei x0 zu starten und zu 0% bei x1 ausgeblendet, wo die für den speziellen Weg sein können, ist es angewandt:So erstellen Sie eine Transparenzgradientenmaske mit einem SVG-Filter

<linearGradient id="gradient_to_transparent" x1="0%" x2="100%"> 
    <stop offset="0" stop-opacity="1"></stop> 
    <stop offset="1" stop-opacity="0"></stop> 
</linearGradient>

Dies funktioniert gut, wenn auf den Hub-Stil Anwendung ein Weg:

<path d="..." style="stroke:url(#gradient_to_transparent);"></path>

Allerdings ist das Problem, dass der Hub-Stils unter Verwendung ich nicht anderen Schlaganfall Stile und wird standardmäßig schwarz anwenden können. Was ich möchte, ist, den Strich in der von mir gewünschten Farbe zu stylen und dann einen Verlauf auf die Schlag-Opazität anzuwenden oder einen SVG-Filter anzuwenden, um den Fade-Out-Effekt zu erzeugen. Ich habe versucht, mit SVG-Filtern zu verwirren und feComponentTransfer mit feFuncA zu verwenden, konnte aber nicht etwas erreichen, das richtig funktionierte.

Die Strichfarbe muss für jeden Pfad einzeln berechnet werden. Die Lösung, die Farbe im Farbverlauf einzustellen, würde also nicht sehr gut skalieren.

Quelle

2014-02-06 drarmstr

Muss es ein Farbverlauf oder ein Filter sein? Ich würde vorschlagen, eine zu verwenden, die ein Rect mit einem Gradienten enthält, aber ich bin mir nicht sicher über die Anforderungen, die Sie haben. Ein Beispiel: http://xn--dahlstrm-t4a.net/svg/presentations/svgdemos/relect-text-mask.svg –

@ ErikDahlström, sollten Sie dies als Antwort posten, da es wie eine großartige Lösung aussieht. Es gibt jedoch einige Komplikationen bei der Berechnung der Maskengröße und der Platzierung für gekrümmte Pfade. – drarmstr

Muss es ein Farbverlauf oder ein Filter sein? Ich würde vorschlagen, ein <mask>10 zu verwenden, das ein Rect mit einem angewandten Gradient enthält, aber ich bin über die Anforderungen nicht sicher, die Sie haben.

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox="0 0 400 80">  
    <defs> 
    <linearGradient id="fadeGrad" y2="1" x2="0"> 
     <stop offset="0.5" stop-color="white" stop-opacity="0"/> 
     <stop offset="1" stop-color="white" stop-opacity=".5"/> 
    </linearGradient> 
    <mask id="fade" maskContentUnits="objectBoundingBox"> 
     <rect width="1" height="1" fill="url(#fadeGrad)"/> 
    </mask> 
    </defs> 
    <rect width="100" height="100" fill="green" stroke="blue" mask="url(#fade)"/> 
</svg>

Siehe ein ähnliches Beispiel here.

Quelle

2014-02-21 08:27:37

Dieser Ansatz funktioniert gut. Beachten Sie jedoch, dass es Komplikationen bei der Maskengröße und den Pfaden gibt. Die Begrenzungsbox für einen Pfad wird basierend auf der x, y-Position der Start- und Endpunkte berechnet. Ein gekrümmter Pfad oder eine dicke Strichbreite kann sich außerhalb dieses Kastens erstrecken. Daher musste ich die Maske und den rect-Anfang tatsächlich bei einem negativen x, y haben und eine Breite und Höhe verwenden, die tausendmal größer als die Objektbegrenzungsbox ist. Dabei mussten die linearen Anschlagpunkte auch so angepasst werden, dass die Stopps an den Endpunkten des Pfades anstelle der Kanten der Maske ausgerichtet waren. – drarmstr

Es gibt auch die Ecke für horizontale oder vertikale Linien, wo die Bounding Box keine Höhe oder Breite haben würde. Für diesen Fall musste ich den Endpunkt so jittern, dass es einen leichten Anstieg gab und dann wirklich sicherstellen, dass die Maske zehntausende Male größer war, um Strichbreiten zu bewältigen, die Hunderte von Pixeln breit sein konnten. – drarmstr

So erstellen Sie eine Transparenzgradientenmaske mit einem SVG-Filter

Antwort

Verwandte Themen