SVG要素が画面に表示されず、コンソールに要素が追加されています。

Question

次のSVGコードがあります。 idが "nestedsvg"のSVGがHTMLに追加されています。コンソール上で見ることができます。しかし、画面には表示されません。私は99のz-indexを割り当てようとしましたが、それでも見えません。どこが間違っていますか？

<svg data="BusinessRoleFigure" x="144" y="95" 
width="128" height="66" id="outer" style="position: relative;"> 

<rect x="0" y="0" width="100%" height="100%" 
stroke="rgb(178,178,126)" stroke-width="1" fill="rgb(255,255,181)" 
style="position: relative;"></rect> 

<svg id="nestedsvg" x="100%" height="100" width="50"> 
<rect x="-50" rx="5" ry="5" width="20" height="10" stroke="black" 
stroke-width="1" fill="black" z-index="99"></rect> 
</svg> 

<circle cx="118" cy="13" r="5" fill="none" 
stroke-linejoin="round" stroke="black" 
z-index="1" stroke-width="1"></circle> 

</svg> 

Jsfiddle：http://jsfiddle.net/MxHPq/145/

Answer 1

あなたが描画されている長方形は、ネストされたSVGビューポートの外にあるためです。

SVGの幅と高さが100x50であり、（-50,0）に20x10の長方形を描画しています。つまり、矩形は（-50,0）から（-30,10）の範囲をカバーしています。それは見えません。デフォルトでは、ネストされたSVGビューポートの外側にあるオブジェクトは表示されません。

これを修正するには、2つの方法があります。

1. は、ビューポートの外のオブジェクトが見えることを確認します。これは、ネストされたSVGにoverflow="visible"を設定することで実行できます。

<svg data="BusinessRoleFigure" x="144" y="95" width="128" height="66" id="outer"> 
 
    <rect x="0" y="0" width="100%" height="100%" stroke="rgb(178,178,126)" stroke-width="1" fill="rgb(255,255,181)"></rect> 
 
    <svg id="nestedsvg" x="100%" height="100" width="50" overflow="visible"> 
 
    <rect x="-50" rx="5" ry="5" width="20" height="10" stroke="black" stroke-width="1" fill="black"></rect> 
 
    </svg> 
 
    <circle cx="118" cy="13" r="5" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></circle> 
 
</svg>

は、SVGビューポート内の矩形を移動し、矩形が同じ場所で終わるようにSVGを再配置します。

なぜネストされたSVGをx="100%"にしたいのか分かりませんが、この解決策を使用する場合は、SVGを変更する必要があります。

<svg data="BusinessRoleFigure" width="128" height="66" id="outer"> 
 
    <rect x="0" y="0" width="100%" height="100%" stroke="rgb(178,178,126)" stroke-width="1" fill="rgb(255,255,181)"></rect> 
 
    <svg id="nestedsvg" x="78" height="100" width="50"> 
 
    <rect x="0" rx="5" ry="5" width="20" height="10" stroke="black" stroke-width="1" fill="black"></rect> 
 
    </svg> 
 
    <circle cx="118" cy="13" r="5" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></circle> 
 
</svg>

元のSVGについてのいくつかの他の注意事項：ルート<svg>要素に

1. xとy座標は効果がありません。
2. z-indexは現在SVGで意味を持ちません。これは、今後のSVG2標準では変更される可能性があります。
3. position: relativeは、SVGでは意味を持ちません。

私は変更された例からこれらのものを削除しました。