如何使用SVG.js导入预先生成的SVG模式？

Question

我想利用现有的SVG模式库（例如https://philiprogers.com/svgpatterns），而不必重构它们。但是我正在努力了解如何导入原始SVG字符串。该文档显示了如何在画布上放置一些东西，但是在JSFiddle中一个小时之后，我只是无法获取它来加载模式。任何帮助将不胜感激。

最终答案

• 找到所需的图案。 （此示例使用了Rogers库中的两个。）
• 复制完整的SVG代码，并将其放在答案中提到的draw.defs().svg(...)行中。
• 将<svg>标签包裹在包含属性<pattern>，id，patternUnits和height的{​​{1}}标签中。

最终代码：

width

这是小提琴：https://jsfiddle.net/fr84e5g9/。

谢谢@fuzzyma！

Answer 1

svg.js v2

使用svg()方法导入svg字符串时，您不会取回导入的元素。试想一下，您像这样导入了2个rect：

draw.svg('<rect/><rect/>')

您无法找回2个矩形。这就是为什么要返回调用svg方法的元素的原因，该元素在示例中为draw。

因此，首先将模式导入defs：

draw.defs().svg('<pattern id="someId">....</pattern>') 

然后通过其ID检索它：

var pattern = SVG.get('someId')

然后使用填充

rect.fill(pattern)

请确保您查看生成的代码。打开每个浏览器的开发人员工具时，只需执行此操作即可。您会很快看到那里生成的内容以及如何使用它。

svg.js v3

在版本3中，导入会导致代码有所不同，但是该代码仍然可以正常工作。但是，要检索具有特定ID的元素，请使用SVG('#someId')或类似的CSS选择器。