Блог

Главная - Вопросы по программированию - Как нарисовать линию по всему элементу html

Как нарисовать линию по всему элементу html

#html #css #svg #line #draw

Вопрос:

Я хочу нарисовать линию, соединяющую два div, и я использовал svg с абсолютной позицией, но кнопка между двумя div не может быть нажата.

Как я мог бы нарисовать линию с максимальным индексом z, абсолютной позицией, и она может щелкнуть по элементу под этой линией. Если у вас есть какие-либо идеи, это мне очень поможет, спасибо! это мой пример

Мой код :

 <html>
<body>
<div style="border: solid; width: 150px;height: 150px;"> div1 </div>
<svg height="210" width="500" style="position: absolute;">
  <line x1="50" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
<div style="border: #3F3F3F;width: 150px;height: 150px;display: flex;align-items: center;justify-content: flex-end;">
 <button>button </button>
</div>
<div style="border: solid;width: 150px;height: 150px;top: 360px;position: absolute;left: 169px;"> div3 </div>
</body>
</html>```

Ответ №1:

  1. Вы можете добавить pointer-events:none в элемент svg.
  2. Возможно, лучше использовать преобразованный div с высотой:1 пикселей вместо svg:
 .container {
  position: relative;
}

.rect {
  width:200px;
  height:200px;
  position:absolute;
  border: solid 1px black;
  box-sizing: border-box;
}

#rect2 {
  left:350px;
  top: 400px;
}

.line {
  width: 400px;
  height:1px;
  background:red;
  position:absolute;
  transform:rotate(30deg);
  transform-origin:0 0;
  top:200px;
  left:100px;
}

button {
  position: absolute;
  top:280px;
  left: 220px;
} 
 <div class="container">
  <button>Click me</button>
  <div class="rect" id="rect1"></div>
  <div class="rect" id="rect2"></div>
  <div class="line"></div>
</div>

Ответ №2:

Попробуйте дать SVG элемент z-index:-1 , и кнопка будет нажата

Просто добавьте следующий код в свой CSS

 svg{
  z-index: -1;
}

Ответ №3:

добавить стиль кнопки -> положение:исправлено

Метки: