CODEWITHSUNDEEP
javascripthtmlcsssvg
Arihant
Arihant

Reputation: 4047

SVG element not visible on screen, can see element added in console

I have the following SVG code. The SVG with id "nestedsvg" is being appended in the HTML, I can view it on the console. But it's not visible on the screen. I tried assigning it a z-index of 99 but still it's invisible. Where am I going wrong? 

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

Upvotes: 3

Views: 5337

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101956

This is because the rectangle you are drawing is outside of the nested SVG viewport.

That SVG has a width and height of 100x50, and you are drawing a 20x10 rectangle at (-50,0). Meaning the rectangle covers the area from (-50,0) to (-30,10). So it is not visible. By default, objects outside a nested SVG viewport are not visible.

There are two ways to fix this:

  1. Make objects outside the viewport visible. You can do this by setting overflow="visible" on the nested SVG.

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

  1. Move the rectangle inside the SVG viewport and reposition the SVG so that the rectangle ends up in the same place.

    I don't know why you wanted the nested SVG to be at x="100%", but you would need to change that if you go with this solution.

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

A few other notes about your original SVG:

  1. x and y coordinates on the root <svg> element have no effect.
  2. z-index currently has no meaning in SVGs. Although this may change for the upcoming SVG2 standard.
  3. position: relative has no meaning in SVGs.

I've removed these things from my modified examples.

Upvotes: 9

Related Questions