javascript - 为各种 SVG 重用 SVG.js 代码

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 函数中的变量。