ウェブインコ

インコの技術メモ

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 は塗り。
px は有っても無かっても同じようです。

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

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


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

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

三角
<svg width="100" height="100">
  <path d="M50 0 L0 100 L100 100 Z" style="fill:red"/>
</svg>

M 開始位置
L 直線
Z 終点から開始位置まで閉じる線

三角 高さの異なるものを並べる例
<svg width="100" height="150">
  <path d="M50 0 L0 150 L100 150 Z" style="fill:red"/>
</svg>
<svg width="100" height="150">
  <path d="M50 50 L0 150 L100 150 Z" style="fill:red"/>
</svg>

この書き方だと、開始位置の y 座標を変えるだけで良い。

折れ線
<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 に近いほど透明。

線がにじむとき
座標を 0.5 ズラすと治ることがあります。 (縦線の例)

<svg width="200" height="200">
  <line x1="50" y1="0" x2="50" y2="200" stroke="#707271" stroke-width="1">
  <line x1="150.5" y1="0" x2="150.5" y2="200" stroke="#707271" stroke-width="1">
</svg>