0

I want to display the text over the svg rect. Text is hidden in the sample. I want full text as visible :

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:white;stroke-width:3;stroke:rgb(0,0,0);"/> 
  <text x="10" y="35" fill="red">I love SVG! Text Chart</text>
</svg>

<svg height="300" width="60" style="position:absolute;left:20px;top:20px">
<rect width="300" height="50" style="fill:yellow;stroke-width:3;stroke:rgb(0,0,0);"/> 

</svg>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Panjanatham
  • 11
  • 2
  • which rect do you want it on ?You have 2 rects here ,white and yellow with yellow inside white...usually you can group them using the tag. – Mani Apr 27 '17 at 12:20
  • text should be display over yellew rect...But the text was hided by yellow rect...I want the text as visible and it displays over yellow rect...Any other answer – Panjanatham Apr 27 '17 at 12:39
  • Possible duplicate of [How to use z-index in svg elements?](http://stackoverflow.com/questions/17786618/how-to-use-z-index-in-svg-elements) – CBroe Apr 29 '17 at 22:41

1 Answers1

0

Here is the updated code:-

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:white;stroke-width:3;stroke:rgb(0,0,0);"/> 
 
</svg>

 <svg height="300" width="1000" style = "position:absolute;left:20px;top:20px">
 
<rect width="60" height="60" style="fill:yellow;stroke-width:3;stroke:rgb(0,0,0);"/> 
 <text x="10" y="35" fill="red">I love SVG! Text Chart</text>
</svg>
Mukul Keshari
  • 495
  • 2
  • 7
  • please don't change the element from one place to another.. I have applied z-index,but it does not works..Any other answer – Panjanatham Apr 27 '17 at 12:37
  • @Panjanatham as per SVG specification version 1.1 the rendering order is based on the document order, z-inxed will not work in SVG – Mukul Keshari Apr 27 '17 at 12:41