将Adobe XD prototype转换为HTML
将Adobe XD prototype转换为HTML
提问于 2017-04-30 10:42:44
我做了这个原型：
现在我想把它转换成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>
回答 2
Stack Overflow用户
发布于 2017-04-30 13:00:25
关于您的代码的一些注释：
<svg>不是<img>的有效子元素。<img>元素没有子级。
首先是SVG。我不能让它离开屏幕，它会自动调整大小以适应屏幕。
- 你的SVG有一个
viewBox。如果一个SVG有一个viewBox，它将缩放以适合它的父元素。如果您希望它离开页面，可以(a)使其父元素大于页面，或者(b)删除viewBox，使其始终以1:1的比例绘制。
其次，如何创建
路径下的绿色部分？
- 添加一个新路径，该路径的顶部边缘与当前路径匹配，但该路径通过继续向下和环绕来封闭其下面的区域，并连接回起点。将其
fill设置为绿色。
Stack Overflow用户
发布于 2019-02-12 23:39:48
您可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43702409
复制相关文章
相似问题
腾讯云开发者
