czcionki niestandardowe nie są wyświetlane w SVG wzór używany jako tło wizerunku

Question

pracuję z wzór SVG, który korzysta z niestandardowej czcionki, tak aby wykorzystać tę wzór jako tapetę na stronie HTML.

Wszystko świadczy dobrze w Chrome i Safari, ale zaczyna się robić śmieszne Firefox:

• Firefox renderuje SVG wraz z tekstem niestandardowych czcionek dobrze podczas otwierania samego pliku SVG (do tej pory tak dobry !);
• Jednak Firefox nie renderowania czcionek niestandardowych już kiedy ten sam plik SVG służy jako tło dla elementu HTML (!)

spędziłem godziny próbuje wyizolować problem i świeża para oczu byłaby mile widziana.

Kliknij tutaj, aby wyświetlić minimal demo of the issue.

Oto co mam w skrócie:

CSS:

@import url(http://fonts.googleapis.com/css?family=Indie+Flower); 

body { 
    background: url(pattern-google.svg); 
} 

plik SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" width="200"> 
    <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style> 
    <defs> 
     <!-- Geometry --> 
     <g> 
      <rect id="square" x="0" y="0" width="200" height="200" /> 
     </g> 

     <!-- Patterns with Text --> 
     <pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" text-anchor="middle" font-size="20" font-family="Indie Flower, sans-serif" style="font-family: Indie Flower, sans-serif;"> 
      <rect x="00" y="00" width="40" height="40" fill="transparent" /> 
      <text x="00" y="00" fill="#777">S</text> 
      <text x="40" y="00" fill="#777">S</text> 
      <text x="20" y="20" fill="#777">S</text> 
      <text x="00" y="40" fill="#777">S</text> 
      <text x="40" y="40" fill="#777">S</text> 
     </pattern> 
    </defs> 

    <!-- Graphics --> 
    <use xlink:href="#square" transform="translate(0, 0)" fill="url(#pattern)"/> 
</svg> 

Sam HTML nie ma znaczenia, ale Połączyłem to poniżej. Nie wygenerowałem jsfiddle, ponieważ nie mogłem tam umieścić pliku SVG.

(Poza demonstracją, aplikacja w świecie rzeczywistym polega na tym, że chcę używać niestandardowej czcionki do wyświetlania symboli fonetycznych. (Jako obraz tła, aby pomóc ludziom w ich uczeniu się.) Wykonanie tego w SVG oszczędza mi kłopotów eksportować do bitmapy za każdym razem, gdy dokonuję zmiany w projekcie.)

Dzięki za pomoc.

Answer 1

Używasz SVG w kontekście obrazu. To znaczy. za pomocą znacznika html <img>, znacznika SVG <image> lub w twoim przypadku jako obrazu tła.

W przeglądarce Firefox (i prawdopodobnie w innych aplikacjach w pewnym momencie) obrazy muszą składać się tylko z jednego pliku. Wszelkie dane zewnętrzne dotyczące pliku obrazu (pattern-google.svg) są ignorowane. Jeśli wyświetlisz SVG bezpośrednio, to dane zewnętrzne zostaną załadowane/wykorzystane.

Więc co można zrobić ...

załadować dane jako data URI. To znaczy. base64 koduje http://fonts.googleapis.com/css?family=Indie+Flower, ale przeczytaj ostatni akapit przed wykonaniem tego, a następnie przyklej te dane bezpośrednio do pliku svg.

więc import będzie wyglądać następująco ...

@import url('data:text/css;base64,whatever the base 64 encoded data looks like...') 

bądź ostrożny, ponieważ http://fonts.googleapis.com/css?family=Indie+Flower sam ma danych zewnętrznych tak, że same dane sama musi być zakodowany jako danych URI. To znaczy.musisz przejść całą drogę przez króliczą dziurę. I zmień ten plik, tak jak to nakreśliłem poniżej.

@font-face { 
    font-family: 'Indie Flower'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Indie Flower'), local('IndieFlower'), url(**convert this file to a data URI too before you convert the whole file to a data URI**) format('woff'); 
} 

Po wykonaniu tej czynności można zakodować cały plik jako identyfikator URI danych i zaimportować go.

Więc powtórzyć krok po kroku ...

1. Convert http://themes.googleusercontent.com/static/fonts/indieflower/v5/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff do danych URI
2. Wymień http://fonts.googleapis.com/css?family=Indie+Flower z wersji, która ma dane URI z kroku 1
3. Konwersja pliku w kroku 2 do danych URI
4. @import URI danych z etapu 3

Istnieje wiele o f witryn internetowych, które utworzą identyfikatory URI danych.