10

この SVG 画像が 500px のコンテナ内に 150px の高さで表示されるのはなぜですか? なぜこの特定の値ですか？

js bin と Codepen の両方でこの奇妙な動作を見つけたので、オンライン エディターではなく、コードに関係があると思います。

ここに画像の説明を入力

注: 700px の div コンテナーでも同じ結果になります。したがって、親の身長は関係ありません。

<div style="padding: 30px; background-color: yellow; height: 500px; width: 500px; ">
<svg>

  <pattern id="basicPattern" x="10" y="10" width="40" height="40" patternUnits="userSpaceOnUse" >
      <rect x= "0" y="0" width="4" height="4"
            stroke = "red"
            stroke-width = "1"
            fill = "black"/>
  </pattern>
  <!-- <rect x="0" y="0" width="300" height="151" // why this deletes the bottom line? -->
  <!-- <rect x="0" y="0" width="300" height="150" // why this deletes 1 px from the bottom line?  -->

  <!-- but this height="149" is the bottom limmit for this picture.. 
       what prevent's it bor beeing extended further -  we have unthil 500 px as you can see on the div.-->

  <rect x="0" y="0" width="300" height="149"
  stroke= "red" 
  stroke-width="2"
  fill="url(#basicPattern)" />
</svg>

これが Jsbinで、これが CodePen です。

4

1 に答える 1

12

widthSVGと を設定しなかったheightため、幅 300 ピクセル x 高さ 150 ピクセルのデフォルト サイズになります (一部のユーザー エージェントの場合)。

これは、SVG の幅と高さが両方とも 500px に設定された JSBin です。これで、長方形の高さが 150 ピクセルを超えることがあります: https://jsbin.com/yafenemawe/1/edit?html,output

于 2016-10-20T14:16:05.833 に答える