Ajout d'images SVG (Scalable Vector Graphics), flou gaussien, dégradé et balise g

Aujourd'hui je vais principalement parler des effets spéciaux du SVG
En fait, c'est similaire au canevas, mais il utilise des balises XML
Pas beaucoup utilisé, mais juste au cas où à l'avenir Si vous avez besoin de l'utiliser, organisez-le

Ajouter des images

Vous pouvez également ajouter des images au svg

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

Notez qu'il s'agit de la balise image au lieu de la balise img dans notre code HTML

xlink:href spécifie le chemin de la ressource
position des coordonnées de l'image x,y
hauteur, largeur, largeur et hauteur de l'image affichée en svg

filtre original

svg nous fournit beaucoup de filtres

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

• feFlood

• feGaussianBlur

• feImage

• feMerge

• feMorphology

• feOffset

• feSpecularLighting

• feTile

• feTurbulence

• feDistantLight

• fePointLight

• feSpotLight

Utilisez la balise de filtre pour définir des filtres, et le filtre doit avoir un id identifier
Les éléments graphiques sont référencés via des filter = "url(#id)" Filtres

Utilisez des filtres pour créer de superbes motifs
Jetons principalement un coup d'œil au filtre feGaussianBlur Flou gaussien

Flou gaussien

feGaussianBlur est utilisé pour créer des effets de flou
Le filtre est défini dans l'élément defs

<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>

L'attribut filter id définit le nom unique d'un filter
feGaussianBlur définit l'effet de flou
dans la définition Crée des effets à partir de l'image entière
(SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
< filter-primitive-reference >)
stdDeviation Définit la quantité de flou
Filtre pour les éléments rect L'attribut relie l'élément au filtre "f1"

Gradient

est également divisé en dégradé linéaire et dégradé radial
L'utilisation est analogue au dégradé de canevas

Dégradé linéaire

<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 de LinearGradient définissent les positions de début et de fin du dégradé
La direction de la couleur est spécifiée par la balise stop
Notez que la balise unique XML est Il doit y avoir "/", sinon l'étiquette n'est pas valide<stop />

Dégradé Radial

<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 et r de radialGradient sont définis comme le cercle de calque le plus extérieur
fx et fy définissent le cercle le plus intérieur
La couleur est également spécifiée par l'arrêt tag

g tag

Quand on utilise l'outil
on peut exporter le code
En fait, il n'y a rien de magique dans cette balise XML
C'est l'équivalent d'un conteneur. Nous pouvons spécifier le même style pour les graphiques à l'intérieur
Par exemple, la couleur, le système de coordonnées, le filtre, etc.

<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>

Enfin, je recommande. une bibliothèque svg snap.svg
qui nous permet d'exploiter le SVG comme jQuery exploite le DOM
snap.svg

Ce qui précède est le contenu de l'ajout d'images SVG (Scalable Vector Graphics), du flou gaussien, du dégradé et la balise g. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !