SVG图像外部字体在<img/>标记中未加载，但内联或单独精细

时间：2017-09-19 18:25:02

标签： html image svg fonts google-font-api

我有一个svg图片，我使用img标记加载。当我查看htmo页面时，图像呈现，但外部字体无法加载。

但是，如果我right-click > "open image in new tab"，则图像会在新标签中正确显示。这发生在我的网络服务器上。我做了一个插件，看看我是否可以在我的网站代码中调试其他奇怪的东西。看到同样的问题，我感到非常惊讶。

http://plnkr.co/edit/8Gl0iX9Iv5tEl5SB0qle?p=preview

似乎当我在HTML文件中嵌入svg内联时， 正确呈现。

这些提供了问题的线索：

https://stackoverflow.com/a/29274699/188963

https://stackoverflow.com/a/15407892/188963

但是，由于我将字体直接导入SVG文件，我认为数据编码不会成为障碍。

除了在我的html文件中有一个巨大的二进制字符串之外，没有其他解决方法吗？

注意：我正在使用模板引擎（把手），所以我可能只是在html内嵌SVG代码模板......如果可行的话。

注意2：我尝试对数据进行编码，但这也没有用。

注3：我还尝试使用jquery插入SVG内联：

$.get('img/logo.svg',
  function(data, status)
  {
    //alert("Data: " + data + "\nStatus: " + status);
    //console.log(data);
    $('#logo').text(data);
  }, 
  'xml'
);

也不起作用。我在页面上显示[object XMLDocument]。

注3： @ccprog，这是我在Firefox中查看plunk的截图。我正在运行55.0.3 (64-bit)。你正在运行哪个版本？

enter image description here

HTML： 

<!DOCTYPE html>
<html>

  <body>
    <!-- Header -->
    <header id="logo" class="masthead">
      <img src="logo.svg" onerror="this.onerror=null; this.src='image.png'">
    </header>
  </body>

</html>

logo.svg的 

<!--  width="664" height="165" -->

<svg 
  xmlns="http://www.w3.org/2000/svg"
  id="logo-svg"
  viewBox="0 0 664 165"
  >

  <defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css?family=Bitter');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
    </style>
    <style> 

      :root {
      --graphics: #670309;
      --logo-text: #000;
      --services: #fff;
      --features: #914E1B;
      --logo-font: "Roboto Slab";
      }
      .house{
        fill: none;
        stroke: var(--graphics);
      }
      .bottom{
        fill: var(--graphics);
        stroke: var(--graphics);
      }
      .logo{
        fill: var(--logo-text);
        stroke: none;
        font-family: var(--logo-font);
        font-weight: 500;
      }
      .features{
        fill: var(--features);
        stroke: none;
      }
      .services{
        fill: var(--services);
        stroke: none;
      }
    </style>
  </defs>

  <!--  ROOF  -->
  <path d="M 50 100 L 140 50 L 230 100" 
    stroke-width = "15"
    stroke-linecap = "butt"
    stroke-linejoin = "miter"
    class = "house"
    />

  <!--  CHIMNEY  -->
  <path d="M 200 60 L 200 80" 
    stroke-width = "15"
    stroke-linecap = "butt"
    class = "house"
    />

  <!--  LEFT WALL -->
  <path d="M 70 90 L 70 150" 
    stroke-width = "12"
    stroke-linecap = "butt"
    stroke-linejoin = "miter"
    class = "house"
    />

  <!--  LEFT WALL -->
  <path d="M 210 90 L 210 150" 
    stroke-width = "12"
    stroke-linecap = "butt"
    stroke-linejoin = "miter"
    class = "house"
    />
  <!--  BOTTOM BAR AND TEXT -->
  <g transform="translate(64,140)">
    <svg width="600" height="25">
      <rect x="0" y="0" 
        width="600" 
        height="25"
        class="bottom"
        />
      <text x="50%" y="65%" 
        alignment-baseline="middle" 
        text-anchor="middle" 
        font-size="76%"
        font-weight="500"
        font-family="Roboto Condensed"
        letter-spacing="0.07em"
        class="services"
      >
        <tspan class="service">residential</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">commercial</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">buyer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">seller</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">warranty</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">expert-witness</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">sewer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">radon</tspan>
      </text>    
    </svg>  
  </g>


  <!--  HOUSE DETECTIVES LLC  -->
  <g transform="translate(280,35)">
    <text x="-50px" y="-10px"
      alignment-baseline="middle" 
      text-anchor="left"  
      font-size="30px" 
      transform="rotate(-90)"
      class="logo"
      >the</text>
    <text x="0" y="0" 
      alignment-baseline="middle" 
      text-anchor="left"  
      font-size="64px" 
      class="logo"
      >
        <tspan class="name" x="0" dy="50px">House</tspan>
        <tspan class="name" x="0" dy="50px">Detectives</tspan>
        <tspan class="name" dx="-10px" dy="0" font-size="24px">llc</tspan>
    </text>  
  </g>

  <!--  DOOR  -->
  <rect x="105" y="95" height="45" style="stroke-width:0.5; stroke:var(--features)" width="25" class="features"></rect>

  <!--  SINGLE WINDOW DEFINITION -->
  <defs>
    <rect id="window" x="0" y="0" width="10" height="10" class="features"></rect>
  </defs>

  <!--  WINDOWS  -->
  <g transform="translate(150,95)">
    <use href="#window" transform="translate(0 0)"/>
    <use href="#window" transform="translate(0 12)"/>
    <use href="#window" transform="translate(12 0)"/>
    <use href="#window" transform="translate(12 12)"/>
  </g>


