Webページに埋め込まれたSVG画像が表示されません

空のWebページにSVG画像のセットを埋め込もうとしています。Webページに埋め込まれたSVG画像が表示されません

<html><head></head> 
<body> 
<img width="117px" src="img/icone/phone_hex034F84.svg" alt="image"> 
<img width="320px" src="img/illustrazioni/SHIPPER3.svg" alt="image"> 
</body> 
</html>

両方のファイルは、Illustratorによって生成された自己完結型のSVGです。

ブラウザで最初のレンダリングが実行されても、2番目の（SHIPPER3.svg）は実行されません。 http://104.155.112.173/land/img/illustrazioni/SHIPPER3.svg

私が質問（大きすぎる）に埋め込むことができないとしてあなたが前のリンクから完全なソースコードをダウンロードすることができます

はコードを参照してください。ただし、ここではプリアンブルだけを埋め込みます。

<?xml version="1.0" encoding="utf-8"?> 
 
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
 
<svg version="1.1" id="_x5B_SHIPPER1_x5D_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 
 
y="0px" viewBox="0 0 733.3 587.8" style="enable-background:new 0 0 733.3 587.8;" xml:space="preserve"> 
 
<style type="text/css"> 
 
    .st0{clip-path:url(#SVGID_2_);} 
 
    .st1{fill:#EDEDED;} 
 
    .st2{fill:#F2F2F2;}

私はhttp://www.freecodeformat.com/svg-editor.phpでSHIPPER3.svgをコピーして貼り付ける場合は、レンダリングしません。私はSketchで問題なく開けます。

私はSHIPPER3.svgをインラインsvgとしても埋め込むようにしましたが、同じ、再度、ショーはありません。

私には何が欠けていますか？あなたのSHIPPER3.svgで

出典

2016-09-26 Federico Innocenti

楕円を再配置やサイズ[尋ねる]を読んで行ってください。 – CBroe

ここに投稿してくださいSHIPPER3.svg xml – Tommy

*デバッグのヘルプを求める質問（「なぜこのコードは機能していませんか？」）には、目的の動作、特定の問題またはエラー、および質問自体に再現するのに必要な最短コードが含まれていなければなりません。明確な問題文がない質問は、他の読者にとって有用ではありません。参照：[mcve]を作成する方法。* – BSMP

いくつかの問題：

、すべてのトップレベルのグループ外の全体viewBox
クリップ経路#SVGID_2_もそれを隠し何style="display:none;"を持っていることクリップ経路によって切り出されると言われているクラスst0を持っています

参照してください：

<svg version="1.1" viewBox="0 0 733.3 587.8"> 
<style type="text/css"> 
    .st0{clip-path:url(#SVGID_2_);} 
    /* ... */ 
</style> 
<defs> 
    <ellipse id="SVGID_1_" cx="1085.6" cy="279.3" rx="251.8" ry="233.4"/> 
</defs> 
<clipPath id="SVGID_2_"> 
    <use xlink:href="#SVGID_1_" style="display:none;overflow:visible;"/> 
</clipPath> 
<g class="st0"> 
<!-- ... --> 
</g> 
</svg>

出典

2016-09-26 16:03:24 myf

さらに、私は上記の左のコメントには、次のと<clippath id='SVGID_2_'要素を置き換えたいことがあります。

<clipPath xmlns="http://www.w3.org/2000/svg" id="SVGID_2_"> 
    <ellipse xmlns="http://www.w3.org/2000/svg" id="SVGID_1_" cx="360" cy="290" rx="325" ry="260"/> 
</clipPath>

これは2つのことを行います。（0）、SVGID_1_要素へのリンクを、その内部にあるデータを直接挿入することによって削除します。（1）

出典

2016-09-26 16:23:45 enhzflep

Webページに埋め込まれたSVG画像が表示されません

答えて

関連する問題