如何使用 snap.svg 或 svg.js 生成文本渐变

Question

我有这个 svg

<svg viewBox="0 0 462 40" height="40" width="462" id="lol-text-1" class="lol-text__svg">
<desc>Created with Snap</desc>
<defs>
    <linearGradient x1="0" y1="0.3" x2="0" y2="0.8" id="Sikjr46ql1nr">
        <stop offset="0%" stop-color="#cbac62"/>
        <stop offset="100%" stop-color="#66481f"/>
    </linearGradient>
    <mask id="Sikjr46ql1nz">
        <text x="0" y="35" class="lol-text__mask" style="" fill="#ffffff">Pentakill</text>
    </mask>
</defs>
<g style="" mask="url('#Sikjr46ql1nz')">
    <text x="0" y="35" class="lol-text__shadow" style="" fill="#ad986a">Pentakill</text>
    <text x="1" y="36" class="lol-text__text" style="" fill="url('#Sikjr46ql1nr')">Pentakill</text>
</g>

正如svg代码中所说，它是用snap创建的。这是用于生成 svg 的 html 标签：

<span class="lol-text" style="display: none;">Pentakill</span>

我假设 style="display: none;" 是在生成 svg 后插入的。

我需要的是一个示例，说明如何使用 snap.svg 或 svg.js

从 html 标签生成相同的 svg

谢谢！

Answer 1

Snap.svg will help you generate graphics, but it can also work with existing SVG. This means that your SVG content does not necessarily have to be created with Snap.svg，您还可以自由操作使用 Adobe Illustrator、Inkscape 或 Sketch 等工具创建的图形。

Here 是一些示例，您也可以在他们网站的演示部分找到这些示例。

 <html>
 <head>
    <meta charset="utf-8" />
    <title>Sample snapsvg</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js"></script>
 </head>
 <body>
 <script type="text/javascript">
   window.onload = function()
   {
     var snap = Snap(912,912);
     var headline = snap.paper.text(56,100, ['The Three Layers','of','Every Web Page']).attr({fill: '#FBAF3F', fontFamily: 'Impact'}); 
   }
  </body>
  </html>

在这里你可以看到 output

UPDATE

如果您想通过示例了解更多信息。

http://www.sitepoint.com/create-infographic-using-snap-svg/

Answer 2

我进行了很多搜索以找到我想要的东西，我找到了我想要的东西。

这是代码和示例：text gradient generated with snap.svg

如何使用 snap.svg 或 svg.js 生成文本渐变

How to generate text gradient with snap.svg or svg.js

gradient

svg.js

snap.svg