创建一个不规则的三角形矩阵 SVG.JS答案

【问题标题】：Create an irregular matrix of triangles SVG.JS创建一个不规则的三角形矩阵 SVG.JS
【发布时间】：2014-06-22 15:15:29
【问题描述】：

我一直在试验一个名为 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')

【问题讨论】：

请展示你目前拥有的东西
当然！我已经更新了帖子

标签： javascript svg svg.js

【解决方案1】：

这里是 svg.js 的 BigBadaboom 示例（或多或少）：

/* 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/

【讨论】：

【解决方案2】：

嗯，你基本上有两个选择。

(1) 使用 JS 确定页面/屏幕的大小并制作一个大小与之匹配的 SVG。

<svg width="1600" height="1024">
    ...etc...
</svg>

(2) 选择一个默认页面大小（例如 1000x1000）并将您的 viewBox 设置为该大小。然后将您的宽度和高度设置为“100%”，并将您的 preserveAspectRatio 设置为“无”。

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

第二个选项将为您提供 1000x1000 的“绘图区域”，并将自动拉伸该区域以填充父对象（即页面）的宽度和高度。但是，您可能不希望图表以这种方式拉伸。

我没有使用过 SVGjs，所以我让你来计算所涉及的 API 调用。

【讨论】：