SVG-Bildergänzung (Scalable Vector Graphics), Gaußsche Unschärfe, Farbverlauf und G-Tag

Heute werde ich hauptsächlich über die Spezialeffekte von SVG sprechen
Tatsächlich ähnelt es Canvas, verwendet aber XML-Tags
Nicht oft verwendet, aber einfach Falls Sie es in Zukunft verwenden müssen, organisieren Sie es

Bilder hinzufügen

Sie können auch Bilder zu SVG hinzufügen

<svg width=300 height=300>
    <image xlink:href="./images/d.jpg" x=100 y=100 height=100 width=100></image></svg>

Beachten Sie, dass dies das Bild-Tag anstelle des img-Tags in unserem HTML ist.

xlink:href gibt den Ressourcenpfad an.
X-, Y-Bildkoordinatenposition.
Höhe, Breite, Breite und Höhe von Das in SVG angezeigte Bild

Originalfilter

svg bietet uns viele Filter

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

• feFlood

• feGaussianBlur

• feImage

• feMerge

• feMorphology

• feOffset

• feSpecularLighting

• feTile

• feTurbulence

• feDistantLight

• fePointLight

• feSpotLight

Verwenden Sie das Filter-Tag, um Filter zu definieren, und der Filter muss ein haben ID-Bezeichner
Grafikelemente werden durch filter = "url(#id)"Filter

Verwenden Sie Filter, um wunderschöne Muster zu erstellen
Werfen wir hauptsächlich einen Blick auf den feGaussianBlur Gaußscher Weichzeichnerfilter

Gaußscher Weichzeichner

feGaussianBlur wird zum Erstellen von Unschärfeeffekten verwendet
Der Filter wird im Defs-Element definiert

<svg width=100 height=100>
  <defs>
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15">
    </filter>
  </defs>
  <rect width="100" height="100" stroke="blue" stroke-width="3"
  fill="red" filter="url(#f1)"></svg>

Das Filter-ID-Attribut definiert den eindeutigen Namen von a filter
feGaussianBlur definiert den Unschärfeeffekt
in Definition Erstellt Effekte aus dem gesamten Bild
(SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
)
stdDeviation Definiert den Unschärfegrad
Filter für Rechteckelemente Das Attribut verknüpft das Element mit dem Filter „f1“

Verlauf

ist auch in linearen Verlauf und radialen Verlauf unterteilt
Die Verwendung ist analog zum Farbverlauf von Canvas

Linearer Farbverlauf

<svg widht=300 height=300>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="150" cy="150" rx="100" ry="50" fill="url(#grad1)" /></svg>

x1, y1, x2, y2 von linearGradient definieren die Start- und Endpositionen des Farbverlaufs
Die Farbrichtung wird durch das Stopp-Tag angegeben
Beachten Sie, dass das XML-Einzeltag „/“ enthalten muss, andernfalls ist die Beschriftung ungültig<stop></stop>

Radialer Farbverlauf

<svg width=300 height=300>
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white;stop-opacity:0" />
      <stop offset="100%" style="stop-color:orange;stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="150" cy="150" rx="100" ry="50" fill="url(#grad2)" /></svg>

cx, cy und r von radialGradient sind als der äußerste Layer-Kreis definiert
fx und fy definieren den innersten Kreis
Die Farbe wird auch durch den Stopp angegeben Tag

g-Tag

Wenn wir das Tool verwenden
exportiert möglicherweise den Code
Tatsächlich ist an diesem XML-Tag nichts Magisches
Es entspricht a Container. Wir können den gleichen Stil für die darin enthaltenen Grafiken angeben
Zum Beispiel Farbe, Koordinatensystem, Filter usw.

<svg width=300 height=300 viewbox="0 0 30 30">
    <g stroke="red">
        <path d="M 5 10 L 25 10"></path>
        <path d="M 5 15 L 25 15"></path>
        <path d="M 5 20 L 25 20"></path>
    </g></svg>

Abschließend empfehle ich eine SVG-Bibliothek snap.svg
, die es uns ermöglicht, SVG so zu betreiben, wie jQuery DOM betreibt
snap.svg

Das Obige ist der Inhalt von SVG (Scalable Vector Graphics) Bildaddition, Gaußscher Unschärfe, Farbverlauf und g-Tag. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!