mam SVG zawiera obrazy:Jak umieścić w mojej svg ikonę świetnej czcionki?

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

Jak zastąpić tę linię w/font wspaniałej ikony:

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

nie wydają się działać jako obraz nie pokazują w górę.

Źródło

2013-02-20 Marissa Levy

Musisz zdobyć Glyp h elementy z svg. – David

i nie jest prawidłowym SVG. Musisz podać rzeczywisty znak, który wyświetla ikonę. Jeśli spojrzeć na font awesome's stylesheet widać ...

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

Ale to są kodowane znaki Unicode dla CSS. W SVG trzeba byłoby zmienić składnię przykład \f040 do:

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

a potem w swoim arkuszu stylów dodać:

svg text { 
    font-family: FontAwesome; 
}

Źródło

2013-02-20 17:41:43 Duopixel

działa idealnie. dzięki! –

@Duopixel To rozwiązanie działa tylko wtedy, gdy svg jest częścią witryny, gdzie ładowane jest FontAwesome (css), prawda? Czy istnieje sposób, aby dołączyć pojedynczą czcionkę do "samodzielnego" pliku svg? Ten plik powinien być czytelny "offline" bez ładowania plików css z serwera WWW. Podobnie jak pakiet: definicja svg i FontAwesome w jeden plik svg. –

Aby mieć oddzielną wersję SVG z osadzoną czcionką, musisz osadzić czcionkę jako uri danych, jeśli potrzebujesz szczegółów, otwórz nowe pytanie. – Duopixel

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

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'; });

Źródło

2015-01-23 04:54:32 WebBrother

Dzięki za przykład z funkcją (d) {return "\ uf083"; }, zajęło mi trochę czasu, aby znaleźć to rozwiązanie. – NPC

Kiedy próbuję zapisać ten plik SVG przy użyciu window.btoa, otrzymuję komunikat o błędzie ** Uncaught DOMException: Nie udało się wykonać 'btoa' w 'Window': Ciąg do zakodowania zawiera znaki spoza zakresu Latin1. (...) * * – Jerry

Dzięki, ale zastanawiam się, jaka jest różnica między używaniem encji HTML a funkcją 'text' D3js do dodawania łańcucha do elementu HTML? jak "\ uf083" i & # xf083 – Allen

Jak umieścić w mojej svg ikonę świetnej czcionki?

Odpowiedz

my Demo

Powiązane problemy