SVG - Vordefinierte und selbstgemachte Unschärfefilter

[Rolf B]

Hallo,

gegeben sei dieses SVG (xmlns fehlt, war inline im HTML):

<svg viewBox="0 0 500 220" width="500" height="220">
  <defs>
    <filter id="unscharf">
      <feGaussianBlur stdDeviation="3" result="foo"/>
    </filter>
  </defs>
  <g fill="yellow" stroke="red" stroke-width="4">
    <rect x="10" y="10" width="200" height="150" filter="url(#unscharf)"/>
    <rect x="250" y="10" width="200" height="150" filter="blur(3px)"/>
  </g>
</svg>

Die Ergebnisse sind unterschiedlich. Die vordefinierte blur-Funktion hinterlässt den Rand deutlich kräftiger als der feGaussianBlur Urfilter.

Warum? Es macht den Eindruck, als würde die blur()-Funktion die Füllung und den Stroke getrennt blurren und dann wieder überlagern. Ich hab's mal probiert - wenn ich das erste <rect /> ersetze durch

    <rect x="10" y="10" stroke="none" width="200" height="150"
          filter="url(#unscharf)"/>
    <rect x="10" y="10" fill="none" width="200" height="150"
          filter="url(#unscharf)"/>

schreibe, also erst die Füllung unscharf male und dann den Rand ohne Füllung unscharf drübermale, dann sieht das Ergebnis so aus wie das eine Rechteck mit dem vordefinierten blur()-Filter.

Aber wie müsste ich einen custom filter bauen, damit in einem einzigen Filter das Gleiche herauskommt wie bei blur? Geht das überhaupt? Die Angabe von in="FillPaint" oder in="StrokePaint" löst ja nicht den Füll-Teil und Rand-Teil als Bild heraus, sondern erzeugt eine einheitliche Fläche so groß wie die Filterregion, mit der Füll- bzw. Randfarbe.

Rolf