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

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

view plainprint?

1. var container = $("#id");  
2.   
3. //SVGを格納する要素を作成  
4. var newElem = document.createElement("div");  
5.   
6. //サイズ  
7. var width = 100;  
8. var height = 100;  
9.   
10. //描画エリアを指定する要素を作成。Raphaelは全部これで始まる  
11. //格納する要素を指定せずに作ることもできるけど、その時はbody直下に追加されるようだ  
12. var paper = Raphael(newElem, width, height);  
13.   
14. //path要素を作成。指定方法はちょっと面倒…。  
15. var stroke = paper.path("M0,0L" + width + ",0L" + width + "," + height + "L0," + height + "L0,0z")  
16.  .attr({  
17.   //線の色と太さを設定  
18.   "stroke": "#ffd400",  
19.   "stroke-width": 16  
20.  });  
21.   
22. //要素に追加  
23. container.append(newElem);  

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要素の解説