Question

我是SVG新手。显而易见的是image不可见的原因？

<svg width="480" height="320" class="canvas">
  <g transform="translate(60,31.999999999999993)" width="372" height="248" class="main">
    <rect width="372" height="248" class="bgc8fcd31365f041fdba82105b45bba1541" fill="transparent"></rect>
    <g transform="translate(0,248)" class="axesc8fcd31365f041fdba82105b45bba1541 x axis">
      <g class="tick" transform="translate(338.1028735788505,0)" style="opacity: 1;">
        <line y2="6" x2="0"></line>
        <text y="9" x="0" dy=".71em" style="text-anchor: middle;">-200</text>
      </g>
      ... more like <g>...</g> above ...
      <path class="domain" d="M-6,0H0V248H-6"></path>
    </g>
    <clipPath id="clipc8fcd31365f041fdba82105b45bba1541">
      <rect x="0" y="0" width="372" height="248"></rect>
    </clipPath>
    <g clip-path="url(#clipc8fcd31365f041fdba82105b45bba1541)">
      <image x="0" y="0" width="300" height="300" src="data:image/png;base64,[redacted very long strict of data characters]"></image>
    </g>
  </g>
</svg>

图像来源很好：使用Chrome的Inspect Element功能，我可以在一个单独的标签中单独查看。

Answer 1

SVG <image> element与HTML one略有不同，因为src替换属性xlink:href。

请尝试以下代码：

<image x="0" y="0" width="300" height="300" xlink:href="data:image/png;base64,[redacted very long strict of data characters]" />

使用相应定义的xlink命名空间。

xmlns:xlink= "http://www.w3.org/1999/xlink"

SVG图像未显示，可能模糊不清

1 个答案: