CODEWITHSUNDEEP
htmlcsssvg
chrometic
chrometic

Reputation: 81

Position of svg elements

I'm trying to put a polygon in front of this green rectangle, so it can look like Brazil flag. My code: 

<svg class="green"
  version="1.1" 
  baseProfile="full"
  xmlns="http://www.w3.org/2000/svg">
  <rect x=0 y=0 height=450 width=800 fill="#009B3A"/>
  <polygon x=0 y=0 points="400,430 600,215 400,30 200,215" fill="#FEDF00"/>
</svg>

Funny thing is that polygon element is not appearing in the front of the rectangle, and it's getting me confused. I had made a Denmark flag svg, and it looked just fine, with white strips appearing in front of the red rectangle as they supposed to, my code for Denmark flag:

<svg 
  version="1.1" 
  baseProfile="full"
  xmlns="http://www.w3.org/2000/svg">
  <rect x=0 y=0 height=450 width=800 fill="#C60C30"/>
  <rect x=200 y=0 height=450 width=60 fill="#FFF"/>
  <rect x=0 y=175 height=60 width=800 fill="#FFF"/>
</svg>

I wish it had some way of doing the same for Brazil flag

Upvotes: 2

Views: 84

Answers (3)

Jhanu
Jhanu

Reputation: 29

 <svg height="500" width="800" class="green"
      version="1.1" 
      baseProfile="full"
      xmlns="http://www.w3.org/2000/svg">
      <rect x=0 y=0 height=450 width=800 fill="#009B3A"/>
      <polygon points="400,430 600,215 400,30 200,215" fill="#FEDF00"/>
    </svg>

Add height and width to svg. It will work.

Upvotes: 2

Donada
Donada

Reputation: 298

it should work. (add a viewBox="0 0 450 800") 

<svg id="svg"  viewBox="0 0 450 800">
     <rect x="0" y="0" width="800" height="450" class="handle" polygonNo="0" pointNo="0" fill="green"></rect>
          <polygon points="400,0 800,225 400,450 0,225" id="polygon" polygonNo="1" fill="yellow"></polygon>
       <circle cx="400" cy="225" r="100"  
           fill="blue"></circle>
</svg>

Upvotes: 1

Alexandr_TT
Alexandr_TT

Reputation: 14545

Added viewBox="0 0 450 800" and transform="translate(-175 0)"

Which will set the right position for the yellow diamond

<svg class="green"
  version="1.1" 
  baseProfile="full"
  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 800">
  <rect x=0 y=0 height=450 width=800 fill="#009B3A"/>
  <polygon transform="translate(-175 0)" points="400,430 600,215 400,30 200,215" fill="#FEDF00"/>
</svg>

Upvotes: 2

Related Questions