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，它看起来还不错，在我的丹麦国旗代码中，在红色矩形的前面应该出现了白色的条带，

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

Answer 2

它应该工作。（添加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>

Answer 3

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

为svg添加高度和宽度。它将起作用。

svg元素的位置

3 个答案: