SVG（Scalable Vector Graphics）画像追加、ガウスぼかし、グラデーション、Gタグ

今日は主にSVGの特殊効果についてお話します
実はXMLタグを使う点以外はcanvasと似ています
あまり使いませんが、念のため整理しておきます将来必要になります

画像の追加

svg

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

で画像を追加することもできます

xlink:hrefはリソースパスを指定する

xlink:hrefがhtmlのimgタグではなく画像タグであることに注意してください

x,y 画像座標位置

高さ,幅 SVG で表示される画像の幅 高

フィルタープリミティブ

svg は多くのフィルターを提供します
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting

• ディスプレイスメントマップ
• feOffset

• feSpecularLighting

• feTile

• feTurbulence

• feDistantLight

• fePointLight

• feSpotLight

• フィルタータグを使用してフィルターを定義します。フィルターには ID 識別子が必要です

  グラフィック要素は filter = "url(#id)" を渡します。フィルターを引用するには

フィルターを使用してゴージャスなパターンを構築できます
• 主に feGaussianBlur ガウスぼかしフィルターを見てみましょう
  ガウスぼかし
• feGaussianBlur はぼかし効果を作成するために使用されます

  フィルターは 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>



• filter id 属性はフィルターを定義します

  feGaussianBlur の一意の名前は定義しますぼかし効果
in は画像全体から作成される効果を定義します
• (SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |

  1d4578e5a21c1594de577f48c676e1f1)

  stdDeviation はぼかしの量を定義します
rect 要素filter 属性は要素を「f1」フィルターにリンクします

Gradient
filter = "url(#id)" 来引用滤镜

使用滤镜可以构建绚丽的图案
我们主要来看一下这个feGaussianBlur高斯模糊滤镜

高斯模糊

feGaussianBlur用于创建模糊效果
滤镜定义在defs元素中

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

filter id属性定义一个滤镜的唯一名称
feGaussianBlur 定义模糊效果
in 定义了由整个图像创建效果
（SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
1d4578e5a21c1594de577f48c676e1f1）
stdDeviation 定义模糊量
rect元素的滤镜属性把元素链接到”f1”滤镜

渐变

同样分为线性渐变和径向渐变
用法类比canvas的渐变

线性渐变

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

linearGradient的 x1,y1,x2,y2定义了渐变起始和结束位置
颜色方位由stop标签指定
注意XML单标签是要有“/”的，否则标签无效 cc780654b414c046f896056047467c6eも線形グラデーションと放射状グラデーションに分けられます

使い方はキャンバスのグラデーションに似ています

線形グラデーション

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

linearGradient の x1、y1、x2、y2 は開始位置と終了位置を定義します。グラデーション
色の方向は停止タグによって指定されます
XMLの単一タグには「/」が必要であることに注意してください。そうでない場合、タグは無効ですcc780654b414c046f896056047467c6e

放射状グラデーション

rrreee

radialGradient の cx、cy と r は最も外側の円を定義します
fx と fy は最も内側の円を定義します

色は停止タグ

g タグでも指定されます

ツールを使用すると、
エクスポートコード
実際、この XML ラベルには魔法のようなものは何もありません

それはコンテナと同等であり、その中のグラフィックスに同じスタイルを指定できます

たとえば、色、座標系、フィルターなどです
rrreee

最後に、SVGライブラリsnap.svgをお勧めします🎜jQueryがDOMを操作するようにSVGを操作できるようにします🎜snap.svg🎜🎜 上記はSVG（スケーラブルベクターグラフィックス）画像の追加、ガウスぼかし、グラデーション、およびg タグの関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。 🎜🎜🎜🎜🎜