Clever Geek Handbook

Convert Adobe XD prototype to HTML

I made this prototype:

enter image description here

Now I want to convert it to HTML, although I am having problems with two things. SVG first. I can't get it to go off the screen, it keeps auto-resizing to fit the screen.

Second, how can I make the green part below the SVG path?

This is how my HTML currently looks like:

enter image description here

<!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>
Run code


+3


source to share


1 answer


Some comments on your code:

  • <svg>

    is not a valid child <img>

    . Elements <img>

    have no children.

This is SVG first. I can't get it to go off the screen, it keeps auto-resizing to fit the screen.



  1. Your SVG has viewBox

    . If the SVG has a viewBox, it will scale to fit its parent. If you want it to leave the page, either (a) make your parent larger than the page, or (b) remove the viewBox so that the SVG is always drawn at 1: 1 scale.

Second, how can I make the green part below the SVG path?

  1. Add a new path, the top edge of which corresponds to the second path, but which spans the area below it, continuing downward and backward and connecting to the starting point. Set it fill

    to green.
+1


source






More articles:


All Articles