SVG Lineaire Verloop

<defs> en <filter>

in de <defs> Alles wat SVG-filters zijn<defs> in de elementen.

Elementen worden gebruikt om SVG-filters te definiëren. Element is een afkorting voor definities, dat definities van speciale elementen (zoals filters) bevat.Elementen worden gebruikt om SVG-filters te definiëren. <filter>

SVG <feOffset>-element heeft een vereiste id-eigenschap die het filter identificeert. Vervolgens wijst de grafiek naar het te gebruiken filter.

Voorbeeld 1

<feOffset> Elementen worden gebruikt om schaduw effecten te creëren. Het idee is: eerst een SVG-grafiek (beeld of element) verkrijgen, en deze een beetje verplaatsen in het xy-plan.

De eerste voorbeeld verplaatste een rechthoek (gebruik <feOffset>），en voeg vervolgens het oorspronkelijke beeld toe aan het gedevagde beeld bovenaan (gebruik <feBlend>）：

Dit is de SVG-code:

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

Probeer het zelf

Code uitleg:

• Het id-eigenschap van het <filter>-element definieert de unieke naam van het filter
• <rect>-element filter-eigenschap koppelt dit element aan het "f1"-filter

Voorbeeld 2

Nu kan je het afgebeeld beeld vervagen (gebruik <feGaussianBlur>）：

Dit is de SVG-code:

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

Probeer het zelf

Code uitleg:

• Het stdDeviation-eigenschap van het <feGaussianBlur>-element definieert de hoeveelheid vervaging

Voorbeeld 3

Nu, zet de schaduw op zwart:

Dit is de SVG-code:

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

Probeer het zelf

Code uitleg:

• Het in-attribute van het <feOffset>-element wordt veranderd in "SourceAlpha", wat de Alpha-kanaal gebruikt in plaats van de hele RGBA-pixel voor het vervagen

Voorbeeld 4

Nu, behandel de schaduw als een kleur:

Dit is de SVG-code:

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

Probeer het zelf

Code uitleg:

• <feColorMatrix> Het filter wordt gebruikt om de kleuren in het verschoven beeld om te zetten naar een kleur die dichter bij zwart ligt. De drie '0.2'-waarden in de matrix worden vermenigvuldigd met de rode, groene en blauwe kanalen. Het verminderen van hun waarden maakt de kleuren dichter bij zwart (zwart is 0)