SVG文件中的嵌入字体不会呈现

时间:2018-04-03 12:11:03

标签: svg google-webfonts

我在svg文件中使用google webfonts,但这些字体没有呈现,文字在图片中显示为空,如给定文件所示



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg>
<svg ng-show="vm.isFrontView" class="md-whiteframe-z2 front-card" id="front-card" width="558" height="372" aria-hidden="false" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Created with Snap</desc>
  <defs>
    <style>
@import url("https://fonts.googleapis.com/css?family=Bungee|Caveat");
    </style>
  </defs>
  <rect x="0" y="0" width="1674" height="1116" style="stroke-width: 0;" fill="rgba(255,255,255,0)" id="front-card-background"></rect>
  <g transform="matrix(1,0,0,1,56.8,19.8852)" style="opacity: 0.13;">
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://localhost:44319//DesignerImages/2.PNG" preserveAspectRatio="none" x="0" y="0" width="446.40000000000003" height="229.7049180327869"></image>
    <rect x="0" y="0" width="446.3999938964844" height="229.70492553710938" stroke="#b1b1b1b0" fill="rgba(0,0,0,0)" style="visibility: hidden; stroke-width: 1; stroke-dasharray: 10, 5;"></rect>
  </g>
  <g transform="matrix(0.6398,0,0,0.6398,185.791,39.791)" style="opacity: 0.35;">
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://fiverr-res.cloudinary.com/images/t_medium7,q_auto,f_auto/gigs/97244336/original/46de9921aa6d34e283b0f04c586d1ca71281f52f/do-minimalist-logo-design.jpg" preserveAspectRatio="none" x="0" y="0" width="297.6" height="297.6"></image>
    <rect x="0" y="0" width="297.6000061035156" height="297.6000061035156" stroke="#b1b1b1b0" style="visibility: hidden; stroke-width: 1; stroke-dasharray: 10, 5;" fill="rgba(0,0,0,0)"></rect>
  </g>
  <g transform="matrix(1,0,0,1,117,240)">
    <foreignObject id="text-107" width="329" height="61">
      <pre id="text-107-content" style="width:auto; height:auto;font-size:30px;text-align:center;color:undefined;overflow:hidden;outline:none; border:none; user-select:none;background-color:transparent;font-family:'Bungee', cursive;">Ahmed El-basheq</pre>
    </foreignObject>
    <rect x="0" y="0" width="244" height="61" stroke="#b1b1b1b0" fill="rgba(0,0,0,0)" style="visibility: hidden; stroke-width: 1; stroke-dasharray: 10, 5;"></rect>
  </g>
  <g transform="matrix(1,0,0,1,201,289)">
    <foreignObject id="text-43" width="177" height="61">
      <pre id="text-43-content" style="width:auto; height:auto;font-size:30px;text-align:center;color:undefined;overflow:hidden;outline:none; border:none; user-select:none;background-color:transparent;font-family:'Caveat', cursive;">Simply imagine</pre>
    </foreignObject>
    <rect x="0" y="0" width="150" height="61" stroke="#b1b1b1b0" fill="rgba(0,0,0,0)" style="visibility: hidden; stroke-width: 1; stroke-dasharray: 10, 5;"></rect>
  </g>
</svg>
&#13;
&#13;
&#13;

0 个答案:

没有答案