html - svg 元素的位置

Question

我试图在这个绿色矩形前面放置一个多边形，这样它看起来就像巴西国旗。我的代码:

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

有趣的是，多边形元素没有出现在矩形的前面，这让我很困惑。我制作了一个丹麦国旗 svg，它看起来很好，白色的 strip 出现在红色矩形的前面，正如它们应该的那样，我的丹麦国旗代码:

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

我希望它能以某种方式对巴西国旗做同样的事情

Answer 1

添加了 viewBox="0 0 450 800" 和 transform="translate(-175 0)"

这将为黄色钻石设置正确的位置

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