SVG画像の背景が横幅いっぱいにならない時（Chrome）

2024年1月23日 2024年1月23日

webmaster

横幅100％で隙間ができる場合、「preserveAspectRatio="none"」を追加

<svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 687.36 19.35">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
        stroke-width: 0px;
      }
    </style>
  </defs>
  <g id="_レイヤー_1-2" data-name="レイヤー 1">
    <path class="cls-1" d="m687.36,0c-13.22,0-13.22,7.99-26.45,7.99s-13.22-7.99-26.44-7.99-13.22,7.99-26.44,7.99-13.22-7.99-26.44-7.99-13.22,7.99-26.44,7.99-13.22-7.99-26.44-7.99-13.22,7.99-26.44,7.99-13.22-7.99-26.43-7.99-13.22,7.99-26.44,7.99-13.22-7.99-26.44-7.99-13.22,7.99-26.44,7.99-13.22-7.99-26.44-7.99-13.22,7.99-26.44,7.99-13.22-7.99-26.44-7.99-13.22,7.99-26.44,7.99-13.22-7.99-26.44-7.99-13.22,7.99-26.44,7.99-13.22-7.99-26.43-7.99-13.22,7.99-26.43,7.99-13.22-7.99-26.43-7.99-13.22,7.99-26.44,7.99S118.95,0,105.73,0s-13.22,7.99-26.43,7.99S66.08,0,52.86,0s-13.22,7.99-26.43,7.99S13.22,0,0,0v19.35h687.36V0Z"/>
  </g>
</svg>