4

我做了这个原型：

在此处输入图像描述

现在我想将它转换为 HTML，尽管我在两件事上遇到了麻烦。首先是SVG。我不能让它离开屏幕，它会自动调整大小以适应屏幕。

其次，我将如何在 SVG 路径下方制作绿色部分？

我的 HTML 目前的样子：

在此处输入图像描述

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:100i,300,300i,400,500" rel="stylesheet">
  </head>
  <body>
    <div class="overlay" id="heading">
      <h1>Welcome</h1>
    </div>
    <img>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="3837.005 1394.976 2112.025 1122.24">
      <defs>
        <style>
          .cls-1 {
            fill: rgba(0, 0, 0, 0);
            stroke: #ffeb3b;
            stroke-width: 20px;
          }

          .cls-2 {
            margin-left: -30px;
            margin-right: -30px;
          }
        </style>
      </defs>
      <g class="cls-2" transform="matrix(1, 0, 0, 1, 0, 0)">
        <path id="Path_8-2" data-name="Path 8" class="cls-1" d="M-109.8,306.4s86.5-29.5,173.4-14.1,284.3,61.6,408.1,90.3S729.9,311.9,886.9,259s145.2,272.8,237.4,263,130-247.5,223.7-202.2,105.3,50,194.3,33.4S1726.8,107,1785.6,104s39.3,286.8,320.5,309.5,76.3,0" transform="translate(3906 1313)"/>
      </g>
      </svg>
    </img>

    <div class="overlay" id="introabout">
      <h2><i>Live data from the Faroe Islands<br />
      displayed visually.</i></h2>
    </div>

    Hello, World!
  </body>
  <footer></footer>
</html>

4

2 回答 2

3

对您的代码的一些评论：

  1. <svg>不是 的有效子元素<img>。 <img>元素没有子元素。

首先是SVG。我不能让它离开屏幕，它会自动调整大小以适应屏幕。

  1. 您的 SVG 有一个viewBox. 如果 SVG 有一个 viewBox，它将缩放以适应它的父元素。如果您希望它离开页面，要么 (a) 使其父元素大于页面，要么 (b) 移除 viewBox 以便始终以 1:1 的比例绘制 SVG。

其次，我将如何在 SVG 路径下方制作绿色部分？

  1. 添加一条新路径，其顶部边缘与当前路径匹配，但通过继续向下和围绕并连接回起点来包围其下方的区域。将其设置fill为绿色。
于 2017-04-30T05:00:25.093 回答
0

您可以导入 SVG：

body{
  background-color: blue;
  color:white;
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" />
  <link href="https://fonts.googleapis.com/css?family=Roboto:100i,300,300i,400,500" rel="stylesheet">
</head>

<body>
  <div class="overlay" id="heading">
    <h1>Welcome</h1>
  </div>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="3837.005 1394.976 2112.025 1122.24">
      <defs>
        <style>
          .cls-1 {
            fill: rgba(0, 0, 0, 0);
            stroke: #ffeb3b;
            stroke-width: 20px;
          }

          .cls-2 {
            margin-left: -30px;
            margin-right: -30px;
          }
        </style>
      </defs>
      <g class="cls-2" transform="matrix(1, 0, 0, 1, 0, 0)">
        <path id="Path_8-2" data-name="Path 8" class="cls-1" d="M-109.8,306.4s86.5-29.5,173.4-14.1,284.3,61.6,408.1,90.3S729.9,311.9,886.9,259s145.2,272.8,237.4,263,130-247.5,223.7-202.2,105.3,50,194.3,33.4S1726.8,107,1785.6,104s39.3,286.8,320.5,309.5,76.3,0" transform="translate(3906 1313)"/>
      </g>
      </svg>


  <div class="overlay" id="introabout">
    <h2><i>Live data from the Faroe Islands<br />
      displayed visually.</i></h2>
  </div>

  Hello, World!
</body>
<footer></footer>

</html>

于 2019-02-12T15:39:48.253 回答