html - 如何使以下 SVG 适合其父级(水平和垂直)？

Question

现场复制:https://codepen.io/alexcheninfo/pen/dZqmLv

这是 SVG:

<svg class="line-chart" width="860" height="405"></svg>

这是容器的 CSS:

.common-section {
  position: relative;
  width: 100%;
  background-color: red;
  margin-bottom: 30px;
}

截图:

Answer 1

两件事:

1. 您缺少 viewBox 属性。

2. 添加 preserveAspectRatio="xMidYMid meet" 将在图像缩放时保持原始纵横比。如果您需要支持 IE 11 或更低版本，那么您需要使用 CSS 来保持纵横比(请参阅 http://www.mademyday.de/css-height-equals-width-with-pure-css.html )，或者您可以使用 JS 为您自动执行此操作(请参阅 https://gist.github.com/Heydon/369185d08d9ce2426f01863625e95525 )。

这是您的 CodePen 演示的工作版本:
https://codepen.io/tedw/pen/YEOLPr?editors=1100

FWIW，这里有一些关于缩放 SVG 的好资源:

• > https://css-tricks.com/scale-svg/
• > https://codepen.io/jonitrythall/post/preserveaspectratio-in-svg

希望对您有所帮助!

更新:

我将您的 SVG 导入 Illustrator 并进行了一些优化(包括通过 https://jakearchibald.github.io/svgomg/ 运行它)。这是最终代码:

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 522 213" preserveAspectRatio="xMidYMid meet" style="font-family: Helvetica, sans-serif; font-size: 6px;" fill="#000">
  <g transform="translate(20 60)">
    <path d="M490 128.2l-71.2 5-71-.3L63-57l-71 176.3"/>
    <circle cx="489.9" cy="128.2" r="3"/>
    <circle cx="418.8" cy="133.4" r="3"/>
    <circle cx="347.7" cy="132.9" r="3"/>
    <circle cx="63.2" cy="-57" r="3"/>
    <circle cx="-7.9" cy="119.3" r="3"/>
  </g>
  <text transform="translate(498.37 210.08)">17/10/18</text>
  <text transform="translate(427.266 210.08)">17/10/17</text>
  <text transform="translate(356.16 210.08)">17/10/16</text>
  <text transform="translate(71.735 210.08)">17/10/12</text>
  <text transform="translate(.85 210.08)">17/10/11</text>
  <text transform="translate(0 201.83)">0</text>
  <text transform="translate(0 179.485)">100</text>
  <text transform="translate(0 157.137)">200</text>
  <text transform="translate(0 134.793)">300</text>
  <text transform="translate(0 112.47)">400</text>
  <text transform="translate(0 90.123)">500</text>
  <text transform="translate(0 67.78)">600</text>
  <text transform="translate(0 45.435)">700</text>
  <text transform="translate(0 23.095)">800</text>
  <g fill="none" stroke="#000">
    <path d="M12 200.6h498"/>
    <path d="M12 178.3h498"/>
    <path d="M12 156h498"/>
    <path d="M12 133.6h498"/>
    <path d="M12 111.3h498"/>
    <path d="M12 89h498"/>
    <path d="M12 66.6h498"/>
    <path d="M12 44.3h498"/>
    <path d="M12 21.8h498"/>
  </g>
</svg>