SVG-Element nicht auf dem Bildschirm sichtbar, kann Element in der Konsole

Question

Ich habe den folgenden SVG-Code angezeigt. Das SVG mit der ID "nestedvg" wird im HTML angehängt, ich kann es auf der Konsole anzeigen. Aber es ist nicht auf dem Bildschirm sichtbar. Ich habe versucht, es einen Z-Index von 99 zuweisen, aber immer noch ist es unsichtbar. Wo gehe ich falsch?

<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

Dies liegt daran, das Rechteck, das Sie zeichnen außerhalb des verschachtelten SVG Ansichtsfenster ist.

Das SVG hat eine Breite und Höhe von 100x50, und Sie zeichnen ein 20x10-Rechteck bei (-50,0). Das bedeutet, dass das Rechteck den Bereich von (-50,0) bis (-30,10) abdeckt. Also ist es nicht sichtbar. Standardmäßig sind Objekte außerhalb eines verschachtelten SVG-Ansichtsfensters nicht sichtbar.

Es gibt zwei Möglichkeiten, dieses Problem zu beheben:

1. sichtbaren Objekte aus dem Bildfenster machen. Sie können dies tun, indem Sie overflow="visible" auf dem verschachtelten SVG festlegen.

<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>

2. das Rechteck innerhalb des SVG-Ansichtsfensters verschieben und die SVG neu zu positionieren, so dass das Rechteck an der gleichen Stelle endet.

   Ich weiß nicht, warum Sie das verschachtelte SVG bei x="100%" haben wollten, aber Sie müssten das ändern, wenn Sie mit dieser Lösung gehen.

<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>

Einige weitere Hinweise zu Ihrer ursprünglichen SVG:

1. x und y Koordinaten auf dem Stamm <svg> Element haben keine Wirkung.
2. z-index hat derzeit keine Bedeutung in SVGs. Dies könnte sich für den kommenden SVG2-Standard ändern.
3. position: relative hat keine Bedeutung in SVGs.

Ich habe diese Dinge aus meinen modifizierten Beispielen entfernt.