imgタグにロードされたSvgが空白です

Question

私はこれを何時間も苦労してきました。私はHTMLからsvgを抽出し、ファイルとしてアップロードしました。私は新しいファイルへのURLでimgタグを更新しました。しかし、それは空白です。私はブラウザで直接URLを開いて、その完璧な、しかし、imgタグで、その空白。それは、画像をintロードされ、ここで 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

luminomeのソリューションはうまくいきましたが、反応しませんでした。しかし、彼らの助けによって、私はそれを理解することができました。

まず、画像が大きすぎて画像が表示されませんでした。私は私のsvgに変換属性を持っていたので、私はそれを取り除いた。

ここで、svgが表示されましたが、正しく配置されていないか応答がありません。

第2に、応答するようにsvgにviewBoxを追加する必要がありました。

私は必要な解決方法を持っています。

感謝の光！

Answer 2

エキサイティング！私は今日、いくつかのSVGに取り組んでいました。あなたのSVGにOBJECTタグを使うことを検討するほうが、柔軟性が増すはずです。

と言われています。それは大きすぎるので空白になります。コントロールを取得するには、<img>タグの背景画像としてSVGを使用します。あなたの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"/>

それは元のサイズに関するいくつかの推測を取りました。私はこれが助けて欲しい！