Question

我正在尝试使用SVG元素创建一个信息图表，我不能为我的生活弄清楚如何让我的SVG适合视口。无论我做什么，都会有一个轻微的垂直滚动和最底部的小白线。</ p>

CodePen：http://codepen.io/nicholasdrzewiecki/pen/zqEprw

HTML

<body>
  <section class='landing'>
    <svg viewBox='0 0 1920 1080'>
      <rect id='background' class='cls-1' width='1920' height='1080' />
      <g id='plane'>
        <path id='big-wing' class='cls-2' d='M1741.6817,886.5c4.3571,4.359,24.6239,19.18,29.7965,16.7321,1.3751-.6478,86.5353-113.1255,87.6785-114.2692a14.1279,14.1279,0,0,0-19.9709-19.9793c-1.0873,1.0877-113.39,86.34-114.0292,87.6515C1722.6062,861.8422,1737.2845,882.1014,1741.6817,886.5Zm-130.3305,130.2815a13.997,13.997,0,0,0,19.787.24c1.1353-1.1437,113.5975-86.3078,114.2531-87.6915,2.43-5.1748-12.4159-25.482-16.789-29.849-4.4051-4.407-24.7038-19.1315-29.9-16.5961-1.3111.6478-86.4873,113.03-87.5826,114.1173A13.9917,13.9917,0,0,0,1611.3511,1016.7819Z'
        />
        <path id='top-wing-shading' class='cls-3' d='M1690.8073,892.8133l-6.7679,8.78c-24.7278,32.16-72.1047,94.6019-72.92,95.41a14.0014,14.0014,0,0,0,.2318,19.7874,14.47,14.47,0,0,0,4.6609,3.1353l89.6425-114.4676Zm171.2354-118.9826a14.5057,14.5057,0,0,0-3.102-4.6309,14.1875,14.1875,0,0,0-8.9781-4.095h-2.1266a13.4992,13.4992,0,0,0-8.65,3.8791c-0.7755.7758-57.7461,44.0777-90.8524,69.52l-13.4417,10.3722,12.739,15.0059Z'
        />
        <path id='small-wing' class='cls-3' d='M1809.2714,962.75c2.1786,2.1795,12.3119,9.59,14.8982,8.366,0.6875-.3239,43.2676-56.5628,43.8393-57.1346a7.064,7.064,0,0,0-9.9855-9.99c-0.5436.5439-56.6948,43.17-57.0146,43.8257C1799.7336,950.4211,1807.0728,960.5507,1809.2714,962.75Zm-65.1653,65.1408a6.9985,6.9985,0,0,0,9.8935.12c0.5676-.5719,56.7988-43.1539,57.1265-43.8457,1.2152-2.5874-6.2079-12.741-8.3945-14.9245-2.2026-2.2035-12.3519-9.5658-14.95-8.2981-0.6556.3239-43.2436,56.5148-43.7913,57.0586A6.9959,6.9959,0,0,0,1744.1061,1027.8909Z'
        />
        <path id='plane-body' class='cls-4' d='M1696.2315,805.0315c13.2313,13.2449,163.4448,185.7005,149.8857,199.2734-13.5511,13.5808-185.75-136.864-198.9735-150.1089s-23.2088-45.2534-9.65-58.8342C1651.0451,781.7889,1683.0081,791.7946,1696.2315,805.0315Z' />
      </g>
      <text class='cls-5' transform='translate(314.0254 562.6257)'>MUSIC HAS BEEN SHOWN
        <tspan x='774.7793' y='0'>T</tspan>
        <tspan x='813.0117' y='0'>O IM</tspan>
        <tspan class='cls-6' x='939.6572' y='0'>P</tspan>
        <tspan x='977.9609' y='0'>ACT MOOD</tspan>
      </text>
      <path id='cloud' class='cls-7' d='M288.0351,50H180.753c-9.6733,0-17.9968,6.42-18.4518,14.7651-0.4858,8.91,7.7347,16.2652,17.9444,16.2652h0c4.3408,0,7.86,3.039,7.86,6.7879V91.697c0,3.7488-3.5189,6.7879-7.86,6.7879h-55.633c-9.6733,0-17.9968,6.42-18.4518,14.7651-0.4858,8.91,7.7347,16.2652,17.9444,16.2652h0c4.3408,0,7.86,3.039,7.86,6.7879v3.8788c0,3.7488-3.5189,6.7879-7.86,6.7879H68.4723c-9.6733,0-17.9968,6.42-18.4518,14.7651C49.5347,170.6445,57.7552,178,67.9649,178H175.2471c9.6733,0,17.9968-6.42,18.4518-14.7651,0.4858-8.91-7.7347-16.2652-17.9444-16.2652h0c-4.3408,0-7.86-3.039-7.86-6.7879V136.303c0-3.7488,3.5189-6.7879,7.86-6.7879h55.633c9.6733,0,17.9968-6.42,18.4518-14.7651,0.4858-8.91-7.7347-16.2652-17.9444-16.2652h0c-4.3408,0-7.86-3.039-7.86-6.7879V87.8182c0-3.7488,3.5189-6.7879,7.86-6.7879h55.633c9.6733,0,17.9968-6.42,18.4518-14.7651C306.4653,57.3554,298.2448,50,288.0351,50Z'
      />
    </svg>
  </section>
</body>

CSS

/* Imports */

@import url(https://fonts.googleapis.com/css?family=Dosis:300,500,700);

/* Elements */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Dosis', sans-serif;
}
section {
  margin: 0;
  padding: 0;
}
svg {
  height: 100%;
}

/* SVG Classes */

.cls-1 {
  fill: #212121;
}
.cls-2 {
  fill: #8e3a26;
}
.cls-3 {
  fill: #aa4a2d;
}
.cls-4 {
  fill: #e2d9d7;
}
.cls-5 {
  font-size: 72px;
  font-family: Dosis;
  font-weight: 700;
}
.cls-5, .cls-7 {
  fill: #e5e5e5;
}
.cls-6 {
  letter-spacing: -2px;
}

/* Identifiers */

Answer 1

将void CountEmail() { Outlook.Explorer currExplorer = null; Outlook.Folder folder = null; Outlook.Items items = null; Outlook.ContactItem contact = null; string contactList = string.Empty; try { currExplorer = Application.ActiveExplorer(); folder = (Outlook.Folder)currExplorer.CurrentFolder; items = folder.Items; int count = items.Count; // 10082 count IEnumerable<Outlook.MailItem> mail = folder.Items.OfType<Outlook.MailItem>().Where(m => m.ReceivedTime <= DateTime.Now - new TimeSpan(7, 0, 0, 0)).Select(m => m); int itemscount = mail.Count<Outlook.MailItem>(); // out of memory here .....添加到position: absolute会将其约束到窗口。如果您只想摆脱底部的白色边框，svg上的display: block应该可以解决问题。

修改

根据以下评论中的说明，您可以使用以下内容：

svg

HTML5 SVG 100％宽度和100％视口高度？

1 个答案: