html - bootstrap 4 内的 SVG 行，flex div 不可见-6ren

html - bootstrap 4 内的 SVG 行，flex div 不可见

转载作者：太空宇宙更新时间：2023-11-04 06:09:30

我正在尝试将前两个圆 div 与 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

最佳答案

这不是关于 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>

代码笔:https://codepen.io/anon/pen/QXwpmR

关于html - bootstrap 4 内的 SVG 行，flex div 不可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56543285/

文章推荐： c# - 在 C# 项目 : Can we mix raw C and C# code (VS10) 的 C 部分

文章推荐： java - Maven:缺少 Artifact 急板

文章推荐： c++ - 需要一些帮助将我的结果写入文件

文章推荐： html - 如何使焦点属性保持不变，直到我单击另一个按钮

linux - 我的文件中有 10 行。现在我需要打印前 3 行，然后打印第 5-7 行，然后打印第 9-10 行。 LINUX 的命令是什么？
猫f1.txt阿曼维沙尔阿杰贾伊维杰拉胡尔曼尼什肖比特批评塔夫林现在输出应该符合上面给定的条件最佳答案您可以在文件读取循环中设置一个计数器并打印它，计数=0 读取行时做让我们数一数++ if
python - 查找2个文件中的公共(public)行，从文件1写入公共(public)行，从文件2写入非公共(public)行
我正在尝试查找文件 1 和文件 2 中的共同行。如果公共(public)行存在，我想写入文件 2 中的行，否则打印文件 1 中的非公共(public)行。fin1 和 fin2 是这里的文件句柄。它读
mysql - 从第一个表中选择 1 行，然后从其他表中选择 n 行，然后返回到第一个表并选择第 2 行，依此类推
我有这个 SQL 脚本: CREATE TABLE `table_1` ( `IDTable_1` int(11) NOT NULL, PRIMARY KEY (`IDTable_1`) );
sql - 哪个最快，1x 插入 512 行，4x 插入 128 行，或 512x 插入 1 行
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
Mysql 选择子(行，行 - 1)
如何从用户中选择user_id，SUB(row, row - 1)，其中user_id=@userid我的表用户，id 为 1、3、4、10、11、23...(不是++) --id---------u
mysql - 1M 行，1 个表，几列与 300 个表，3000 行，几列与 300 列，3000 行，1 个表？
我曾尝试四处寻找解决此问题的最佳方法，但我找不到此类问题的任何先前示例。我正在构建一个基于超本地化的互联网购物中心，该区域分为大约 3000 个区域。每个区域包含大约 300 个项目。它们是相似的项
php - 我在第 32 行、第 34 行、第 36 行、第 38 行有错误 :Notice: Undefined offset: 1 in C:\wamp\www\index. php
preg_match('|phpVersion = (.*)\n|',$wampConfFileContents,$result); $phpVersion = str_replace('"','',
正则表达式 - 如何删除前 10 行/和最后 10 行
我正在尝试创建一个正则表达式，使用“搜索并替换全部”删除 200 个 txt 文件的第一行和最后 10 行我尝试 (\s*^(\h*\S.*)){10} 删除包含的前 10 行空白，但效果不佳。最
java - 结果集返回 3 行，但我只能打印 2 行？
下面的代码从数据库中获取我需要的信息，但没有打印出所有信息。首先，我知道它从表中获取了所有正确的信息，因为我已经在 sql Developer 中尝试过查询。 public static void m
sql - 选择前 10 行，然后随机选择其中 5 行
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
c# - 数据库操作预计影响 1 行，但实际影响 0 行
我试图在两个表中插入记录，但出现异常。您能帮我解决这个问题吗？首先我尝试了下面的代码。 await _testRepository.InsertAsync(test); await _xyzRepo
css - 在桌面上显示 1 行，在移动设备上显示 2 行
这个基本的 bootstrap CSS 显示 1 行 4 列: Text Text Text
mysql - 从表中选择前 X 行，忽略前 Y 行
如果我想从表中检索前 10 行，我将使用以下代码: SELECT * FROM Persons LIMIT 10 我想知道的是如何检索前 10 个结果之后的 10 个结果。如果我在下面执行这段代码，
java - 为什么 [列,行] 而不是 [行,列]
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时，不是像您通常期望的那样使用sheet.getCell(row,col)，而是使用sheet.getCell(col,ro
PHP - 显示表中最后 3 行 SQL 行(不起作用)
我正在尝试在我的网站上开发一个用户个人资料系统，其中包含用户之前发布的 3 个帖子。我可以让它选择前 3 条记录，但它只会显示其中一条。我是不是因为凌晨 2 点就想编码而变得愚蠢？ query($q)
php - MySQL 组相同的标题(行)并求和金钱(行)，但保留单独的时间戳进行排序
我在互联网上寻找答案，但找不到任何答案。 (我可能问错了？)我有一个看起来像这样的表: 我一直在使用查询: SELECT title, date, SUM(money) FROM payments W
mysql - 获取 100 行，每组最多 10 行
我有以下查询，我想从数据库中获取 100 个项目，但 host_id 多次出现在 urls 表中，我想每个 host_id 从该表中最多获取 10 个唯一行。 select * from urls j
sql - 如何查询前 10 行，下一次从表中查询其他 10 行
我的数据库表中有超过 500 行具有特定日期。查询特定日期的行。 select * from msgtable where cdate='18/07/2012' 这将返回 500 行。如何逐行查询
bash - 打印 n 行，然后在大文本文件中跳过 n 行
我想使用 sed 从某一行开始打印 n 行、跳过 n 行、打印 n 行等，直到文本文件结束。例如在第 4 行声明，打印 5-9，跳过 10-14，打印 15-19 等来自文件 1 2 3 4 5 6
php - 验证密码返回 0 行，而预期返回 1 行
我目前正在执行验证过程来检查用户的旧密码，但问题是我无法理解为什么我的查询返回零行，而预期它有 1 行。另一件事是，即使我不将密码文本转换为 md5，哈希密码仍然得到正确的答案，但我不知道为什么会发生

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - bootstrap 4 内的 SVG 行，flex div 不可见