加载到 img 标签中的 Svg 为空

Question

我已经为此苦苦挣扎了几个小时。 我从 html 中提取了 svg 并作为文件上传。 然后，我使用新文件的网址更新了一个 img 标签。 但它是空白的。 如果我直接在浏览器中打开 url，它是完美的，但在 img 标签中，它是空白的。

这是有问题的图片：https://sulfur-funmobility.netdna-ssl.com/media/permImageUploads/26730/4/6/6/9/MEEwMTA1MjQxZjlhXzE0Njg1NDM3MzY3NzhfMTNfMg.svg

这里它被加载到图像中：http://codepen.io/rgallison/pen/AXxrjW

<img src="https://sulfur-funmobility.netdna-ssl.com/media/permImageUploads/26730/4/6/6/9/MEEwMTA1MjQxZjlhXzE0Njg1NDM3MzY3NzhfMTNfMg.svg"/>

Answer 1

令人兴奋！我今天刚刚使用了一些 SVG，并建议考虑为您的 SVG 使用 OBJECT 标签，因为它可能会提供更大的灵活性。

可是。它显示为空白，因为它太大了。要获得控制权，请使用 SVG 作为 <img> 标记的背景图像。将以下内容粘贴到代码笔 css 窗口中：

img {
  border: 2px solid black;
  background-image: url('https://sulfur-funmobility.netdna-ssl.com/media/permImageUploads/26730/4/6/6/9/MEEwMTA1MjQxZjlhXzE0Njg1NDM3MzY3NzhfMTNfMg.svg');
  background-attachment: fixed;
  background-position: -800px -400px; 
  background-repeat: no-repeat;
  background-size: 2000px 2000px;
}

<img src="" width="300" height="150"/>

对原始大小进行了一些猜测。我希望这有帮助！

Answer 2

虽然luminome的解决方案是一个很好的解决方案，但它没有响应。 然而，由于他们的帮助，我能够弄清楚。

首先，图像没有显示，因为它太大了。 我的 svg 上有一个转换属性，所以我把它取下来了。

现在 svg 出现了，但位置不正确或响应不正确。

其次，我需要向 svg 添加一个 viewBox 以使其响应。

在一起，我就有了我需要的解决方案。

谢谢光芒！