Image DataURI未显示在网站中，但显示在控制台中

我遇到了一个奇怪的问题，svg中的图像没有渲染，但是，我可以在控制台中看到非常好的图像。这个问题可以在JSFIDLE中重现

我从下面的示例中删除了实际的dataUri，以避免对页面发送垃圾邮件

<svg id="svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="9in" height="3.9375in" viewBox="0 0 9 3.9375">
  <!--Tally -->
  <!--Quote -->
  <!--Line ID -->
  <!--Background white-->
  <!--User -->
  <g transform="rotate(0 4.5 1.96875)" clip-path="url(#clip)">
        <!--Background: white.png-->
        <svg preserveAspectRatio="none" x="0" y="0" width="9" height="100%" viewBox="0 0 1000 750">
          <image xlink:href="data:image/png;base64, " x="0" y="0" width="100%" height="100%" transform="rotate(0 375 500)"/>
        </svg>
        <!--Background: Halloween_Skeleton.png-->
        <svg preserveAspectRatio="none" x="0" y="0" width="9" height="100%" viewBox="0 0 4526 2727">
          <image xlink:href="data:image/png;base64," x="0" y="0" width="100%" height="100%" transform="rotate(0 1363.5 2263)"/>
        </svg>
  </g>

  <defs>
      <clipPath id="clip">
        <use xlink:href="#shape"/>
      </clipPath>
    <style type="text/css">
    </style>
  </defs>
</svg>

看起来DataURI是正确的，那么发生了什么

---

您的JSFIDLE是一个空白的白页？您正在使用的缩放/平移/视图框已将图像放置在不在可视区域的位置。也许最好重新开始，一次构建一个你想要的场景，确保在应用每个元素时图像都是可见的。@RobertLongson，我认为这也是问题所在，但我对尺寸做了很多调整，无法将其显示出来。思想？@jqueryHtmlCSS，是的，这就是问题所在。但是图像在控制台中是可见的！我摆弄了它，确实让它显示出了我想需要更多的毅力。你的JSFIDLE是一个空白的白色页面？你正在使用的缩放/翻译/视图框已经将图像放置在了不可查看的区域。也许最好重新开始，一次构建一个你想要的场景，确保在应用每个元素时图像都是可见的。@RobertLongson，我认为这也是问题所在，但我对尺寸做了很多调整，无法将其显示出来。思想？@jqueryHtmlCSS，是的，这就是问题所在。但是图像在控制台中是可见的！我摆弄它，确实让它显示出更多的坚持是必要的，我想。