Линия SVG внутри начальной загрузки 4 с гибкими элементами не видна - PullRequest
Новая
       7

Линия SVG внутри начальной загрузки 4 с гибкими элементами не видна

0 голосов
/ 11 июня 2019

Я пытаюсь соединить первые два круга с линией SVG. Когда я проверяю, я вижу строку, но не видим на странице. Пытался установить z-index. Не работает до сих пор. Когда я увеличиваю ширину, это работает. Просто div не виден. Я предполагаю, что это позади любого div. Но если я установлю z-index, разве это не должно работать? 

var line = $('#connectedLines');
var div1 = $('#node1');
var div2 = $('#node2');

var x1 = div1.offset().left + (div1.width());
var y1 = div1.offset().top + (div1.height()/2);
var x2 = div2.offset().left + (div2.width()/10);
var y2 = div2.offset().top + (div2.height()/2);

line.attr('x1',x1).attr('y1',y1).attr('x2',x2).attr('y2',y2);
.parentContainer {
  background-image: linear-gradient(to bottom, rgb(253, 118, 49,1) 25%, 
  rgb(255, 157, 107,0.5));
  background-color: #FD7631;
  height: auto;
  padding-bottom: 50px;
  top: 0;
  z-index: -1;
}

.backgroundLines{
  background-image: url("/assets/imgs/lines_background_5.png");
  background-size: cover;
  width: 100%;
  height: 50%;
}

#lines{
  background-image: url("/assets/imgs/lines_background_5.png");
  width: 100%;
  height: 25%;
  margin-top: -300px;
}

#svg{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 80px;
  z-index: 100000000 !important;
}

#connectedLines{
  display: block;
  stroke-width:10px;
  stroke:black !important;
  z-index: 100000000 !important;
}

.circleParent{
  position: block;
  z-index: 100000000 !important;
}

.img{
  background-image: url("/assets/imgs/img_8.jpg");
  height: 500px;
  width: 75%;
  background-size: cover;
  margin-top: 50px;
}

.comoHR {
  display: block;
  background-color: black;
  width: 50%;
  border: 0;
  height: 8px;
}

.leftContainer{
  width: 25%;
  height: auto;
}

.leftDivContainer{
  background-color: white;
  width: 80%;
  height: 250px;
  border-radius: 50%;
  }

.leftImage{
  height: 50%;
  width: 50%;
}

.middlePad{
  margin-top: 60px;
}

.leftText{
  width: 30%;
  height: auto;
  padding-top: 20px;
}

.comoText {
  padding-top: 20px;
}

.midContainer{
  width: 25%;
  height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="parentContainer">
    <div class="backgroundLines">
      <div class="d-flex justify-content-center imgParent">
        <div class="img">
        </div>
      </div>
      <br><br><br><br>
      <!-- textt in the top -->
      <div class="d-flex justify-content-between">
        <div class="container">
          <div class="row">
            <div class="col-sm-3">
            </div>
            <div class="col-sm-6">
              <div class="container">
                <div class="col-sm-12">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <hr class="comoHR">
                        </hr>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <h2>Heading goes here</h2>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <h3> sub heading goes here</h3>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <p>text goes here text goes here text goes here text goes here text goes here
                          text goes here text goes here text goes here text goes here text goes here
                          text goes here text goes here text goes theretext goes here text goes here
                          text goes here text goes here
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
            </div>
          </div>
        </div>
      </div>
    </div>
      <!-- first two circles -->
      <div class="container-fluid circleParent">
        <div class="d-flex justify-content-around">
          <div class="leftContainer d-flex justify-content-center" id="node1">
            <div class="d-flex flex-column align-content-center">
              <div class="leftDivContainer" >
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_17.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <h5>Visio</h5>
                </div>
              </div>
            </div>
          </div>
          <div class="circleParent">
            <svg id="svg">
              <line id="connectedLines" stroke="black"/>
          </svg>
          </div>

          <div class="leftContainer d-flex justify-content-center" id="node2">
            <div class="d-flex flex-column align-content-center">
              <div class="leftDivContainer" >
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_17.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <h5>normal</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- text after first circles -->
      <div class="d-flex justify-content-around">
        <div class="leftText">
          <p>
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
          </p>
        </div>
        <div class="leftText">
          <p>
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
          </p>
        </div>
      </div>
      <br><br>
      <!-- middle circle -->
      <div class="d-flex justify-content-center">
        <div class="midContainer" id="node2">
          <div class="d-flex flex-column align-items-center">
            <div class="leftDivContainer">
              <div class="">
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_19.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <div class="">
                    <h5>Valores</h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!--last text-->
      <br><br><br><br>
      <div class="d-flex justify-content-between">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3>child 1</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
            <div class="col-sm-4">
              <h3>child 2</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
            <div class="col-sm-4">
              <h3>child 3</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Пожалуйста, найдите codepen

1 Ответ

1 голос
/ 12 июня 2019

Это не около z-index, это около overflow.

Всякий раз, когда вы используете svg, убедитесь, что вы должны использовать height, width, overflow свойства CSS. 

var line = $('#connectedLines');
var div1 = $('#node1');
var div2 = $('#node2');

var x1 = div1.offset().left + (div1.width());
var y1 = div1.offset().top + (div1.height()/2);
var x2 = div2.offset().left + (div2.width()/10);
var y2 = div2.offset().top + (div2.height()/2);

line.attr('x1',x1).attr('y1',y1).attr('x2',x2).attr('y2',y2);
.parentContainer {
  background-image: linear-gradient(to bottom, rgb(253, 118, 49,1) 25%, rgb(255, 157, 107,0.5));
  background-color: #FD7631;
  height: auto;
  padding-bottom: 50px;
  top: 0;
  z-index: -1;
}
.backgroundLines{
  background-image: url("/assets/imgs/lines_background_5.png");
  background-size: cover;
  width: 100%;
  height: 50%;
  /* margin-top: -400px;*/
}

#lines{
  background-image: url("/assets/imgs/lines_background_5.png");
  /* display: inline; */
  width: 100%;
  height: 25%;
  margin-top: -300px;
}

