svgがオブジェクトとしてロードされました

Question

こんにちは、私はかなりjsに新しいです、そして、私はsvgがどのように動作するはずであるかをよく理解していません。

私はWebページで使用したいsvgファイルを生成しました。ファイルはかなり大きいので、別のファイルと置き換えたいので、インラインで貼り付けたくありません。 AFAIKの代わりに<object>の代わりに<object>をロードする方法もあります。<img>

しかし、私はこのようにロードする際に注意が必要です。

オブジェクトの上にさらにレイヤーを追加したい場合、そのうちの1つが描画順です。

私はこの順

blue circle svg 
object 
green circle svg 

の要素を記述する場合（これはオブジェクトによって押されたかのように）Iは、オブジェクトとオブジェクトの隣に緑色の円上に青い円を参照。バックグラウンドで最初に描かれた要素と、フロントで最後の要素を見ることが期待されます。

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> 
<circle id = "AGV01R" cx = "140" cy="100" r = "20" fill = "blue"></circle> 
</svg> 

<object type = "image/svg+xml" data="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg" class="plano" id="plano"></object> 

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> 
<circle id = "AGV02R" cx = "140" cy="100" r = "15" fill = "green"></circle> 
</svg> 

http://codepen.io/mrcasty/pen/egXaBj

Answer 1

あなたは彼らがトップ（オーバー）が互いに積層されているので、3つのHTML要素を配置したい場合は、最善の解決策は、また、「位置付け」であるコンテナでそれらをラップすることです。それによって、そのスタイルにはpositionというプロパティがあることを意味します。

通常、人々はposition: relativeを使用します。これは、コンテナエレメントの通常のフロー位置には影響しないためです。あなたの他の質問については

.container { 
 
    position: relative; 
 
} 
 

 
.container svg, 
 
.container object { 
 
    position:absolute; 
 
}

<div class="container"> 
 

 
    <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> 
 
    <circle id = "AGV01R" cx = "140" cy="100" r = "20" fill = "blue"></circle> 
 
    </svg> 
 

 
    <object type = "image/svg+xml" data="http://upload.wikimedia.org/wikipedia/commons/5/57/Weakness_of_Turing_test_1.svg" class="plano" id="plano"> 
 
</object> 
 

 
    <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> 
 
    <circle id = "AGV02R" cx = "140" cy="100" r = "15" fill = "green"></circle> 
 
    </svg> 
 
    
 
</div>

。 SVGのDOMを操作する場合は、インライン化するか、<object>を使用する必要があります。他に選択肢はありません。

ページの読み込み時に実行されるスクリプトを使用して外部ファイルを読み込んで自動的にインライン化する人がいる人もいます。 @アンドリュー・ウィレムスによって示唆されるように：// stackoverflowの：

Include SVG files with HTML, and still be able to apply styles to them?