javascript - 加载到 img 标签中的 svg 为空

Question

我已经为此苦苦挣扎了几个小时。我从 html 中提取了 svg 并作为文件上传。然后我用新文件的 url 更新了 img 标签。但它是空白的。如果我直接在浏览器中打开网址，它是完美的，但在 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 标签，因为它可能提供更大的灵 active 。

也就是说。它显示为空白，因为它太大了。要获得控制权，请使用 SVG 作为 <img> 的背景图像。标签。将以下内容粘贴到您的 codepen 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"/>

需要对原始尺寸进行一些猜测。我希望这有帮助!