时间戳

首页 > 解决方案 > svg 元素的位置

html - svg 元素的位置

问题描述

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

<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，它看起来很好，白色条带出现在红色矩形前面，正如他们应该的那样，我的丹麦国旗代码：

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

我希望它有办法为巴西国旗做同样的事情

标签： htmlcsssvg

解决方案

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

推荐阅读