私は線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

最高のは、あなたにJSFiddleであり、ここではあなたのCSSコードを投稿してください投稿、私たちは一見を持つことができます。しかし、あなたのイメージを見て、私はこれを行う絶対的な位置を使用すると言うでしょう。線は相対配置されたコンテナ内にあり、矩形は絶対的に配置されています。 –

インラインCSSを使用しているCSSコードはありません –

ポジションアブソリュートはsvg rectエレメントでは機能しません –

を参照してください。基本的には、相対的なコンテナを作成し、その内側の長方形と時間をかけ、その後、矩形は絶対位置の要素である：

.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の形状のsvg rectの形状をオーバーラップすることができます

答えて

関連する問題