我已经为此苦苦挣扎了几个小时。我从 html 中提取了 svg 并作为文件上传。然后我用新文件的 url 更新了 img 标签。但它是空白的。如果我直接在浏览器中打开网址,它是完美的,但在 img 标签中,它是空白的。
这里它被加载到图像中: http://codepen.io/rgallison/pen/AXxrjW
<img src="https://sulfur-funmobility.netdna-ssl.com/media/permImageUploads/26730/4/6/6/9/MEEwMTA1MjQxZjlhXzE0Njg1NDM3MzY3NzhfMTNfMg.svg"/>
最佳答案
令人兴奋!我今天刚刚使用一些 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"/>
需要对原始尺寸进行一些猜测。我希望这有帮助!
关于javascript - 加载到 img 标签中的 svg 为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38386317/