将SVG文件放在div中就好了

时间：2018-03-07 21:55:35

标签： css svg

欢迎！

我想知道，我如何将.svg放在div我想要的位置。 我尝试使用某个位置 - 比如：.item1中的亲戚我尝试使用position: absolute并且更多的情况，但没有 效果很好。我需要得到如下的HTML： enter image description here 

	:root {
  --yellow: #ffc600;
  --black: #272727;
}

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  
  font-size: 10px;
  
}
/*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  margin: auto;
}
/* Each item in our grid will contain numbers */
.item {
	/* We center the contents of these items. You can also do this with flexbox too! */
	display: grid;
	justify-content: center;
	align-items: center;
	font-size: 27px;
	border: 1px solid blue;
}
.container {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 1fr 2fr 2fr 1fr;
	grid-template-rows: 445px auto auto 300px auto 445px ;
	grid-template-areas:
		"o1 o1 o1 o1"
		"o2m o2 o3 o3m"
		"o23m o23 o32 o32m"
		"o4 o4 o4 o4"
		"o5m o5  o6 o6m" 
		"o7 o7 o7 o7" 
}
.item1 {
	position: relative;
	grid-area: o1;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	text-align: center;
	background: linear-gradient(45deg, #fe6b83, #9326f0);
	color: white;
	flex-flow: column;
}
.item1 img {
	position: absolute;
    bottom: 8px;
    right: 0px;
	left: 100px;
	min-width: 50%;
}
.menu ul {
	display: flex;
	list-style: none;
	color:#582782;
	margin: 0;
	position: -webkit-sticky; /* Safari */
}
.menu a {
	display: block;
	text-decoration: none;
	padding: 20px;
	font-size: 24px;
	color:#582782;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<div class="container">
		<div class="item item1">
			<nav class="menu">
				<ul id="menu-list">
					<li>
						<a href="">PROJECTS</a>
					</li>
					<li>
						<a href="">TEAM</a>
					</li>
					<li>
						<a href="">MISSION</a>
					</li>
					<li>
						<a href="">CONTACT</a>
					</li>
				</ul>
			</nav>
			<h1>we create</h1>
			<h2>strategy is our first name</h2>
			 <img src="./1/img/wave-top2.svg" alt="Top SVG"> 
			 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 423.8 50" style="enable-background:new 0 0 423.8 50;" xml:space="preserve">
  <style type="text/css">
    .st0{fill:none;stroke:#FE709E;stroke-width:30;stroke-miterlimit:10;}
  </style>
  <path id="XMLID_2_" class="st0" d="M0,15c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20
    c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.6-20s30.3,20,60.6,20"/>
  </svg>

			 <img src="./1/img/wave-top.svg" alt="Top SVG2"> 
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-383 816.8 423.8 50" style="enable-background:new -383 816.8 423.8 50;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#8446B9;stroke-width:30;stroke-miterlimit:10;}
</style>
<path id="XMLID_2_" class="st0" d="M-383,831.8c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20
	c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.6-20s30.3,20,60.6,20"/>
</svg>
      
       
		</div>	
	</div>
	
</body>
</html>

2 个答案:

答案 0 :(得分：0)

试试这个

我为parent添加svg。并向其添加position。 

:root {
  --yellow: #ffc600;
  --black: #272727;
}
html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,  Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 10px;
  }
  /*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
  */
  *, *:before, *:after {
  box-sizing: inherit;
}
body {
	margin: auto;
}
/* Each item in our grid will contain numbers */
.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 27px;
  border: 1px solid blue;
}
.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 2fr 2fr 1fr;
  grid-template-rows: 445px auto auto 300px auto 445px;
  grid-template-areas: "o1 o1 o1 o1"  "o2m o2 o3 o3m"  "o23m o23 o32 o32m"  "o4 o4 o4 o4"  "o5m o5  o6 o6m"  "o7 o7 o7 o7"
}
.item1 {
  position: relative;
  grid-area: o1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: center;
  background: linear-gradient(45deg, #fe6b83, #9326f0);
  color: white;
  flex-flow: column;
}
.item1 img {
  position: absolute;
  bottom: 8px;
  right: 0px;
  left: 100px;
  min-width: 50%;
}
.menu ul {
  display: flex;
  list-style: none;
  color: #582782;
  margin: 0;
  position: -webkit-sticky; /* Safari */
}
.menu a {
  display: block;
  text-decoration: none;
  padding: 20px;
  font-size: 24px;
  color: #582782;
}
.item {
	position: relative;
}
.svg-parent {
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
svg {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.top-svg {
	margin-right: -150px;
}
<div class="container">
    <div class="item item1">
        <nav class="menu">
            <ul id="menu-list">
                <li> <a href="">PROJECTS</a> </li>
                <li> <a href="">TEAM</a> </li>
                <li> <a href="">MISSION</a> </li>
                <li> <a href="">CONTACT</a> </li>
            </ul>
        </nav>
        <h1>we create</h1>
        <h2>strategy is our first name</h2>
        <div class="svg-parent">
			<svg version="1.1" id="Layer_1" class="top-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 423.8 50" style="enable-background:new 0 0 423.8 50;" xml:space="preserve">
                <style type="text/css">
                    .st0{fill:none;stroke:#FE709E;stroke-width:30;stroke-miterlimit:10;}
                </style>
                <path id="XMLID_2_" class="st0" d="M0,15c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20
        c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.6-20s30.3,20,60.6,20"/>
            </svg>
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="-383 816.8 423.8 50" style="enable-background:new -383 816.8 423.8 50;" xml:space="preserve">
                <style type="text/css">
                    .st0{fill:none;stroke:#8446B9;stroke-width:30;stroke-miterlimit:10;}
                </style>
                <path id="XMLID_2_" class="st0" d="M-383,831.8c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20
        c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.6-20s30.3,20,60.6,20"/>
            </svg>
        </div>
    </div>
</div>

答案 1 :(得分：0)

:root {
  --yellow: #ffc600;
  --black: #272727;
}
html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,  Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 10px;
  }
  /*
  WAT IS THIS?!
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
  */
  *, *:before, *:after {
  box-sizing: inherit;
}
body {
	margin: auto;
}
/* Each item in our grid will contain numbers */
.item {
  /* We center the contents of these items. You can also do this with flexbox too! */
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 27px;
  border: 1px solid blue;
}
.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 1fr 2fr 2fr 1fr;
  grid-template-rows: 445px auto auto 300px auto 445px;
  grid-template-areas: "o1 o1 o1 o1"  "o2m o2 o3 o3m"  "o23m o23 o32 o32m"  "o4 o4 o4 o4"  "o5m o5  o6 o6m"  "o7 o7 o7 o7"
}
.item1 {
  position: relative;
  grid-area: o1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: center;
  background: linear-gradient(45deg, #fe6b83, #9326f0);
  color: white;
  flex-flow: column;
}
.item1 img {
  position: absolute;
  bottom: 8px;
  right: 0px;
  left: 100px;
  min-width: 50%;
}
.menu ul {
  display: flex;
  list-style: none;
  color: #582782;
  margin: 0;
  position: -webkit-sticky; /* Safari */
}
.menu a {
  display: block;
  text-decoration: none;
  padding: 20px;
  font-size: 24px;
  color: #582782;
}
.item {
	position: relative;
}
.svg-parent {
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
svg {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.top-svg {
	margin-right: -150px;
}
<div class="container">
    <div class="item item1">
        <nav class="menu">
            <ul id="menu-list">
                <li> <a href="">PROJECTS</a> </li>
                <li> <a href="">TEAM</a> </li>
                <li> <a href="">MISSION</a> </li>
                <li> <a href="">CONTACT</a> </li>
            </ul>
        </nav>
        <h1>we create</h1>
        <h2>strategy is our first name</h2>
        <div class="svg-parent">
			<svg version="1.1" id="Layer_1" class="top-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 423.8 50" style="enable-background:new 0 0 423.8 50;" xml:space="preserve">
                <style type="text/css">
                    .st0{fill:none;stroke:#FE709E;stroke-width:30;stroke-miterlimit:10;}
                </style>
                <path id="XMLID_2_" class="st0" d="M0,15c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20
        c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.6-20s30.3,20,60.6,20"/>
            </svg>
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="-383 816.8 423.8 50" style="enable-background:new -383 816.8 423.8 50;" xml:space="preserve">
                <style type="text/css">
                    .st0{fill:none;stroke:#8446B9;stroke-width:30;stroke-miterlimit:10;}
                </style>
                <path id="XMLID_2_" class="st0" d="M-383,831.8c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20
        c30.3,0,30.3-20,60.5-20c30.3,0,30.3,20,60.5,20c30.3,0,30.3-20,60.6-20s30.3,20,60.6,20"/>
            </svg>
        </div>
    </div>
</div>

相关问题
最新问题