Question

我一直在试验一个名为SVG.JS的图书馆，它非常精彩且功能强大。

我想用不规则多边形填充所有屏幕，但我不知道如何使它们填满所有屏幕，与其大小无关。我怎么能这样做？

最后，我是否可以使用Illustrator制作这种不规则的多边形设计，然后使用SVG.JS导入并操作它们？

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

以下是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/

Answer 2

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

（1）使用JS确定页面/屏幕的大小，并制作尺寸与之匹配的SVG。

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

（2）选择默认页面大小（例如1000x1000）并将viewBox设置为该大小。然后将宽度和高度设置为“100％”，并将preserveAspectRatio设置为“none”。

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

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

我没有使用过SVGjs，所以我会让你去解决所涉及的API调用。

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

2 个答案: