javascript - SVG element not visible on screen, can see element added in console - Stack Overflow

admin管理员组

文章数量:1327308

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

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

• javascript
• html
• css
• svg

Share Improve this question Follow asked Jul 21, 2016 at 2:05 ArihantArihant 4,0471818 gold badges5959 silver badges9191 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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>

2. 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 uping SVG2 standard.
3. position: relative has no meaning in SVGs.

I've removed these things from my modified examples.

本文标签： javascriptSVG element not visible on screencan see element added in consoleStack Overflow