将Adobe XD原型转换为HTML

Question

我做了这个原型：

现在我想将它转换为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>

Answer 1

您对代码的一些评论：

<svg>不是<img>的有效儿童元素。 <img>元素没有孩子。

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

你的SVG有一个viewBox。如果SVG有一个viewBox，它将缩放以适合它的父元素。如果您希望它离开页面，则（a）使其父元素大于页面，或者（b）移除viewBox，以便始终以1：1的比例绘制SVG。

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

添加一条新路径，其顶边与当前路径匹配，但通过向下和向左连续并连接回起点来封闭其下方的区域。将它的fill设置为绿色。

Answer 2

你可以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>

将Adobe XD原型转换为HTML

问题描述投票：4回答：2

2个回答

最新问题

将Adobe XD原型转换为HTML

问题描述 投票：4回答：2

2个回答

最新问题

问题描述投票：4回答：2