我可以在线条svg形状上重叠svg rect形状

时间：2017-12-15 05:33:56

标签： html css svg

我正在通过svg形状创建一个结构。我重叠了一个＆＃34; rect＆＃34;形状＆＃34;线＆＃34;形状。我该怎么做？

参见附图enter image description here

＆＃13;
＆＃13; 
.parking-area {
  background: #4c4c4c;
  padding: 30px;
}

.circle-green {
  height: 40px;
  width: 40px;
  background: #72ce79;
  border: 2px solid white;
  border-radius: 100px;
}

.circle-yellow {
  height: 40px;
  width: 40px;
  background: #f9e972;
  border: 2px solid white;
  border-radius: 100px;
}

.circle-red {
  height: 40px;
  width: 40px;
  background: #da5649;
  border: 2px solid white;
  border-radius: 100px;
}

.triangle-pink {
  height: 0px;
  width: 0px;
  border-left: 15px solid #4c4c4c;
  border-right: 15px solid #4c4c4c;
  border-bottom: 40px solid #d400f9;
}

.element-description {
  color: white;
  font-weight: 500;
}

.parking-area hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 2px solid #909090;
}

.full-width {
  width: 100%;
}

.dashed-line-h {
  fill: none;
  stroke: #7F7D60 !important;
  stroke-width: 5;
  stroke-miterlimit: 8;
  stroke-dasharray: 12, 10;
}

.text-bg {
  fill: green;
  height: 30px;
  width: 20%;
}
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <!-- jQuery library -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

  <div class="container">
    <div class="row">
      <div class="container">
        <div class="parking-area">
          <div class="alement-info">
            <div class="row">
              <div class="col-md-3">
                <div class="row">
                  <div class="col-md-2">
                    <div class="circle-green"></div>
                  </div>
                  <div class="col-md-10">
                    <div class="element-description">Option-1
                      <p>Lorem ipsum dolor sumit
                        <p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="row">
                  <div class="col-md-2">
                    <div class="circle-yellow"></div>
                  </div>
                  <div class="col-md-10">
                    <div class="element-description">Option-2
                      <p>Lorem ipsum dolor sumit
                        <p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="row">
                  <div class="col-md-2">
                    <div class="circle-red">

                    </div>
                  </div>
                  <div class="col-md-10">
                    <div class="element-description">Option-3
                      <p>Lorem ipsum dolor sumit
                        <p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-3">
                <div class="row">
                  <div class="col-md-2">
                    <div class="triangle-pink"></div>
                  </div>
                  <div class="col-md-10">
                    <div class="element-description">Option-4
                      <p>Lorem ipsum dolor sumit
                        <p>
                    </div>
                    <line style=""></line>
                  </div>
                </div>
              </div>
            </div>
            <hr>
            <svg height="60px" width="100%">
    						<rect  x="40%" y="20" class="text-bg"/>
    						<svg height="60px" width="100%" >
    							<text x="50%" y="40" alignment-baseline="middle" text-anchor="middle" style="fill:#939393; height: 30px; ">My text</text>
    						</svg>
            </svg>
            <svg class="full-width" height="2px">
    					  <line class="dashed-line-h" x1="100%" y1="0%" x2="0%" y2="00%"  />
    					</svg>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->
    <!-- Related Projects Row -->
    <!-- /.row -->
    <!-- Footer -->
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我创建了自己的对象，因为我在代码中看不到你的svgs。基本上，创建一个相对容器并将矩形和hr放在其中，然后矩形是一个绝对定位的元素：

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  right: 1em;
  top: -1.5em;
  background: green;
  width: 200px;
  height: 50px;
}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
      <a class="navbar-brand" href="#">My Website</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
        <li>
          <a href="#"></a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
  <div class="row">
    <div class="container">
      <div class="parking-area">
        <div class="alement-info">
          <div class="relative">
            <div class="absolute"></div>
            <hr>
          </div>
          <svg height="60px" width="100%">
				<rect  x="40%" y="20" style="fill:green; height: 30px; width:20%; "    />
			</svg>
          <svg class="full-width" height="2px">
			  <line class="dashed-line-h" x1="100%" y1="0%" x2="0%" y2="00%"  />
			</svg>
        </div>
      </div>
    </div>
  </div>
  <!-- /.row -->
  <!-- Related Projects Row -->
  <!-- /.row -->
  <!-- Footer -->
  <footer>
    <div class="row">
      <div class="col-lg-12">
        <p>Copyright &copy; my website 2017</p>
      </div>
    </div>
    <!-- /.row -->
  </footer>
</div>
<!-- /.container -->

相关问题
最新问题