Question

以下是plunkr：

<body>
<svg height=“200” width=“200”>
    <g id="elem1" class="ng-scope ng-isolate-scope">
        <g x="0" id="txt" y="0" height="333.3333333333333" width="255" fill-opacity="1" fill="#aa0000" stroke="#000000" stroke-opacity="1" frames="" mv="true">
            <image x="0" y="0" height="333.3333333333333" width="255" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/png;base64,URI"></image>
        </g>
    </g>
</svg>

这是两个嵌套元素中的svg图像。第二个有一堆参数的原因是因为它是在从Angular指令编译之后输出的。我在jsfiddle中的html是我在谷歌浏览器中收到的。该图像从base-64 URI读取。但它无法加载。这可能是非常愚蠢的事情，因为我也是SVG的新手。

Answer 1

因为您没有为svg宽度/高度使用正确的引号：

<svg height=“200” width=“200”>

而不是

<svg height="200" width="200">

以下是您更新的小提琴：http://jsfiddle.net/om5bqh92/

Answer 2

我更新了你的小提琴：http://jsfiddle.net/Rathunter/6L7utsoe/1/

你在

上用一些奇怪的引号设置SVG

 <svg width="200" height="200"> </svg>

这似乎打破了你的榜样。

希望这有帮助！

Answer 3

试试这个SVG标题，用<div>包围，使用CSS控制宽度和高度（也可以在preserveAspectRatio中读取，以找到适合您设计的最佳选项）。

<body>
  <div style="width: 200px; height: 200px;">

    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
    ...
    </svg>
  </div>
</body>

为什么svg中的这个图像没有显示？

3 个答案: