Question

我正在接触SVG.js

我有一个模式效果，我已经创建并希望在许多SVG中使用。

我可以使用以下代码在一个SVG中创建它......

$( document ).ready(function() {

    var draw = SVG('geo').size(1200, 1700);

    // 100 lines of js creating geometric pattern, effectively this...
    var rect = draw.polygon(coordinates).fill('#fff').stroke({ width: 1, color:'#fff'}).opacity(0)

}）;

这会创建一个带有ID geo的SVG。但是我想再次使用这个代码生成各种SVG，理想情况下有不同的选项（颜色等）。

SVG（'geo'）指的是一个特定的SVG，我如何制作它以便我可以将它应用于我想要的任何SVG页面？

希望有意义

Answer 1

您可以定义一个重复执行此操作的函数。如下所示：

function create_svg(dom_id, width, height, coord) {
  var draw = SVG(dom_id).size(width, height);
  var rect = draw.polygon(coord)
                 .fill('#fff')
                 .stroke({
                   width: 1,
                   color: '#fff'
                 })
                 .opacity(0);
}

$(function() {
  create_svg('geo', 1200, 1700, coordinates);
  create_svg('geo2', 1000, 1500, other_coordinates);
)};

如果您需要进一步使用创建的SVG，稍后在代码中，您可以使create_svg函数将创建的SVG对象返回到document.ready函数中的变量。

重用各种SVG的SVG.js代码

1 个答案: