The reason for this issue is that the rectangle being drawn is outside of the nested SVG viewport.
The SVG has a width and height of 100x50, while the rectangle being drawn is 20x10 at (-50,0). This means the rectangle covers the area from (-50,0) to (-30,10), making it invisible as objects outside the nested SVG viewport are not visible by default.
There are two ways to resolve this:
- Make objects outside the viewport visible by setting
overflow="visible" on the nested SVG element.
<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>
Reposition the rectangle inside the SVG viewport and adjust the SVG position accordingly.
If you choose this solution, you'll need to change the x="100%" value of the nested SVG element.
<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>
Additional points regarding your original SVG:
- The
x and y coordinates on the root <svg> element do not have any impact.
- Currently,
z-index does not hold significance in SVGs, but this might change with the upcoming SVG2 standard.
- The use of
position: relative has no effect on SVG elements.
I have eliminated these components from the revised examples provided.