如何使用 SVG.js 导入预生成的 SVG 图案？

Question

我想利用现有的 SVG 模式库（例如，https://philiprogers.com/svgpatterns）而不必重建它们。但我很难理解如何导入原始 SVG 字符串。文档展示了如何在 canvas 上放置一些东西，但是在 JSFiddle 中一个小时后，我就是无法让它加载模式。任何帮助将不胜感激。

最终答案

找到你想要的图案。（这个例子使用了 Rogers 库中的两个。）
复制完整的 SVG 代码并将其放入答案中提到的 draw.defs().svg(...) 行。
将 <svg> 标签包裹在包含属性 id、patternUnits、height 和 width 的 <pattern> 标签中。

最终代码：

// initialize SVG.js
var draw = SVG('drawing')

// Define the patterns. Multiple `svg()` calls don't clobber each other.
draw.defs().svg("<pattern id='chevrons' patternUnits='userSpaceOnUse' width='60' height='30'><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='60' height='30'><defs><rect id='r' width='30' height='15' fill='white' stroke-width='2.5' stroke='black'/><g id='p'><use xlink:href='#r'/><use y='15' xlink:href='#r'/><use y='30' xlink:href='#r'/><use y='45' xlink:href='#r'/></g></defs><use xlink:href='#p' transform='translate(0 -25) skewY(40)'/><use xlink:href='#p' transform='translate(30 0) skewY(-40)'/></svg></pattern>")
draw.defs().svg("<pattern id='microbial' patternUnits='userSpaceOnUse' width='20' height=20><svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><rect width='40' height='40' fill='white'/><circle r='9.2' stroke-width='1' stroke='black' fill='none'/><circle cy='18.4' r='9.2' stroke-width='1px' stroke='black' fill='none'/><circle cx='18.4' cy='18.4' r='9.2' stroke-width='1' stroke='black' fill='none'/></svg></pattern")

// Load the pattern by id
var pattern = SVG.get('chevrons')

// Apply it
draw.circle(100).move(100, 50).stroke({width: 1, color: "black"}).fill(pattern)

这是 fiddle：https://jsfiddle.net/fr84e5g9/。

谢谢，@fuzzyma！

Answer 1

svg.js v2

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

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.jsv3

对于第 3 版，导入会产生一些不同的代码，但代码应该仍然有效。但是，要检索具有特定 id 的元素，请使用 SVG('#someId') 或类似的 css 选择器。

如何使用 SVG.js 导入预生成的 SVG 图案？

How can I import pre-generated SVG patterns using SVG.js?

svg.js

最终答案

svg.js v2

svg.jsv3