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标签，因为它可能提供更大的灵活性。

那就是说。它显示空白，因为它太大了。要获得控制权，请使用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"/>

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

Answer 2

虽然发光二极管的解决方案是一个很好的解决方案，但它没有响应。但是，由于他们的帮助，我能够弄明白。

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

现在svg出现了，但没有正确定位或响应。

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

我一起得到了我需要的解决方案。

感谢luminome！

加载到img标签的svg是空白的

2 个答案: