줄 svg 셰이프에 svg rect 셰이프를 겹치게 할 수 있습니다.

-1

svg 셰이프로 구조체를 생성하고 있습니다. 나는 "선"모양에 "rect"모양을 겹쳤다. 이 일을 어떻게해야합니까?줄 svg 셰이프에 svg rect 셰이프를 겹치게 할 수 있습니다.

은 내가 코드에 svgs를 볼 수 없기 때문에 난 내 자신의 객체를 생성 이미지

.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%; 
 
}

<!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%"> 
 
    \t \t \t \t \t \t <rect x="40%" y="20" class="text-bg"/> 
 
    \t \t \t \t \t \t <svg height="60px" width="100%" > 
 
    \t \t \t \t \t \t \t <text x="50%" y="40" alignment-baseline="middle" text-anchor="middle" style="fill:#939393; height: 30px; ">My text</text> 
 
    \t \t \t \t \t \t </svg> 
 
      </svg> 
 
      <svg class="full-width" height="2px"> 
 
    \t \t \t \t \t <line class="dashed-line-h" x1="100%" y1="0%" x2="0%" y2="00%" /> 
 
    \t \t \t \t \t </svg> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- /.row --> 
 
    <!-- Related Projects Row --> 
 
    <!-- /.row --> 
 
    <!-- Footer --> 
 
    </div> 
 
</body> 
 

 
</html>

출처

2017-12-15 Shubham Shrivastava

여기 CSS 코드 작성하세요 게시물을 볼 수 있습니다. 그러나 당신의 이미지를 보면서 이것을하기 위해 절대 위치 지정을 사용한다고 말하고 싶습니다. 선은 상대 위치 컨테이너에 있고 사각형은 절대 배치됩니다. –

인 코드 CSS를 사용하는 CSS 코드가 없습니다 –

위치 절대 값이 svg rect 요소에서 작동하지 않습니다 –

첨부 참조하십시오. 기본적으로, 상대 컨테이너를 만들고 그 내부의 사각형과 시간을 넣어, 다음 사각형은 절대 위치 요소 : 가장의 JSFiddle에,

.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%"> 
 
\t \t \t \t <rect x="40%" y="20" style="fill:green; height: 30px; width:20%; " /> 
 
\t \t \t </svg> 
 
      <svg class="full-width" height="2px"> 
 
\t \t \t <line class="dashed-line-h" x1="100%" y1="0%" x2="0%" y2="00%" /> 
 
\t \t \t </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 -->

출처

2017-12-15 05:52:57

새로운 코드를 업로드했습니다. 실제로는 svg 셰이프 만 사용해야합니다. svg rect에서 오버랩하는 방법이 있습니까 ??? –

줄 svg 셰이프에 svg rect 셰이프를 겹치게 할 수 있습니다.

답변

관련 문제