Не подключается шрифт к SVG фигуре

294
06 октября 2017, 16:37

Прописываю фигуру через img путь к svg файлу. В нём прописан стиль и путь шрифта, однако шрифт всё равно остаётся дефолтным. Если прописывать сразу кодом на страницу, то всё работает как нужно. Вопрос, возможно ли в отдельном svg файле использовать свой шрифт?

<svg id="Группа_1" data-name="Группа 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 156.89 58.89"> 
  <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> 
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01        "> 
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> 
      <rdf:Description rdf:about=""/> 
   </rdf:RDF> 
</x:xmpmeta> 
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                                                                                                     
                            
<?xpacket end="w"?></metadata> 
<defs> 
    <style type="text/css"> 
 
 
    @font-face { 
        font-family: Exo2;  
        src: url(fonts/Exo2-SemiBold.ttf);  
    } 
 
      .cls-1 { 
        fill: none; 
        stroke: #fff; 
        stroke-width: 1.89px; 
        filter: url(#filter); 
      } 
 
      .cls-2, .cls-3, .cls-4 { 
        fill: #fff; 
      } 
 
      .cls-2 { 
        fill-rule: evenodd; 
      } 
 
      .cls-4 { 
        font-size: 13.731px; 
        text-anchor: middle; 
        font-family: Exo2; 
        text-transform: uppercase; 
      } 
    </style> 
 
  </defs> 
  <g style="fill: none; filter: url(#filter)"> 
    <rect id="Прямоугольник_скругл._углы_1" data-name="Прямоугольник, скругл. углы 1" class="cls-1" x="4.945" y="2.945" width="146" height="48" rx="5" ry="5" style="stroke: inherit; filter: none; fill: inherit"/> 
  </g> 
  <use xlink:href="#Прямоугольник_скругл._углы_1" style="stroke: #fff; filter: none; fill: none"/> 
  <path id="Фигура_2_копия" data-name="Фигура 2 копия" class="cls-2" d="M536.006,582.421l0.845-1.412,9.143,6.784-0.845,1.411Zm9.143,5.372,0.845,1.411-9.143,6.784-0.845-1.411Zm-1.143-5.372,0.845-1.412,9.143,6.784-0.845,1.411Zm9.143,5.372,0.845,1.411-9.143,6.784-0.845-1.411Z" transform="translate(-418.055 -561.055)"/> 
  <rect id="Прямоугольник_2" data-name="Прямоугольник 2" class="cls-3" x="105.945" y="8.945" width="2" height="36"/> 
  <text id="Услуги" class="cls-4" style="font-family: 'Exo2'" transform="translate(48.945 33.772) scale(1.165)">  Услуги</text> 
</svg>

READ ALSO
Едет верстка на iphone

Едет верстка на iphone

Сверстал лендинг, ссылка на rghost

377
Можно ли сделать такого вида кнопку?

Можно ли сделать такого вида кнопку?

Можно ли инструментами react-a и css сделать подобную кнопку, используя RaisedButton из material-ui?

232
Наложение блоков друг на друга

Наложение блоков друг на друга

Здравствуйте! На странице есть блок который залезает под верхний блок

332
в input на IOS не виден текст при вводе

в input на IOS не виден текст при вводе

При вводе текста в input на любом устройстве IOS не виден текстНужно нажать на поле ввода два раза, тогда появляется введенный текст

387