#svg{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 80px;
  overflow: visible;
}

#connectedLines{
  display: block;
  stroke-width:10px;
  stroke: black !important;
}

.img{
  background-image: url("/assets/imgs/img_8.jpg");
  height: 500px;
  width: 75%;
  background-size: cover;
  margin-top: 50px;
}

.comoHR {
  display: block;
  background-color: black;
  width: 50%;
  border: 0;
  height: 8px;
}

.leftContainer{
  width: 25%;
  height: auto;
}
.leftDivContainer{
  background-color: white;
  width: 80%;
  height: 250px;
  border-radius: 50%;
}
.leftImage{
  height: 50%;
  width: 50%;
}
.middlePad{
  margin-top: 60px;
}
.leftText{
  width: 30%;
  height: auto;
  padding-top: 20px;
}
.comoText {
  padding-top: 20px;
}

.midContainer{
  width: 25%;
  height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="parentContainer">
    <div class="backgroundLines">
      <div class="d-flex justify-content-center imgParent">
        <div class="img">
        </div>
      </div>
      <br><br><br><br>
      <!-- textt in the top -->
      <div class="d-flex justify-content-between">
        <div class="container">
          <div class="row">
            <div class="col-sm-3">
            </div>
            <div class="col-sm-6">
              <div class="container">
                <div class="col-sm-12">
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <hr class="comoHR">
                        </hr>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <h2>Heading goes here</h2>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <h3> sub heading goes here</h3>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-sm-12">
                      <div class="d-flex justify-content-center">
                        <p>text goes here text goes here text goes here text goes here text goes here
                          text goes here text goes here text goes here text goes here text goes here
                          text goes here text goes here text goes theretext goes here text goes here
                          text goes here text goes here
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
            </div>
          </div>
        </div>
      </div>
    </div>
      <!-- first two circles -->
      <div class="container-fluid circleParent">
        <div class="d-flex justify-content-around">
          <div class="leftContainer d-flex justify-content-center" id="node1">
            <div class="d-flex flex-column align-content-center">
              <div class="leftDivContainer" >
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_17.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <h5>Visio</h5>
                </div>
              </div>
            </div>
          </div>
          <div class="circleParent">
            <svg id="svg">
              <line id="connectedLines" stroke="black"/>
          </svg>
          </div>

          <div class="leftContainer d-flex justify-content-center" id="node2">
            <div class="d-flex flex-column align-content-center">
              <div class="leftDivContainer" >
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_17.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <h5>normal</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- text after first circles -->
      <div class="d-flex justify-content-around">
        <div class="leftText">
          <p>
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
          </p>
        </div>
        <div class="leftText">
          <p>
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
            skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
          </p>
        </div>
      </div>
      <br><br>
      <!-- middle circle -->
      <div class="d-flex justify-content-center">
        <div class="midContainer" id="node2">
          <div class="d-flex flex-column align-items-center">
            <div class="leftDivContainer">
              <div class="">
                <div class="d-flex flex-column align-items-center middlePad">
                  <div>
                    <img src="assets/icons/icon_19.png" class="leftImage rounded mx-auto d-block">
                  </div>
                  <div class="">
                    <h5>Valores</h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!--last text-->
      <br><br><br><br>
      <div class="d-flex justify-content-between">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3>child 1</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
            <div class="col-sm-4">
              <h3>child 2</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
            <div class="col-sm-4">
              <h3>child 3</h3>
              <p>
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
                skdfh skufhdish f suf hisadhfsa id ufushafhsahfiuh sdfhsfhsifh
              </p>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Codepen: https://codepen.io/anon/pen/QXwpmR

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...