如何用svg线代替html红绿纵横线？

Question

我想用svg线代替绿线和红线。

我该怎么做？

左、右、上、下的线条。

我想用svg线替换它们。

这就是我所做的一切。

我想用svg行替换html行。

我该怎么做？

这就是我所做的一切。

代码https://jsfiddle.net/L1brz6xv/

​

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer {
  display: flex;
  min-height: 100vh;
  align-content: center;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}
.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;

}

.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
 
 
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}

.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid blue;
  pointer-events: none;
}


.fence div {
  position: absolute;
  /*top: 0;*/
  left: 0;
  right:0;
  /*width: 100%;*/
  height: 0.55%;
  background: green;
}

.fence div:nth-child(1) {
  top: 10%;
}

.fence div:nth-child(2) {
  top: 20%;
}

.fence div:nth-child(3) {
  top: 30%;
}

.fence div:nth-child(4) {
  top: 40%;
}

.fence div:nth-child(5) {
  top: 50%;
}

.fence div:nth-child(6) {
  top: 60%;
}

.fence div:nth-child(7) {
  top: 70%;
}

.fence div:nth-child(8) {
  top: 80%;
}

.fence div:nth-child(9) {
  top: 90%;
}


.cross::before,
.cross::after {
  content: "";
  background: red;
}

.cross::before

/*horizontal*/
  {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 100%;*/
  height: 2.8%;
  /*height: 10px;*/
}

.cross::after

/*vertical*/
  {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /*width: 10px;*/
  width: 1.5%;
  /*height: 100%;*/
}

 <div class="outer">
   <div class="curtain ">
     <div class="ratio-keeper">
             <div class="fence">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
       </div>

  
       <div class="cross"></div>

     </div>
   </div>
 </div>

​

Answer 1

在这里，您的代码补充了SVG代码。

​

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.outer {
  display: flex;
  min-height: 100vh;
  align-content: center;
}
.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
  border: 1px solid #333;
}
.curtain {
  flex: 1 0 0;
  margin: auto;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
}
.curtain::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px solid;
  border-color: #000 #101010 #000 #101010;
}
.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid blue;
  pointer-events: none;
}

<div class="outer">
  <div class="curtain ">
    <div class="ratio-keeper">
      <svg width="100%" height="100%" style="position: absolute; top: 0;">
        <defs>
          <line id="row" x2="100%" stroke="green" />
        </defs>
        <use href="#row" y="10%" />
        <use href="#row" y="20%" />
        <use href="#row" y="30%" />
        <use href="#row" y="40%" />
        <use href="#row" y="60%" />
        <use href="#row" y="70%" />
        <use href="#row" y="80%" />
        <use href="#row" y="90%" />
        <line y1="50%" x2="100%" y2="50%" stroke="red" stroke-width="10" />
        <line x1="50%" x2="50%" y2="100%" stroke="red" stroke-width="10" />
      </svg>
    </div>
  </div>
</div>

​