11

ページ上のどこかに配置される塗りつぶされた svg 三角形を作成しようとしています。

これを達成するために、svg を div でラップし、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でそれを見る

4

3 に答える 3

11

cssセレクターを変更し、書き込み専用svg{...}にして追加float:left

ここで、パスは要素ではなく単なる描画です。

svg {fill:black; float:left}

デモ

于 2013-03-18T10:19:44.077 に答える
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; }

そこにいくつかのフロートを追加して、要素が「含まれる」ようにします。これを行うためのより優れたエレガントな方法がありますが、うまくいくはずです。

お役に立てれば。マイキー。

于 2013-03-18T10:29:30.963 に答える
-1

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>
于 2014-05-26T10:29:36.133 に答える