我在w3schools中看到了這個例子，你設定了svg線的屬性，比如x1、y1、x2、y2，然后螢屏上出現了一條線。我正在使用同樣的方法，用javascript在div元素之間繪制svg線，但似乎并不奏效。
我有兩個圓，我在javascript中使用boundingClientRect讀取它們的x和y值，并使用set屬性將其設定在svg線上。我想用線來連接這兩個圓
這是我的代碼。
這是我的代碼
。const circle1 = document. querySelector('.circle-1')。
const circle2 = document.querySelector('.circle--2') 。
const line1 = document.querySelector（'#line-1'）。
line1.setAttribute('x1', circle1.getBoundingClientRect().x) 。
line1.setAttribute('y1', circle1.getBoundingClientRect().y) 。
line1.setAttribute('x2', circle2.getBoundingClientRect().x) 。
line1.setAttribute('y2', circle2.getBoundingClientRect().y)；*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient（向右，#64b5f6，#1976d2）。
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: 灰色。
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
字體大小: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
. Circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle-2 {
right: 10%;
bottom: 60%;
}<!DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8" />
< meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0" />
<link rel="styleheet" href=" 。 /style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle--1"> 1</div>
<div class="circle-2"> 2</div>
<svg>/span>
<line
id="line-1"/span>
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>/span>
</header>/span>
<script src=" 。 /script.js">/span></script>
</body>
</html>/span>uj5u.com熱心網友回復：
一個svg元素有一個尺寸，而你的線是在這個區域之外。
一個svg的默認設定是：
svg:not（:root） {
overflow: hidden;
}
所以你的那一行將不可見。
如果你把這個添加到你的樣式中：
svg {
overflow: visible;
border: 1px solid red;
你會看到你的svg的位置和它的尺寸，overflow: visible;使這一行可見：
const circle1 = document. querySelector('.circle-1')。
const circle2 = document.querySelector('.circle--2') 。
const line1 = document.querySelector（'#line-1'）。
line1.setAttribute('x1', circle1.getBoundingClientRect().x) 。
line1.setAttribute('y1', circle1.getBoundingClientRect().y) 。
line1.setAttribute('x2', circle2.getBoundingClientRect().x) 。
line1.setAttribute('y2', circle2.getBoundingClientRect().y)；*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
}
.header {
width: 100%;
height: 57rem;
background-image: linear-gradient（向右，#64b5f6，#1976d2）。
padding: 0 2rem;
}
.graph {
width: 100%;
max-width: 120rem;
background-color: 灰色。
height: 100%;
position: relative;
}
.circle {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: white;
字體大小: 2rem;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
. Circle--1 {
left: 0;
bottom: 5%;
}
.circle--1 {
left: 10%;
bottom: 60%;
}
.circle-2 {
right: 10%;
bottom: 60%;
}
svg {
overflow: visible;
border: 1px solid red;
}<!DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8" />
< meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0" />
<link rel="styleheet" href=" 。 /style.css" />
<title>Connect Divs</title>
</head>
<body>
<header class="header">
<div class="graph">
<div class="circle--1"> 1</div>
<div class="circle-2"> 2</div>
<svg>/span>
<line
id="line-1"/span>
style="stroke: rgb(255, 255, 255); stroke-width: 3"
/>
</svg>
</div>/span>
</header>/span>
<script src=" 。 /script.js">/span></script>
</body>
</html>/span>但你不應該使用overflow: visible;，而應該改變svg的大小和/或定位。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/320109.html
標籤：