div内にsvgをネストする

Question

埋め込まれたSVG三角形を作成しようとしていますが、これはのに配置されます。

これを達成するには、divにsvgをラップし、divを適切に配置します。ただし、svgは常にdivの外側にレンダリングされます。 div内でレンダリングされるsvg要素を取得するにはどうすればよいですか？

私が原因スクリプティングとテンプレート制約に <object>または <embed>タグを使用することはできません

黒三角は内部でなければなりませんサンプルHTML

<div id="container"> 
    <div id="inner_container"> 
     <svg height="6" width="6"> 
      <path d="M 0 6 L 3 0 L 6 6 L 0 6"/> 
     </svg> 
    </div> 
</div> 

そしてCSS

#container {width:100px; height:25px; border:1px solid green;} 
#container #inner_container {width:6px; height:6px; border:1px solid red;} 
#inner_container svg path {fill:black;} 

赤い矩形が外側にレンダリングされる

がJsFiddle

Answer 1

変更CSSセレクタでそれを参照してください、パスは単に要素ではありません描画されるだけsvg{...}を書いて、ここでfloat:left

を追加します。

svg {fill:black; float:left} 

DEMO

Answer 2

これを試してみてください：彼らは要素 'を含む' よう

#container { float: left; width: 100px; height: 25px; border: 1px solid green; } 
#container #inner_container { float: left; width: 6px; height: 6px; border: 1px solid red; } 
#inner_container svg { display: block; float: left; } 

私はそこにいくつかの山車を追加します。これを行うためのより良い、よりエレガントな方法がありますが、それはうまくいくはずです。

これが役に立ちます。 Mikey。

Answer 3

svg要素の名前空間を指定していないという問題があります。これはどのように動作します：

<div id="container"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"> 
    <path d="M 0 6 L 3 0 L 6 6 L 0 6"/> 
    </svg> 
</div>