SVGで円の周りを輝かせる ハロー効果

本物のページはこちら→glow

Included page "svg:glow" does not exist (create it now)

ぼやけてるポイント

  <filter id="theBlur"
        filterUnits="userSpaceOnUse"
        x="0" y="0" width="400" height="400">
    <feGaussianBlur in="SourceGraphic" stdDeviation="25" />
  </filter>

x,y,width,height
フィルターを施す範囲
in
SourceGraphic,SourceAlpha

filterUnits

フィルターをかける領域の座標を設定する。これによって、x,yの値をどういう風に解釈するかが変わる。

userSpaceOnUse
ユーザーが指定した座標。何もしなかったら、図形全体の左上が原点の座標かな?
objectBoundingBox
図形を囲んでいる最小の四角形を基準とした座標(初期値)

フルソースコード

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="400"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <filter id="theBlur"
        filterUnits="userSpaceOnUse"
        x="0" y="0" width="400" height="400">
    <feGaussianBlur in="SourceGraphic" stdDeviation="25" />
  </filter>
  <g id="myObject">
   <!-- SVG Code for the glowing object goes here -->
   <circle r="30" cx="200" cy="200" style="fill:#0FF;" />
  </g>
</defs>
<g id="blurred">
  <use xlink:href="#myObject" filter="url(#theBlur)" />
  <use xlink:href="#myObject" />
</g>
</svg>

サポートサイト Wikidot.com