Tengo una svg que incluye imágenes:

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

¿Cómo puedo reemplazar la línea w/una fuente impresionante icono:

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

no parece funcionar como la imagen no se muestra.

InformationsquelleAutor Brent | 2013-02-20

2 Comentarios

  1. 114

    i no es válido SVG. Es necesario incluir el carácter real que se muestra el icono. Si usted echa un vistazo a fuente impresionante de la hoja de estilos que se vea…

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

    Pero esos son los caracteres unicode codificado para la CSS. En SVG sería necesario para cambiar la sintaxis de ejemplo \f040 a:

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

    Y, a continuación, en su hoja de estilos agregar:

    svg text {
       font-family: FontAwesome;
    }
    • funciona perfecto. thx!
    • Esta solución sólo funciona, si el svg es parte de la web, donde FontAwesome (css) se cargará, a la derecha? Hay una manera, para incluir a un solo tipo de letra en «stand-alone» archivo svg? Este archivo debe ser legible «fuera de línea», sin la carga de los archivos css de la web. Como un paquete: svg y FontAwesome definición en un archivo svg.
    • Tener un independiente SVG con la fuente incrustada sería necesario incorporar la fuente de datos uri, si usted necesita los detalles, por favor abra una nueva pregunta.
    • He añadido una nueva pregunta: stackoverflow.com/questions/18225954/… tal vez usted tiene una idea de cómo resolverlo
    • Por alguna razón no funciona para mí. He <g class="info-container" transform="translate(240,283)"><text class="svg-icon" x="-60" y="0">&amp;#xf040</text></g> y estilo .svg-icon { font-family: FontAwesome; }, pero no ayuda. FontAwesome.css está asociado a la página. Y el icono se muestra como texto. Por qué así?
    • lo que tenía que hacer para que funcione en d3.js. stackoverflow.com/a/12883617/127203. Básicamente, el texto debe ser «\uf040».
    • u da verdadero MVP!
    • No se olvide de un semi-colon después de que el html escapó de la cadena de caracteres? Así: <g><text x="0" y="0">&#xf040;</text></g>
    • sí, semi-colon debe ser añadido, no sé por qué esto no era notado antes.
    • tal vez usted debe editar la respuesta – \u obras, &x, definitivamente no.

  2. 21

    mi 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'; }); 
    • Gracias por el ejemplo con la función(d) { return ‘\uf083’; }, me tomó un tiempo para encontrar esta solución.
    • Cuando intento guardar este svg utilizando la ventana.btoa estoy recibiendo un error Uncaught DOMException: no se pudo ejecutar ‘btoa’ en ‘la Ventana’: La cadena ser codificada contiene caracteres fuera de la Latin1 gama.(…)
    • Gracias, pero me pregunto cuál es la diferencia entre el uso de HTML entidad y D3js text función para agregar cadena a un elemento HTML? como ‘\uf083’ y &#xf083

Dejar respuesta

Please enter your comment!
Please enter your name here