Comment générer un gradient de texte avec snap.svg ou svg.js

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

Comme il est dit dans le code svg, il a été créé avec bouton pression. Voici la balise html utilisé pour générer le svg:

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

J'Asume que le style="display: none;" a été inséré après le svg a été généré.

Ce que je besoin est un exemple sur comment puis-je générer le même svg d'une balise html en utilisant snap.svg ou svg.js

Thank you!

Source

2016-02-12 Bogdan Galan

J'ai beaucoup cherché pour trouver ce que je voulais et j'ai trouvé exactement ce que je cherchais.

Voici le code et un exemple: text gradient generated with snap.svg

Source

2016-02-19 13:55:16

Snap.svg vous aidera à générer des graphiques, mais il peut également fonctionner avec SVG existant. Cela signifie que votre contenu SVG ne doit pas nécessairement être créé avec Snap.svg, vous êtes également libre de manipuler des graphiques créés avec des outils comme Adobe Illustrator, Inkscape ou Sketch.

Here sont quelques exemples, que vous pouvez également trouver dans la section Démo de leur site Web.

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

ici vous pouvez voir la output

MISE À JOUR

si vous voulez en savoir plus à ce sujet l'exemple.

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

Source

2016-02-12 16:39:41

si vous regardez ici [lien] (http://promo.na.leagueoflegends.com/en/music-of-league/) tous les 'h3' tag a un svg dans ce que je suppose est généré automatiquement en quelque sorte et chaque svg a un identifiant aléatoire unique que je suis sûr que n'a pas été inséré manuellement. Je veux faire exactement la même chose sur mon site sans avoir à modifier manuellement chaque identifiant pour être unique. –

Vous utilisez snap.svg? –

désolé, je ne vous comprends pas. –

Comment générer un gradient de texte avec snap.svg ou svg.js

Répondre

Questions connexes