Comment puis-je inclure une police génial icône dans mon fichier svg?

J'ai un svg qui comprend des images:

<g><image id="myImage" class="myClass" x="12" y="15" width="10" height="10" xlink:href="/images/pic.png"/></g>

Comment puis-je remplacer cette ligne w/une police génial icône:

<g><i class="icon icon-cloud-download" x="12" y="15" width="10" height="10"></i></g>

ne semble pas fonctionner, car l'image ne s'affiche pas.

InformationsquelleAutor Brent | 2013-02-20
  1. 111

    i n'est pas valide SVG. Vous devez inclure le caractère réel que l'icône s'affiche. Si vous jetez un oeil à police impressionnant de la feuille de style, vous verrez...

    .icon-group:before                { content: "\f0c0"; }
.icon-link:before                 { content: "\f0c1"; }
.icon-cloud:before                { content: "\f0c2"; }
.icon-beaker:before               { content: "\f0c3"; }
.icon-cut:before                  { content: "\f0c4"; }
.icon-copy:before                 { content: "\f0c5"; }
.icon-paper-clip:before           { content: "\f0c6"; }
.icon-save:before                 { content: "\f0c7"; }
.icon-sign-blank:before           { content: "\f0c8"; }
.icon-reorder:before              { content: "\f0c9"; }
.icon-list-ul:before              { content: "\f0ca"; }
.icon-list-ol:before              { content: "\f0cb"; }
.icon-strikethrough:before        { content: "\f0cc"; }
.icon-underline:before            { content: "\f0cd"; }
.icon-table:before                { content: "\f0ce"; }

    Mais ceux sont des caractères unicode codés pour CSS. En SVG, vous devrez modifier la syntaxe de l'exemple \f040 à:

    <g><text x="0" y="0">&#xf040;</text></g>

    Et puis dans votre feuille de style d'ajouter:

    svg text {
   font-family: FontAwesome;
}
    • fonctionne parfaitement. thx!
    • Cette solution ne fonctionne que si le svg est une partie du site, où FontAwesome (css) est chargé, droite? Est-il un moyen, pour inclure une police unique dans un "stand-alone" fichier svg? Ce fichier doit être lisible "hors ligne" sans charger les fichiers css à partir du serveur web. Comme un bundle: svg et FontAwesome définition dans un fichier svg.
    • Pour avoir autonome SVG avec la police intégrée, vous devrez intégrer la police en tant que données d'uri, si vous avez besoin de détails, veuillez ouvrir une nouvelle question.
    • J'ai ajouté une nouvelle question: stackoverflow.com/questions/18225954/... peut-être que vous avez une idée, comment le résoudre
    • Pour une raison quelconque, il ne fonctionne pas pour moi. J'ai <g class="info-container" transform="translate(240,283)"><text class="svg-icon" x="-60" y="0">&amp;#xf040</text></g> et le style .svg-icon { font-family: FontAwesome; } mais il n'aide pas. FontAwesome.css est attaché à la page. Et l'icône s'affiche comme du texte. Pourquoi donc?
    • ce que j'avais à faire pour le faire fonctionner dans d3.js. stackoverflow.com/a/12883617/127203. Fondamentalement, le texte doit être "\uf040".
    • u da real MVP!
    • N'avez-vous pas oublié un point-virgule après le html échappé à la chaîne de caractères? Donc: <g><text x="0" y="0">&#xf040;</text></g>
    • oui, le point-virgule doit être ajouté, pas sûr de savoir pourquoi cela n'a pas été remarqué avant.
    • peut-être que vous devriez modifier la réponse - \u œuvres, &x certainement ne pas.

    InformationsquelleAutor methodofaction
  2. 21

    mon Démo

    <!DOCTYPE html>
<html>
  <head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div title="Code: 0xe800" class="the-icons span3">

      <H3>Standard using:</H3>
    <i class="fa fa-camera-retro fa-4x"></i>
    <br>
      <H3>SVG using:</H3>
  </body>
</html>

    JS

    var svg = d3.select("body")
  .append("svg")
  .attr("width", 250)
  .attr("height", 250);

svg.append("text")
  .attr("x",0)
  .attr("y",70)
  .attr("font-family","FontAwesome")
  .attr('font-size', function(d) { return '70px';} )
  .text(function(d) { return '\uf083'; });
    • Merci pour l'exemple avec la fonction function(d) { return "\uf083'; }, m'a pris du temps pour trouver cette solution.
    • Quand j'essaie d'enregistrer ce fichier svg à l'aide de la fenêtre.btoa j'obtiens une erreur Uncaught DOMException: Échec de l'exécution de 'btoa" sur "Fenêtre": La chaîne contient des caractères codés à l'extérieur de la Latin1 gamme.(...)
    • Merci, mais je me demande quelle est la différence entre l'utilisation d'entité HTML et D3js text fonction pour ajouter une chaîne à un élément HTML? comme '\uf083' et &#xf083
    InformationsquelleAutor WebBrother