創建三角形的不規則矩陣SVG.JS

Question

我一直在試驗一個名爲SVG.JS的庫，它非常棒，功能強大。

我想用不規則的多邊形填充所有的屏幕，但我不知道如何讓它們填滿所有的屏幕，而與它的大小無關。我怎麼能這樣做？

最後，我可以用Illustrator製作這個不規則的多邊形設計，然後用SVG.JS導入它並操縱它們嗎？

http://jsfiddle.net/Vac2Q/3669/

/* create an svg drawing */ 
var draw = SVG('drawing') 

/* draw rectangle */ 

var polygon = draw.polygon('0,0 100,50 50,100').fill('#f09') 
var polygon = draw.polygon('0,0 50,100 0,200').fill('#f04') 
var polygon = draw.polygon('100,50 50,100 0,200').fill('#g09') 

Answer 1

那麼你基本上有兩種選擇。 （1）使用JS來確定您的頁面/屏幕的大小，並製作一個大小匹配的SVG。 （2）選擇一個默認的頁面大小（例如1000x1000），並設置你的viewBox到那個。然後將您的寬度和高度設置爲「100％」，並將您的preserveAspectRatio設置爲「無」。

<svg width="100%" height="100%" 
    viewBox="0 0 1000 1000" preserveAspectRatio="none"> 
    ...etc... 
</svg> 

第二種選擇會給你一個1000×1000「繪圖區」，並會自動伸展這一領域填補你的父對象的寬度和高度（即你的頁面）。但是你可能不希望圖表被這樣拉伸。

我還沒有使用SVGjs，所以我會讓你解決涉及的API調用問題。

Answer 2

這裏是BigBadaboom爲svg.js的例子（或多或少）：

/* create an svg drawing */ 
var draw = SVG('drawing').size('100%', '100%') 

/* draw shapes */ 
var group = draw.group() 
group.polygon('0,0 100,50 50,100').fill('#f09') 
group.polygon('0,0 50,100 0,200').fill('#f04') 
group.polygon('100,50 50,100 0,200').fill('#g09') 

/* set viewbox */ 
draw.viewbox(group.bbox()).attr('preserveAspectRatio', 'none') 

這裏是更新的小提琴：

http://jsfiddle.net/Vac2Q/3912/