如何用svg線條替換html紅色和綠色垂直和水平線？

我想用 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>

uj5u.com熱心網友回復：

在這里，您的代碼補充了 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>

標籤：htmlcsssvg

上一篇：使svg模式內容從<pattern>的框架溢位，而不是被截斷

下一篇：在選單上選擇不同選項時更改SVG填充