ウェブインコ

インコの技術メモ

SVG

四角
<svg>
  <rect id="myBox" x="0" y="0" fill="red" width="100" height="80" />
</svg>

↑ この隙間。svg タグに何も指定しないと width="300px" height="150px" になります。(Chrome)
svg の width, height より図形の方が大きいとはみ出た分は表示されません。
svg は通常画像と同じ inline です。下に小さな隙間が出来たり、改行しないと右横に文字がきます。

四角(線付き)
<svg width="300px" height="70px">
  <rect x="10" y="10" width="200" height="50" stroke="black" stroke-width="3" fill="none" />
</svg>

stroke-width は線の太さ。
fill は塗り。

テキスト
<svg width="300px" height="50px">
  <text x="100" y="25">Hello World</text>
</svg>
Hello World

単一線
<svg width="300px" height="150px">
  <line x1="0" y1="0" x2="150" y2="150" stroke="black" stroke-width="1" />
</svg>


<svg width="300px" height="120px">
  <circle cx="150" cy="60" r="50" stroke="black" stroke-width="1" fill="none" />
</svg>

楕円
<svg width="300px" height="120px">
  <ellipse cx="150" cy="60" rx="100" ry="50" stroke="black" stroke-width="1" fill="none" />
</svg>

折れ線
<svg width="300px" height="100px">
  <path stroke="blue" fill="none" d="M 0 0 L 50 50 100 20 150 50 200 10"></path>
</svg>

M 開始座標。
L x, y 座標のセット。
fill="none" を描かないと黒で塗られます。

折れ線(丸付き)
<svg width="300px" height="100px">
  <path stroke="red" fill="none" d="M 50 50 L 100 50 150 20 200 80 250 10" style="marker: url(#line-marker)"></path>
  <marker id="line-marker" markerWidth="10" markerHeight="10" refX="5" refY="5" stroke="none" fill="red">
    <circle cx="5" cy="5" r="5"/>
  </marker>
</svg>

style="marker: url(#line-marker)" はすぐ下で定義されている円。

棒グラフ、折れ線グラフ
<svg>
  <rect id="myBox" x="30" y="70" fill="#59acfd" width="30" height="80" />
  <rect id="myBox" x="60" y="100" fill="#f99ccd" width="30" height="50" />
  <rect id="myBox" x="110" y="20" fill="#59acfd" width="30" height="130" />
  <rect id="myBox" x="140" y="50" fill="#f99ccd" width="30" height="100" />
  <rect id="myBox" x="190" y="40" fill="#59acfd" width="30" height="110" />
  <rect id="myBox" x="220" y="10" fill="#f99ccd" width="30" height="140" />
  <path stroke="red" fill="none" d="M 60 130 L 140 70 220 100" style="marker: url(#line-marker)"></path>
  <marker id="line-marker" markerWidth="10" markerHeight="10" refX="5" refY="5" stroke="none" fill="red">
    <circle cx="5" cy="5" r="5"/>
  </marker>
</svg>

文字縁取り
<style type="text/css">
.svg-text{
  font-weight: bolder;
  font-size: 32px;
  fill: #000;
  stroke: #f00;
  stroke-width: 2px;
}
</style>
<svg width="300" height="80">
  <text x="10" y="40" class="svg-text">ほにょぺにょこ</text>
</svg>
ほにょぺにょこ

文字縁取りに影追加
<svg width="300" height="80">
  <defs>
    <filter id="svg-text-shadow" x="0" y="0" width="120%" height="120%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="offOut" />
      <feOffset in="offOut" dx="-2" dy="2" result="blurOut" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
<text x="10" y="40" class="svg-text" filter="url(#svg-text-shadow)"> ほにょぺにょこ</text>

 ほにょぺにょこ
offOut, blurOut は変数なので任意。
SourceAlpha, SourceGraphic はパラメーター。
stdDeviation="2" がボカシ。
dx="-2" dy="2" がボカシの方向。
左にぼかしたときに切れるので、例では1文字空けたりしていますが、他に方法ないかな。

半透明
<svg>
  <rect id="myBox" x="0" y="0" fill="red" width="100" height="80" />
  <rect id="myBox" x="50" y="40" fill="blue" width="100" height="80" fill-opacity="0.7" />
</svg>

fill-opacity="0.7" 透明度 30 %。0 に近いほど透明。