</svg>

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

  <body>
    <!-- Header -->
    <header id="logo" class="masthead">
    
    <!--  width="664" height="165" -->

      <svg 
        xmlns="http://www.w3.org/2000/svg"
        id="logo-svg"
        viewBox="0 0 664 165"
        >

        <defs>
          <style type="text/css">
            @import url('https://fonts.googleapis.com/css?family=Bitter');
            @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
            @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
          </style>
          <style> 

            :root {
            --graphics: #670309;
            --logo-text: #000;
            --services: #fff;
            --features: #914E1B;
            --logo-font: "Roboto Slab";
            }
            .house{
              fill: none;
              stroke: var(--graphics);
            }
            .bottom{
              fill: var(--graphics);
              stroke: var(--graphics);
            }
            .logo{
              fill: var(--logo-text);
              stroke: none;
              font-family: var(--logo-font);
              font-weight: 500;
            }
            .features{
              fill: var(--features);
              stroke: none;
            }
            .services{
              fill: var(--services);
              stroke: none;
            }
          </style>
        </defs>

        <!--  ROOF  -->
        <path d="M 50 100 L 140 50 L 230 100" 
          stroke-width = "15"
          stroke-linecap = "butt"
          stroke-linejoin = "miter"
          class = "house"
          />

        <!--  CHIMNEY  -->
        <path d="M 200 60 L 200 80" 
          stroke-width = "15"
          stroke-linecap = "butt"
          class = "house"
          />

        <!--  LEFT WALL -->
        <path d="M 70 90 L 70 150" 
          stroke-width = "12"
          stroke-linecap = "butt"
          stroke-linejoin = "miter"
          class = "house"
          />

        <!--  LEFT WALL -->
        <path d="M 210 90 L 210 150" 
          stroke-width = "12"
          stroke-linecap = "butt"
          stroke-linejoin = "miter"
          class = "house"
          />
        <!--  BOTTOM BAR AND TEXT -->
        <g transform="translate(64,140)">
          <svg width="600" height="25">
            <rect x="0" y="0" 
              width="600" 
              height="25"
              class="bottom"
              />
            <text x="50%" y="65%" 
              alignment-baseline="middle" 
              text-anchor="middle" 
              font-size="76%"
              font-weight="500"
              font-family="Roboto Condensed"
              letter-spacing="0.07em"
              class="services"
            >
              <tspan class="service">residential</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">commercial</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">buyer</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">seller</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">warranty</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">expert-witness</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">sewer</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">radon</tspan>
            </text>    
          </svg>  
        </g>


        <!--  HOUSE DETECTIVES LLC  -->
        <g transform="translate(280,35)">
          <text x="-50px" y="-10px"
            alignment-baseline="middle" 
            text-anchor="left"  
            font-size="30px" 
            transform="rotate(-90)"
            class="logo"
            >the</text>
          <text x="0" y="0" 
            alignment-baseline="middle" 
            text-anchor="left"  
            font-size="64px" 
            class="logo"
            >
              <tspan class="name" x="0" dy="50px">House</tspan>
              <tspan class="name" x="0" dy="50px">Detectives</tspan>
              <tspan class="name" dx="-10px" dy="0" font-size="24px">llc</tspan>
          </text>  
        </g>

        <!--  DOOR  -->
        <rect x="105" y="95" height="45" style="stroke-width:0.5; stroke:var(--features)" width="25" class="features"></rect>

        <!--  SINGLE WINDOW DEFINITION -->
        <defs>
          <rect id="window" x="0" y="0" width="10" height="10" class="features"></rect>
        </defs>

        <!--  WINDOWS  -->
        <g transform="translate(150,95)">
          <use href="#window" transform="translate(0 0)"/>
          <use href="#window" transform="translate(0 12)"/>
          <use href="#window" transform="translate(12 0)"/>
          <use href="#window" transform="translate(12 12)"/>
        </g>


      </svg>
    
    </header>
  </body>

</html>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题