svg自动生成创作绘画导出图片效果代码-html代码-BFW代码库

svg自动生成创作绘画导出图片效果代码

代码语言：html

所属分类：其他

代码描述：svg自动生成创作绘画导出图片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  margin: 60px 20px;
  height: calc(100vh - 120px);
  background: #ddd;
}

svg#canvas {
  width: 100%;
  height: 100%;
}

.btn {
  display: flex;
  border: none;
  position: absolute;
  right: 10px;
  background: #fff;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 5%);
}

.btn:hover {
  cursor: pointer;
  background: #00f;
}

.btn:hover svg {
  fill: #fff;
}

.btn:focus {
  outline: none;
}

.btn-generate {
  top: 10px;
}

.btn-copy {
  top: 50px;
}

.btn-save {
  top: 90px;
}

.btn-save-image {
  top: 130px;
}

.btn-generate svg,
.btn-copy svg,
.btn-save svg,
.btn-image svg{
  display: block;
}

.btn-copy svg {
  display: none;
}

.btn-copy svg.show {
  display: block;
}

@media only screen and (max-width: 767px) {
  .btn {
    top: 10px;
  }
  .btn-generate {
    right: 10px;
  }

  .btn-copy {
    right: 50px;
  }

  .btn-save {
    right: 90px;
  }
  
  .btn-save-image {
    right: 130px;
  }
}

.stamp {
  text-align: center;
  font-family: Helvetica;
  font-size: 8px;
  color: #000;
  letter-spacing: 2px;
  display: block;
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
}
</style>

 


</head>

<body >
  <?xml version="1.0" encoding="utf-8" ?>
<svg id="canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"></svg>

<button class="btn btn-generate">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#00f" viewBox="0 0 16 16"><path d="M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 1 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z"/><path d="M6.641 11.671V8.843h1.57l1.498 2.828h1.314L9.377 8.665c.897-.3 1.427-1.106 1.427-2.1 0-1.37-.943-2.246-2.456-2.24.........完整代码请登录后点击上方下载按钮下载查看