Wie füge ich ein Symbol für großartige Schriftarten in mein SVG ein?

70

Ich habe eine SVG, die Bilder enthält:

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

Wie ersetze ich diese Zeile mit einem fantastischen Symbol für Schriftarten:

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

scheint nicht zu funktionieren, da das Bild nicht angezeigt wird.

css svg font-awesome user_78361084
quelle
Sie müssen die Glyphenelemente aus dem SVG erhalten.
David
1
Ich fand, dass diese Lösung am besten funktioniert: stackoverflow.com/questions/11243677/…
James Gentes

Antworten:

120

iist keine gültige SVG. Sie müssen das tatsächliche Zeichen angeben, das das Symbol anzeigt. Wenn Sie sich das Stylesheet von font awesome ansehen, werden Sie sehen ...

.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"; }

Dies sind jedoch Unicode-Zeichen, die für CSS codiert sind. In SVG müssten Sie die Syntax des Beispiels \f040in Folgendes ändern :

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

Und dann fügen Sie in Ihrem Stylesheet Folgendes hinzu:

svg text {
   font-family: FontAwesome;
}
Methode der Aktion
quelle
1
Um eine eigenständige SVG mit der eingebetteten Schriftart zu haben, müssten Sie die Schriftart als Daten-Uri einbetten. Wenn Sie die Details benötigen, öffnen Sie bitte eine neue Frage.
Methodofaction
1
Aus irgendeinem Grund funktioniert es bei mir nicht. Ich habe <g class="info-container" transform="translate(240,283)"><text class="svg-icon" x="-60" y="0">&amp;#xf040</text></g>und Stil, .svg-icon { font-family: FontAwesome; }aber es hilft nicht. FontAwesome.css ist an die Seite angehängt. Und das Symbol wird als Text angezeigt. Warum so?
Sedovav
28
@sedovav: Hier ist, was ich tun musste, damit es in d3.js funktioniert. stackoverflow.com/a/12883617/127203 . Grundsätzlich sollte der Text "\ uf040" sein.
Glenn
1
@Glenn u da echte MVP!
Joum
2
@Glenn - vielleicht solltest du die Antwort bearbeiten - \ u funktioniert, & x definitiv nicht.
Manassehkatz-Moving 2 Codidact
25

meine Demo

<!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'; });
WebBrother
quelle
3
Danke für das Beispiel mit Funktion (d) {return '\ uf083'; }, habe eine Weile gebraucht, um diese Lösung zu finden.
NPC
Wenn ich versuche, dieses SVG mit window.btoa zu speichern, wird eine Fehlermeldung angezeigt. Nicht erfasst DOMException:
Jerry
Vielen Dank, aber ich frage mich, was der Unterschied zwischen der Verwendung der HTML-Entität und der D3js- textFunktion zum Hinzufügen einer Zeichenfolge zu einem HTML-Element ist. wie '\ uf083' und & # xf083
Allen
Dies scheint nicht für alle Codes zu funktionieren \ uf185 \ uf186 \ uf763 \ uf7ad
HaBo