Rphael.js を使って SVGで四角い線を表示させてみる

SVGを使うのに便利なライブリRaphael.jsを使って枠線を表示してみる

var container = $("#id");

//SVGを格納する要素を作成
var newElem = document.createElement("div");

//サイズ
var width = 100;
var height = 100;

//描画エリアを指定する要素を作成。Raphaelは全部これで始まる
//格納する要素を指定せずに作ることもできるけど、その時はbody直下に追加されるようだ
var paper = Raphael(newElem, width, height);

//path要素を作成。指定方法はちょっと面倒…。
var stroke = paper.path("M0,0L" + width + ",0L" + width + "," + height + "L0," + height + "L0,0z")
 .attr({
  //線の色と太さを設定
  "stroke": "#ffd400",
  "stroke-width": 16
 });

//要素に追加
container.append(newElem);

参考：path要素の解説