Question

我想知道为什么path元素没有占用SVG帧的全宽，视口设置为100个单位宽。是因为路径标记中编码的图形在右边包含额外的空格吗？

  <div style="width: 200px; height: 200px; background-color: rgb(2, 189, 173); background-image: linear-gradient(135deg, rgb(2, 189, 173), rgb(3, 82, 149));">

  <svg style="width: 100%;" viewBox="0 0 100 100">
    <path d="M71.7 14.7H3.1L16.3 1.4 14.9 0 0 14.9v1.5l14.9 14.9 1.4-1.4L3.1 16.7h68.6z" style="
    fill: white;"></path>
  </svg>

  </div>

http://codepen.io/anon/pen/NRELRB

Answer 1

The problem was that I misinterpreted the viewBox's last 2 arguments.

0, 0, 100, 100 does not correspond to setting 100% width, 100% height.

The SVG viewport is like an iframe and has no idea of the contents inside of it so it's your job to place the frame over the drawing you have in that SVG document. So in my case it should be 0, 0, 71, 31.

使SVG绘图占全宽

1 个答案: