用CSS绘制线条

Question

基于此question，我写了jsfiddle，我想在其中添加两点。问题可能在于这些点位于六边形内。

这是HTML：

<div class="hexagon">
  <span>
    <div id="dot_spd"></div>
      <svg>
        <polyline id="spd_att" points="34,0 93,-43"></polyline>    
      </svg>
    <div id="dot_att"></div>
  </span>
</div>

如果仔细查看输出，您会看到显示一条细线，如原点（x = 0，y = 0），阻止线条正确显示！

我错过了什么？

1. 如果换掉积分，没有任何反应。
2. 不知何故，我必须在六边形区域内移动<svg>。

Answer 1

所以....你想要一条线？

＆＃13;

＆＃13;

Router.configure({
  layoutTemplate: 'layout',
  loadingTemplate: 'Loading',
  notFoundTemplate: 'NotFound'
}); 

＆＃13;

function placeDiv(id, x_pos, y_pos) {
  var d = document.getElementById(id);
  d.style.position = "absolute";
  d.style.left = x_pos+'px';
  d.style.top = y_pos+'px';
}

placeDiv("dot_spd", 34, 0);
placeDiv("dot_att", 93, -43);

＆＃13;

.hexagon {
  position: relative;
  width: 200px; 
  height: 115.47px;
  background-color: #1d2125;
  margin: 57.74px 0;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  border-left: solid 5px #494949;
  border-right: solid 5px #494949;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 141.42px;
  height: 141.42px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 24.2893px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.hexagon:before {
  top: -70.7107px;
  border-top: solid 7.0711px #494949;
  border-right: solid 7.0711px #494949;
}

.hexagon:after {
  bottom: -70.7107px;
  border-bottom: solid 7.0711px #494949;
  border-left: solid 7.0711px #494949;
}

/*cover up extra shadows*/
.hexagon span {
  display: block;
  position: absolute;
  top:2.8867513459481287px;
  left: 0;
  width:190px;
  height:109.6966px;
  z-index: 2;
  background: inherit;
}

/* dot */
#dot_spd, #dot_att, #dot_tec,
#dot_str, #dot_def, #dot_pow{
	color: #9C1E1E;
	height: 1px;
	width: 1px;
	border-style: solid;
    border-width: 1px;
}

/* line from dot to dot */
polyline {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke: #9C1E1E;
}
svg {
    overflow:visible;
    width:100%;
}

＆＃13;

＆＃13;

＆＃13;

http://jsfiddle.net/ztnr9td4/2/我认为这就是你想要的:)只需添加<div class="hexagon"> <span> <div id="dot_spd"></div> <svg> <polyline id="spd_att" points="34,0 93,-43"></polyline> </svg> <div id="dot_att"></div> </span> </div>