Question

我做了这个原型：

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

其次，我如何将绿色部分放在SVG路径下面？

我的HTML目前的样子：

module pulseit(clk, reset, pulse);
input clk, reset;
output pulse;
reg [25:0] count;
wire pulse;
always @ (posedge clk, posedge reset)
    if (reset) count <= 26'b0; else
    if (pulse) count <= 26'b0; else
              count <= count + 26'b1;            

// Let's say pulse goes HIGH when 26th bit of count goes HIGH.
assign pulse = count[25]; // NEED TO DRIVE PULSE 
endmodule

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

2 个答案: