主頁 > 作業系統 > 一個SVG的多個路徑的多個復選框

一個SVG的多個路徑的多個復選框

2022-04-21 05:35:27 作業系統

所以我做了這個代碼（當你點擊它的時候它會選中一個復選框）：

.mySVG input[type=checkbox]{
    display: none;
}
.mySVG label{
    cursor: pointer;
}
.mySVG svg{
    fill:#F9F7F7;
    stroke: #112D4E;
    stroke-width: 5;
    width:100px;
}
.mySVG input[type="checkbox"]:checked   label .Vsvg{
    fill: #3F72AF;
}
<div class="mySVG">
  <input type="checkbox" id="x" name="x">
  <label for="x">
      <svg viewBox="0 0 290.5 366.2">
          <path id="V1svg" class="Vsvg" d="  M249.3,38.1c-6.5,8.6-14.9,21.8-14.1,25.6c0.2,1.1-10.7,0.1-14.4,0.1c-3.4-0.1-8-0.2-11.3,0.2c-2.8,0.3-9.1,1.2-9.1,1.2l-10.2,2.8  l-11,4.1l-12.7,5.2l-8.6,4.5l-8.6,6.5l-8.2,7.3l-4.5,8.2l-2.8,9l-4.5,19.9l-2.4,8.2l-2,4.5l-0.8,3.6l-0.8,7.3l-0.8,9.4l-0.8,4.9  l-2.4,3.6l-6.9,3.2c0,0-3.3,0.2-4.5,0.8c-0.5,0.2-1,0.7-1.2,1.2c-0.2,0.6,0.1,1.5-0.2,1.9c-0.6,1-1.8,1.5-3.1,2.2  c-1.4,0.7-2.4,1.2-3.6,1.2c-0.7,0-2.1,0.1-2.8,0.1c-1,0-2.3,0-3.2,0c-1.1,0-2.6-0.2-3.6-0.4c-0.9-0.2-1.9-0.8-2.8-0.8  c-1.2,0-1.5-0.4-1.7-0.1c-1.7,1.5-2.7,2.8-2.7,2.8l-3.2,2.8l-5.7,6.9l-8.6,13.5l-3.2,4.5l-7.8,2.8l-7.8,1.6l-4.5,4.5l-3.6,3.6  c0,0-2.1,3.6-3.6,3.6c-1.8,0.2-4.9-3.2-4.9-3.2l-1.6-2.4l-0.4-2l-0.4-3.2c0,0-0.2-1.5,0-2c0.2-1.2,1.6-3.6,1.6-3.6l2-3.2  c0,0,1.2-1,1.8-1.6c0.6-0.5,1.9-1.7,1.9-1.7l1.6-1.6l1.6-1.6c0,0,3.4-6,4.9-8.6c2.7-4.8,9.4-15.9,9.4-15.9l3.2-4.9l1.6-2l2.8-3.6  l0.4-3.6v-3.6v-2.4l-1.3-3.1l-2-4.1l-0.8-4.9v-4.1l3.2-10.2l6.1-14.6c0,0,2.1-5.3,3.1-7.8c1-2.4,3.1-8.2,3.1-8.2l7.3-17.9l6.9-9.8  l6.5-8.2l12.3-7.8l14.3-8.2l23.2-8.6L158,39l28.2-1.6l20.4-0.8l27.3-0.8l9.4,0.3C243.3,36.1,250.5,36.5,249.3,38.1z"/>
          <path id="V2svg" class="Vsvg" d="  M35.1,230.6l6.5-7.1c0,0,2.2-2.4,3.3-3.5c0.4-0.4,1-1.2,1.5-1.3c2-0.5,7.6-1.5,7.6-1.5l8.2-2.8l12.4-19.5l5.3-5.7l5.3-4.9l1-0.6  l5.7,1.6l6.9-0.2h1.9l4.7-2.3c0,0,0.9-0.9,1-1.5c0.2-0.4,0-1.5,0-1.5s0.3-1,0.6-1.3c0.7-0.6,3.1-1,3.1-1s2-0.2,2.7-0.4  c1.9-0.6,4.5-1.5,6.1-3.1c1-1,2.2-2.5,2.6-3.9c0.7-2.2,1.2-7.5,1.2-7.5l1-13.2l1.5-5.1l1.6-3.6l1.6-5.1l1.6-6.3l2-9.4  c0,0,2.6-11.5,4.5-16.1c0.6-1.5,1.8-3.1,2.5-4.5c0.6-1,1.2-2.7,2-3.6c1.2-1.5,5.1-4.3,5.1-4.3l3.6-3.6c0,0,2.7-2.7,2.8-2.3  c0.6,1.5,0,8.4,0,8.4l-0.4,2.8l-0.4,2.3l-0.2,7.1l0.4,9.2l0.8,3.5c0,0,0.5,4.2,0.7,6.1c0.2,1.6,0.9,5.5,0.9,5.5l0.2,6.9l0.4,8.8v9.2  v11l-1.2,11c0,0-0.6,3.4-1,4.4c-0.5,1.1-0.8,4.1-0.8,4.1s-1.5,4.8-2.2,6.8c-1,2.9-4,9.3-4,9.3l-3.2,6.9l-2,4.1l-2,5.5l-2.4,8.8  l-3.6,9c0,0-2.7,4.7-3.8,6.9c-0.6,1-1.6,2.3-2.3,3.2c-0.9,0.9-2,1.9-3.1,2.7c-1,0.7-3.1,1.5-4.3,2c-3.4,1.2-11,2.9-11,2.9l-7.9,1.9  l-8.2,0.8l-5.7,1.2c0,0-1.7,0.3-2.4,0.4c-0.4,0-1-0.2-1.2,0c-0.8,0.7,0.8,2.5,0.4,3.6c-0.2,0.6-1.9-0.6-1.9-0.6l-1.9-0.4l-2.8,0.4  l-6.7,0.4H67l-2.4,0.8l-2,0.6l-2.4,0.6l-3.2-0.2c0,0-2.3,0-3.2,0c-0.8,0-1.9,0-2.7,0c-0.2,0-0.6,0.2-0.8,0c-0.6-0.4-1-1.5-1.2-2.3  c-0.1-0.3,0-1,0-1s-0.2-0.7-0.4-1c-0.2-0.4-1.2-1-1.2-1s-0.8-0.3-1-0.6c-0.2-0.3-0.1-1.4-0.1-1.4s0-1,0.1-1.5  c0.2-0.7,0.7-1.9,0.7-2.3c0.1-0.6,0.8-2.2,0.8-2.4c0.2-1,1.9-8.6,1.5-11.6c-0.1-0.7-0.3-1.5-0.5-2.1c-0.1-0.3-0.1-0.8-0.2-1.1  c-0.1-0.2-0.2-0.4-0.3-0.7c0-0.1-0.3-0.6-0.5-0.8c-0.1-0.2-0.5-0.5-0.6-0.6c-0.2-0.2-0.7-0.7-1-0.7c-3.1,0.1-1.1,0-1.3,0  c-1.3,0.1-1.9-0.1-3.1,0.4c-0.2,0.1-0.3,0.3-0.5,0.4c-0.6,0.2-1.9-0.2-1.9-0.2s-1.6-0.2-2.3-0.5c-0.7-0.3-2.2-1.7-2.2-1.7"/>
          <path id="V3svg" class="Vsvg" d="  M235.1,64.5c-1-1.1-5.2-0.2-5.2-0.2l-6.9-0.2l-8.7-0.4l-6.7,0.4l-7.7,1.1l-10.4,2.7l-13.7,5.4l-8.9,3.7l-5.7,3.1l-3.3,1.7l-2.6,1.9  l-1.7,1.5l-0.9,0.3l0.6,3.1l-0.4,5l-1,6.3v8.3l0.4,6.5l0.9,3.6l0.2,2.7l0.3,2.2l0.4,3l0.9,4.1v5.2l0.4,12.8l0.2,12.1l-0.2,6l-0.6,5  l-0.7,6.1l-1,4.6l-0.9,4.3l-3.7,10.3l-5,11l-3.1,6.1l-2.7,8.7l-1.3,5.2l-2.3,4.8l-2,5l-2.8,4.8l-2.8,4l-3.1,2.7l-6.1,2.2l-10,2.6  l-5.7,1.3l-5.2,0.6l-5.2,0.7c0,0-3.6,1-5.2,1.1c-0.9,0.1-2.4-0.6-3,0.2c-0.7,0.9,1.5,2.9,0.7,3.7c-0.4,0.4-1.7-0.3-1.7-0.3  s-1.1-0.6-1.7-0.7c-0.6-0.1-2.3,0.3-2.3,0.3l-6,0.6h-2.6H67l-6.5,1.9l-5.1-0.1c0,0-1.5-0.2-1.9,0.1c-0.5,0.4-0.8,1.1-1.3,1.5  c-0.2,0.2-0.8,1.2-1,1.5c-0.6,0.6-1.1,2.7-1.1,3.1c-0.2,1.2-0.6,3-0.6,4.3c0,1-0.1,1.9-0.2,2.2c-0.1,0.5,0.1,2.8,0.4,3.1  c0.4,0.4,1.4,0.3,1.9,0.6c0.4,0.2,0.5,0.6,0.9,0.9c0.2,0.1,0.2,0,0.4,0.1c0.5,0.2,0.9,0.8,1.1,1.3c0.5,1,1.4,1.6,2.2,2.4  c0.6,0.7,1.3,1.8,1.7,2.6c0.2,0.5,0.6,1.1,0.7,1.7c0.2,1,0.1,2.3-0.3,3.1c-0.2,0.7-1.1,1.5-1.5,2.2c-0.8,1.4-1.5,3.4-2.3,4.8  c-0.4,0.7-1,1.7-1.3,2.4c-0.2,0.6-0.7,1.4-0.8,2.2c-0.2,1.4,0.2,5.1,0.2,5.1v2.2c0,0,0.1,1.3,0.2,1.8c0.2,0.6,0.6,1.2,0.6,1.8  c0,1-0.2,2.3,0,3.3c0.1,0.5,0.6,1,0.7,1.5c0.2,0.7-0.1,1.7,0.2,2.4c0.2,0.8,0.8,1.9,1.3,2.6c0.4,0.6,1,1.5,1.5,2c1,1,2.7,2,4,2.7  c1,0.6,2.3,1.3,3.4,1.5c1.9,0.5,6.7,0.4,6.7,0.4h5c0,0,5.6,0.3,7.8-0.5c0.9-0.3,2.5-1.6,2.5-1.6s1.1-1.3,1.7-1.7  c0.8-0.6,2-1.3,3-1.5c0.9-0.3,2.2-0.3,3.1-0.4c2.4-0.2,5.7,0.3,8.2-0.2c0.6-0.2,1.5-0.6,2.2-0.9c1.6-0.5,5.4-1,5.4-1l6.3-0.7  l10.4-2.8l6.3-2.4l9.1-4.6l6-2.8l3.7-2.6l4.6-3.4l4.4-4.1l3-3.3l2.7-3.9l2.6-6.1c0,0,1.8-7.5,3-10.7c0.5-1.3,1.9-4.3,1.9-4.3  s1.4-2.3,1.8-3.3c1.1-2.7,2-6.5,3.1-9.2c0.8-2.1,3.1-6.9,3.1-6.9l1.7-3.4l2.3-3.7c0,0,1.6-2.7,2.3-3.9c1-1.5,2.1-3.6,3.1-5.2  c1-1.5,3.6-4.8,3.6-4.8s1.6-2.5,2.4-3.4c1.5-1.6,3.6-3.6,5.2-5c1-0.7,2.3-1.4,3.3-2c1-0.6,2.6-1.4,3.7-1.9c1.7-0.7,5.7-2.3,5.7-2.3  l2.8-2c0,0,1.2-0.6,1.5-1c0.2-0.5-0.2-1.2,0-1.7c0.2-0.3,0.6-0.8,0.9-0.7c0.4,0.1,0.4,0.8,0.6,1.1c0.2,0.4,0.7,0.7,1.2,0.8  c0.8,0.2,0.8-1.3,1-2c0.4-1,0.4-1.9,0.4-2.7c0.1-1.6,0-2.7,0.1-4.5c0-0.5-0.6-1.9-0.6-2.3c0.1-0.9-0.9-3.1-0.9-3.1l-1.1-3  c0,0-0.8-1.9-1.1-2.7c-0.2-0.5-0.7-1.1-0.7-1.7c0-0.4,0.3-1.1,0.7-1.1c0.2,0,0.4,0.4,0.6,0.6c0.5,0.6,1.5,1.9,1.5,1.9l1.7,1  c0,0,1.6-0.1,2.3-0.3c0.6-0.2,1.4-1,2-1.3c0.6-0.2,1.5-0.2,2-0.6c0.3-0.2,0.4-0.8,0.7-1c0.6-0.3,1.6,0,2.3,0.2  c0.5,0.2,1.5,0.7,1.5,0.7s1.5,0.1,2-0.2c0.4-0.2,0.8-0.6,1-1c0.2-0.5-0.1-1.3,0-1.9c0.1-0.5,0.3-1,0.6-1.5c0.2-0.3,0.8-0.4,1-0.7  c0.2-0.3,0-0.8,0-1.1c0-2.3,0.2-7.6,0.2-7.6s-0.3-3.6,0.2-5.2c0.2-0.5,0.4-1.2,0.9-1.5c0.4-0.2,1.2,0.3,1.5,0  c0.6-0.5,0.4-2.6,0.4-2.6s0.2-4.4-0.2-6c-0.2-0.6-1-1.3-1.7-1.5c-0.5-0.2-1.1,0.2-1.5,0.3c-0.5,0-1.1,0-1.5-0.2  c-0.5-0.2-0.9-1-1.5-1c-0.6,0-1.1,0.8-1.7,1c-0.2,0.1-0.6,0.2-0.7,0c-0.4-0.3-0.4-1.2-0.4-1.7c-0.1-1,0.9-3.5,0-3.1  c-0.2,0.1-1,0-1.3-0.3c-0.6-0.6-0.4-2.7-0.4-2.7l-0.6-2.5l-2.4-19.3l-0.2-4.1l-0.2-4.4l-0.5-7.7l0.2-6.9l0.2-7.3l0.9-8.2l1.3-7.7  l0.9-6.9c0,0,0.5-3.7,1-5.2c0.4-1.4,1.5-3,2-4.3c0.4-0.8,0.9-1.3,1.1-2.2C235.2,65.6,235.8,65.3,235.1,64.5z"/>
      </svg>
  </label>
</div>

我希望能夠制作 3 個不同的復選框，當我單擊構成面部的 3 條路徑之一時，它們會選中或取消選中。比如喜歡

<svg viewBox="0 0 290.5 366.2">
  <input type="checkbox" id="x" name="x">
  <label for="x">
    <path id="V1svg" class="Vsvg" d="..."/>
  </label>
  <input type="checkbox" id="y" name="y">
  <label for="y">
    <path id="V2svg" class="Vsvg" d="..."/>
  </label>
  <input type="checkbox" id="z" name="z">
  <label for="z">
    <path id="V3svg" class="Vsvg" d=" ... "/>
  </label>
</svg>

我還沒有弄清楚如何做到這一點？您知道這樣做的簡單原因嗎？

uj5u.com熱心網友回復：

正如@Michael Mullany 指出的那樣，pointer-events: visiblePainted應用于路徑元素就可以了。

您還需要禁用標簽上的指標事件：

svg {
  display: inline-block;
  width: 10em;
}

.mySVG {
  position: relative;
  width: 10em;
}

.mySVG label {
  cursor: none;
  pointer-events: none;
  position: absolute;
  top: 0;
}

.Vsvg use {
  pointer-events: visiblePainted;
  cursor: pointer;
}

.mySVG input[type="checkbox"] {
  display: none;
}

.mySVG svg {
  fill: #f9f7f7;
  stroke: #112d4e;
  stroke-width: 5;
  width: 100px;
}

.mySVG input[type="checkbox"]:checked label .Vsvg {
  fill: #3f72af;
}
<div class="mySVG">
  <input type="checkbox" id="x" name="x">
  <label for="x">
     <svg class="Vsvg" viewBox="0 0 290.5 366.2">
        <use href="#V1svg" />
    </svg>
  </label>
  <input type="checkbox" id="y" name="y">
  <label for="y">
      <svg class="Vsvg" viewBox="0 0 290.5 366.2">
        <use href="#V2svg" />
    </svg>
  </label>
  <input type="checkbox" id="z" name="z">
  <label for="z">
      <svg class="Vsvg" viewBox="0 0 290.5 366.2">
        <use href="#V3svg" />
    </svg>
  </label>


  <svg class="svgAsset" viewBox="0 0 290.5 366.2">
        <defs>
          <path id="V1svg" class="Vsvg" d="  M249.3,38.1c-6.5,8.6-14.9,21.8-14.1,25.6c0.2,1.1-10.7,0.1-14.4,0.1c-3.4-0.1-8-0.2-11.3,0.2c-2.8,0.3-9.1,1.2-9.1,1.2l-10.2,2.8  l-11,4.1l-12.7,5.2l-8.6,4.5l-8.6,6.5l-8.2,7.3l-4.5,8.2l-2.8,9l-4.5,19.9l-2.4,8.2l-2,4.5l-0.8,3.6l-0.8,7.3l-0.8,9.4l-0.8,4.9  l-2.4,3.6l-6.9,3.2c0,0-3.3,0.2-4.5,0.8c-0.5,0.2-1,0.7-1.2,1.2c-0.2,0.6,0.1,1.5-0.2,1.9c-0.6,1-1.8,1.5-3.1,2.2  c-1.4,0.7-2.4,1.2-3.6,1.2c-0.7,0-2.1,0.1-2.8,0.1c-1,0-2.3,0-3.2,0c-1.1,0-2.6-0.2-3.6-0.4c-0.9-0.2-1.9-0.8-2.8-0.8  c-1.2,0-1.5-0.4-1.7-0.1c-1.7,1.5-2.7,2.8-2.7,2.8l-3.2,2.8l-5.7,6.9l-8.6,13.5l-3.2,4.5l-7.8,2.8l-7.8,1.6l-4.5,4.5l-3.6,3.6  c0,0-2.1,3.6-3.6,3.6c-1.8,0.2-4.9-3.2-4.9-3.2l-1.6-2.4l-0.4-2l-0.4-3.2c0,0-0.2-1.5,0-2c0.2-1.2,1.6-3.6,1.6-3.6l2-3.2  c0,0,1.2-1,1.8-1.6c0.6-0.5,1.9-1.7,1.9-1.7l1.6-1.6l1.6-1.6c0,0,3.4-6,4.9-8.6c2.7-4.8,9.4-15.9,9.4-15.9l3.2-4.9l1.6-2l2.8-3.6  l0.4-3.6v-3.6v-2.4l-1.3-3.1l-2-4.1l-0.8-4.9v-4.1l3.2-10.2l6.1-14.6c0,0,2.1-5.3,3.1-7.8c1-2.4,3.1-8.2,3.1-8.2l7.3-17.9l6.9-9.8  l6.5-8.2l12.3-7.8l14.3-8.2l23.2-8.6L158,39l28.2-1.6l20.4-0.8l27.3-0.8l9.4,0.3C243.3,36.1,250.5,36.5,249.3,38.1z"/>
          <path id="V2svg" class="Vsvg" d="  M35.1,230.6l6.5-7.1c0,0,2.2-2.4,3.3-3.5c0.4-0.4,1-1.2,1.5-1.3c2-0.5,7.6-1.5,7.6-1.5l8.2-2.8l12.4-19.5l5.3-5.7l5.3-4.9l1-0.6  l5.7,1.6l6.9-0.2h1.9l4.7-2.3c0,0,0.9-0.9,1-1.5c0.2-0.4,0-1.5,0-1.5s0.3-1,0.6-1.3c0.7-0.6,3.1-1,3.1-1s2-0.2,2.7-0.4  c1.9-0.6,4.5-1.5,6.1-3.1c1-1,2.2-2.5,2.6-3.9c0.7-2.2,1.2-7.5,1.2-7.5l1-13.2l1.5-5.1l1.6-3.6l1.6-5.1l1.6-6.3l2-9.4  c0,0,2.6-11.5,4.5-16.1c0.6-1.5,1.8-3.1,2.5-4.5c0.6-1,1.2-2.7,2-3.6c1.2-1.5,5.1-4.3,5.1-4.3l3.6-3.6c0,0,2.7-2.7,2.8-2.3  c0.6,1.5,0,8.4,0,8.4l-0.4,2.8l-0.4,2.3l-0.2,7.1l0.4,9.2l0.8,3.5c0,0,0.5,4.2,0.7,6.1c0.2,1.6,0.9,5.5,0.9,5.5l0.2,6.9l0.4,8.8v9.2  v11l-1.2,11c0,0-0.6,3.4-1,4.4c-0.5,1.1-0.8,4.1-0.8,4.1s-1.5,4.8-2.2,6.8c-1,2.9-4,9.3-4,9.3l-3.2,6.9l-2,4.1l-2,5.5l-2.4,8.8  l-3.6,9c0,0-2.7,4.7-3.8,6.9c-0.6,1-1.6,2.3-2.3,3.2c-0.9,0.9-2,1.9-3.1,2.7c-1,0.7-3.1,1.5-4.3,2c-3.4,1.2-11,2.9-11,2.9l-7.9,1.9  l-8.2,0.8l-5.7,1.2c0,0-1.7,0.3-2.4,0.4c-0.4,0-1-0.2-1.2,0c-0.8,0.7,0.8,2.5,0.4,3.6c-0.2,0.6-1.9-0.6-1.9-0.6l-1.9-0.4l-2.8,0.4  l-6.7,0.4H67l-2.4,0.8l-2,0.6l-2.4,0.6l-3.2-0.2c0,0-2.3,0-3.2,0c-0.8,0-1.9,0-2.7,0c-0.2,0-0.6,0.2-0.8,0c-0.6-0.4-1-1.5-1.2-2.3  c-0.1-0.3,0-1,0-1s-0.2-0.7-0.4-1c-0.2-0.4-1.2-1-1.2-1s-0.8-0.3-1-0.6c-0.2-0.3-0.1-1.4-0.1-1.4s0-1,0.1-1.5  c0.2-0.7,0.7-1.9,0.7-2.3c0.1-0.6,0.8-2.2,0.8-2.4c0.2-1,1.9-8.6,1.5-11.6c-0.1-0.7-0.3-1.5-0.5-2.1c-0.1-0.3-0.1-0.8-0.2-1.1  c-0.1-0.2-0.2-0.4-0.3-0.7c0-0.1-0.3-0.6-0.5-0.8c-0.1-0.2-0.5-0.5-0.6-0.6c-0.2-0.2-0.7-0.7-1-0.7c-3.1,0.1-1.1,0-1.3,0  c-1.3,0.1-1.9-0.1-3.1,0.4c-0.2,0.1-0.3,0.3-0.5,0.4c-0.6,0.2-1.9-0.2-1.9-0.2s-1.6-0.2-2.3-0.5c-0.7-0.3-2.2-1.7-2.2-1.7"/>
          <path id="V3svg" class="Vsvg" d="  M235.1,64.5c-1-1.1-5.2-0.2-5.2-0.2l-6.9-0.2l-8.7-0.4l-6.7,0.4l-7.7,1.1l-10.4,2.7l-13.7,5.4l-8.9,3.7l-5.7,3.1l-3.3,1.7l-2.6,1.9  l-1.7,1.5l-0.9,0.3l0.6,3.1l-0.4,5l-1,6.3v8.3l0.4,6.5l0.9,3.6l0.2,2.7l0.3,2.2l0.4,3l0.9,4.1v5.2l0.4,12.8l0.2,12.1l-0.2,6l-0.6,5  l-0.7,6.1l-1,4.6l-0.9,4.3l-3.7,10.3l-5,11l-3.1,6.1l-2.7,8.7l-1.3,5.2l-2.3,4.8l-2,5l-2.8,4.8l-2.8,4l-3.1,2.7l-6.1,2.2l-10,2.6  l-5.7,1.3l-5.2,0.6l-5.2,0.7c0,0-3.6,1-5.2,1.1c-0.9,0.1-2.4-0.6-3,0.2c-0.7,0.9,1.5,2.9,0.7,3.7c-0.4,0.4-1.7-0.3-1.7-0.3  s-1.1-0.6-1.7-0.7c-0.6-0.1-2.3,0.3-2.3,0.3l-6,0.6h-2.6H67l-6.5,1.9l-5.1-0.1c0,0-1.5-0.2-1.9,0.1c-0.5,0.4-0.8,1.1-1.3,1.5  c-0.2,0.2-0.8,1.2-1,1.5c-0.6,0.6-1.1,2.7-1.1,3.1c-0.2,1.2-0.6,3-0.6,4.3c0,1-0.1,1.9-0.2,2.2c-0.1,0.5,0.1,2.8,0.4,3.1  c0.4,0.4,1.4,0.3,1.9,0.6c0.4,0.2,0.5,0.6,0.9,0.9c0.2,0.1,0.2,0,0.4,0.1c0.5,0.2,0.9,0.8,1.1,1.3c0.5,1,1.4,1.6,2.2,2.4  c0.6,0.7,1.3,1.8,1.7,2.6c0.2,0.5,0.6,1.1,0.7,1.7c0.2,1,0.1,2.3-0.3,3.1c-0.2,0.7-1.1,1.5-1.5,2.2c-0.8,1.4-1.5,3.4-2.3,4.8  c-0.4,0.7-1,1.7-1.3,2.4c-0.2,0.6-0.7,1.4-0.8,2.2c-0.2,1.4,0.2,5.1,0.2,5.1v2.2c0,0,0.1,1.3,0.2,1.8c0.2,0.6,0.6,1.2,0.6,1.8  c0,1-0.2,2.3,0,3.3c0.1,0.5,0.6,1,0.7,1.5c0.2,0.7-0.1,1.7,0.2,2.4c0.2,0.8,0.8,1.9,1.3,2.6c0.4,0.6,1,1.5,1.5,2c1,1,2.7,2,4,2.7  c1,0.6,2.3,1.3,3.4,1.5c1.9,0.5,6.7,0.4,6.7,0.4h5c0,0,5.6,0.3,7.8-0.5c0.9-0.3,2.5-1.6,2.5-1.6s1.1-1.3,1.7-1.7  c0.8-0.6,2-1.3,3-1.5c0.9-0.3,2.2-0.3,3.1-0.4c2.4-0.2,5.7,0.3,8.2-0.2c0.6-0.2,1.5-0.6,2.2-0.9c1.6-0.5,5.4-1,5.4-1l6.3-0.7  l10.4-2.8l6.3-2.4l9.1-4.6l6-2.8l3.7-2.6l4.6-3.4l4.4-4.1l3-3.3l2.7-3.9l2.6-6.1c0,0,1.8-7.5,3-10.7c0.5-1.3,1.9-4.3,1.9-4.3  s1.4-2.3,1.8-3.3c1.1-2.7,2-6.5,3.1-9.2c0.8-2.1,3.1-6.9,3.1-6.9l1.7-3.4l2.3-3.7c0,0,1.6-2.7,2.3-3.9c1-1.5,2.1-3.6,3.1-5.2  c1-1.5,3.6-4.8,3.6-4.8s1.6-2.5,2.4-3.4c1.5-1.6,3.6-3.6,5.2-5c1-0.7,2.3-1.4,3.3-2c1-0.6,2.6-1.4,3.7-1.9c1.7-0.7,5.7-2.3,5.7-2.3  l2.8-2c0,0,1.2-0.6,1.5-1c0.2-0.5-0.2-1.2,0-1.7c0.2-0.3,0.6-0.8,0.9-0.7c0.4,0.1,0.4,0.8,0.6,1.1c0.2,0.4,0.7,0.7,1.2,0.8  c0.8,0.2,0.8-1.3,1-2c0.4-1,0.4-1.9,0.4-2.7c0.1-1.6,0-2.7,0.1-4.5c0-0.5-0.6-1.9-0.6-2.3c0.1-0.9-0.9-3.1-0.9-3.1l-1.1-3  c0,0-0.8-1.9-1.1-2.7c-0.2-0.5-0.7-1.1-0.7-1.7c0-0.4,0.3-1.1,0.7-1.1c0.2,0,0.4,0.4,0.6,0.6c0.5,0.6,1.5,1.9,1.5,1.9l1.7,1  c0,0,1.6-0.1,2.3-0.3c0.6-0.2,1.4-1,2-1.3c0.6-0.2,1.5-0.2,2-0.6c0.3-0.2,0.4-0.8,0.7-1c0.6-0.3,1.6,0,2.3,0.2  c0.5,0.2,1.5,0.7,1.5,0.7s1.5,0.1,2-0.2c0.4-0.2,0.8-0.6,1-1c0.2-0.5-0.1-1.3,0-1.9c0.1-0.5,0.3-1,0.6-1.5c0.2-0.3,0.8-0.4,1-0.7  c0.2-0.3,0-0.8,0-1.1c0-2.3,0.2-7.6,0.2-7.6s-0.3-3.6,0.2-5.2c0.2-0.5,0.4-1.2,0.9-1.5c0.4-0.2,1.2,0.3,1.5,0  c0.6-0.5,0.4-2.6,0.4-2.6s0.2-4.4-0.2-6c-0.2-0.6-1-1.3-1.7-1.5c-0.5-0.2-1.1,0.2-1.5,0.3c-0.5,0-1.1,0-1.5-0.2  c-0.5-0.2-0.9-1-1.5-1c-0.6,0-1.1,0.8-1.7,1c-0.2,0.1-0.6,0.2-0.7,0c-0.4-0.3-0.4-1.2-0.4-1.7c-0.1-1,0.9-3.5,0-3.1  c-0.2,0.1-1,0-1.3-0.3c-0.6-0.6-0.4-2.7-0.4-2.7l-0.6-2.5l-2.4-19.3l-0.2-4.1l-0.2-4.4l-0.5-7.7l0.2-6.9l0.2-7.3l0.9-8.2l1.3-7.7  l0.9-6.9c0,0,0.5-3.7,1-5.2c0.4-1.4,1.5-3,2-4.3c0.4-0.8,0.9-1.3,1.1-2.2C235.2,65.6,235.8,65.3,235.1,64.5z"/>
      </svg>
  </defs>
</div>

uj5u.com熱心網友回復：

想象一下，您需要放置數百或數千個物件，而不是 3 個物件。
例如，當您想要處理一個國家或世界的真實地圖時。
為它們創建一千個復選框和一個標簽將非常費力且容易混淆。

我提出了一個基于 SVG JS 的解決方案，并在<title>將滑鼠懸停在所選物件上時使用標簽顯示資訊：



<g>    
    <title>   "UT" - Utah
      State capital city - Salt Lake City
      Population
      City  186,440
      Estimate Estimate (2018)  200,591
      </title>
      <path id="UT"  class="Vsvg" d="M726.5,26.1l-83.7-11.9
        l20.6-112.5l46.8,8.7l-1.5,10.6l-2.3,13.2l7.8,0.9l16.4,1.8l8.2,0.9L726.5,26.1z"/>
</g>

要顯示資訊，請將游標放在所選物件上

顯示代碼片段

document.querySelectorAll('path.state').forEach(path => {
  path.addEventListener('mousemove', e => {
    if (path.parentNode.parentNode.querySelector('g:last-child') !== path.parentNode)
      path.parentNode.parentNode.append(path.parentNode);
  });
});
.container {
width:50vw;
height:50vh;
}
.Vsvg {
fill:white;
stroke:dodgerblue;
transform-origin: center center;
transform-box: fill-box;
transition:  1s;
}

:hover.Vsvg {
 fill:dodgerblue;
 stroke:white;
 stroke-width:1px;
 filter:url(#dropshadow);
  -webkit-transform: scale(1.05);
 transform: scale(1.0.5); 
 }
 <div class="container">
<svg id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 290.5 366.2">
    <defs>  
      <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs> 
      <g>
      <title>   CA" - California
      State capital city - Sacramento
      Population
      City  466,488
      Estimate (2018)   508,529
      </title>
          <path id="V1svg" class="Vsvg" d="  M249.3,38.1c-6.5,8.6-14.9,21.8-14.1,25.6c0.2,1.1-10.7,0.1-14.4,0.1c-3.4-0.1-8-0.2-11.3,0.2c-2.8,0.3-9.1,1.2-9.1,1.2l-10.2,2.8  l-11,4.1l-12.7,5.2l-8.6,4.5l-8.6,6.5l-8.2,7.3l-4.5,8.2l-2.8,9l-4.5,19.9l-2.4,8.2l-2,4.5l-0.8,3.6l-0.8,7.3l-0.8,9.4l-0.8,4.9  l-2.4,3.6l-6.9,3.2c0,0-3.3,0.2-4.5,0.8c-0.5,0.2-1,0.7-1.2,1.2c-0.2,0.6,0.1,1.5-0.2,1.9c-0.6,1-1.8,1.5-3.1,2.2  c-1.4,0.7-2.4,1.2-3.6,1.2c-0.7,0-2.1,0.1-2.8,0.1c-1,0-2.3,0-3.2,0c-1.1,0-2.6-0.2-3.6-0.4c-0.9-0.2-1.9-0.8-2.8-0.8  c-1.2,0-1.5-0.4-1.7-0.1c-1.7,1.5-2.7,2.8-2.7,2.8l-3.2,2.8l-5.7,6.9l-8.6,13.5l-3.2,4.5l-7.8,2.8l-7.8,1.6l-4.5,4.5l-3.6,3.6  c0,0-2.1,3.6-3.6,3.6c-1.8,0.2-4.9-3.2-4.9-3.2l-1.6-2.4l-0.4-2l-0.4-3.2c0,0-0.2-1.5,0-2c0.2-1.2,1.6-3.6,1.6-3.6l2-3.2  c0,0,1.2-1,1.8-1.6c0.6-0.5,1.9-1.7,1.9-1.7l1.6-1.6l1.6-1.6c0,0,3.4-6,4.9-8.6c2.7-4.8,9.4-15.9,9.4-15.9l3.2-4.9l1.6-2l2.8-3.6  l0.4-3.6v-3.6v-2.4l-1.3-3.1l-2-4.1l-0.8-4.9v-4.1l3.2-10.2l6.1-14.6c0,0,2.1-5.3,3.1-7.8c1-2.4,3.1-8.2,3.1-8.2l7.3-17.9l6.9-9.8  l6.5-8.2l12.3-7.8l14.3-8.2l23.2-8.6L158,39l28.2-1.6l20.4-0.8l27.3-0.8l9.4,0.3C243.3,36.1,250.5,36.5,249.3,38.1z"/>
         </g>
       <g>
      <title>   "NV" - Nevada
      State capital city - Carson City
      Population
      City  55,274
      Estimate Estimate (2018)  55,414
      </title>       
          <path id="V2svg" class="Vsvg" d="  M35.1,230.6l6.5-7.1c0,0,2.2-2.4,3.3-3.5c0.4-0.4,1-1.2,1.5-1.3c2-0.5,7.6-1.5,7.6-1.5l8.2-2.8l12.4-19.5l5.3-5.7l5.3-4.9l1-0.6  l5.7,1.6l6.9-0.2h1.9l4.7-2.3c0,0,0.9-0.9,1-1.5c0.2-0.4,0-1.5,0-1.5s0.3-1,0.6-1.3c0.7-0.6,3.1-1,3.1-1s2-0.2,2.7-0.4  c1.9-0.6,4.5-1.5,6.1-3.1c1-1,2.2-2.5,2.6-3.9c0.7-2.2,1.2-7.5,1.2-7.5l1-13.2l1.5-5.1l1.6-3.6l1.6-5.1l1.6-6.3l2-9.4  c0,0,2.6-11.5,4.5-16.1c0.6-1.5,1.8-3.1,2.5-4.5c0.6-1,1.2-2.7,2-3.6c1.2-1.5,5.1-4.3,5.1-4.3l3.6-3.6c0,0,2.7-2.7,2.8-2.3  c0.6,1.5,0,8.4,0,8.4l-0.4,2.8l-0.4,2.3l-0.2,7.1l0.4,9.2l0.8,3.5c0,0,0.5,4.2,0.7,6.1c0.2,1.6,0.9,5.5,0.9,5.5l0.2,6.9l0.4,8.8v9.2  v11l-1.2,11c0,0-0.6,3.4-1,4.4c-0.5,1.1-0.8,4.1-0.8,4.1s-1.5,4.8-2.2,6.8c-1,2.9-4,9.3-4,9.3l-3.2,6.9l-2,4.1l-2,5.5l-2.4,8.8  l-3.6,9c0,0-2.7,4.7-3.8,6.9c-0.6,1-1.6,2.3-2.3,3.2c-0.9,0.9-2,1.9-3.1,2.7c-1,0.7-3.1,1.5-4.3,2c-3.4,1.2-11,2.9-11,2.9l-7.9,1.9  l-8.2,0.8l-5.7,1.2c0,0-1.7,0.3-2.4,0.4c-0.4,0-1-0.2-1.2,0c-0.8,0.7,0.8,2.5,0.4,3.6c-0.2,0.6-1.9-0.6-1.9-0.6l-1.9-0.4l-2.8,0.4  l-6.7,0.4H67l-2.4,0.8l-2,0.6l-2.4,0.6l-3.2-0.2c0,0-2.3,0-3.2,0c-0.8,0-1.9,0-2.7,0c-0.2,0-0.6,0.2-0.8,0c-0.6-0.4-1-1.5-1.2-2.3  c-0.1-0.3,0-1,0-1s-0.2-0.7-0.4-1c-0.2-0.4-1.2-1-1.2-1s-0.8-0.3-1-0.6c-0.2-0.3-0.1-1.4-0.1-1.4s0-1,0.1-1.5  c0.2-0.7,0.7-1.9,0.7-2.3c0.1-0.6,0.8-2.2,0.8-2.4c0.2-1,1.9-8.6,1.5-11.6c-0.1-0.7-0.3-1.5-0.5-2.1c-0.1-0.3-0.1-0.8-0.2-1.1  c-0.1-0.2-0.2-0.4-0.3-0.7c0-0.1-0.3-0.6-0.5-0.8c-0.1-0.2-0.5-0.5-0.6-0.6c-0.2-0.2-0.7-0.7-1-0.7c-3.1,0.1-1.1,0-1.3,0  c-1.3,0.1-1.9-0.1-3.1,0.4c-0.2,0.1-0.3,0.3-0.5,0.4c-0.6,0.2-1.9-0.2-1.9-0.2s-1.6-0.2-2.3-0.5c-0.7-0.3-2.2-1.7-2.2-1.7"/>
        </g>    
          <g>
      <title>  "UT" - Utah
      State capital city - Salt Lake City
      Population
      City  186,440
      Estimate Estimate (2018)  200,591
      </title>
          <path id="V3svg" class="Vsvg" d="  M235.1,64.5c-1-1.1-5.2-0.2-5.2-0.2l-6.9-0.2l-8.7-0.4l-6.7,0.4l-7.7,1.1l-10.4,2.7l-13.7,5.4l-8.9,3.7l-5.7,3.1l-3.3,1.7l-2.6,1.9  l-1.7,1.5l-0.9,0.3l0.6,3.1l-0.4,5l-1,6.3v8.3l0.4,6.5l0.9,3.6l0.2,2.7l0.3,2.2l0.4,3l0.9,4.1v5.2l0.4,12.8l0.2,12.1l-0.2,6l-0.6,5  l-0.7,6.1l-1,4.6l-0.9,4.3l-3.7,10.3l-5,11l-3.1,6.1l-2.7,8.7l-1.3,5.2l-2.3,4.8l-2,5l-2.8,4.8l-2.8,4l-3.1,2.7l-6.1,2.2l-10,2.6  l-5.7,1.3l-5.2,0.6l-5.2,0.7c0,0-3.6,1-5.2,1.1c-0.9,0.1-2.4-0.6-3,0.2c-0.7,0.9,1.5,2.9,0.7,3.7c-0.4,0.4-1.7-0.3-1.7-0.3  s-1.1-0.6-1.7-0.7c-0.6-0.1-2.3,0.3-2.3,0.3l-6,0.6h-2.6H67l-6.5,1.9l-5.1-0.1c0,0-1.5-0.2-1.9,0.1c-0.5,0.4-0.8,1.1-1.3,1.5  c-0.2,0.2-0.8,1.2-1,1.5c-0.6,0.6-1.1,2.7-1.1,3.1c-0.2,1.2-0.6,3-0.6,4.3c0,1-0.1,1.9-0.2,2.2c-0.1,0.5,0.1,2.8,0.4,3.1  c0.4,0.4,1.4,0.3,1.9,0.6c0.4,0.2,0.5,0.6,0.9,0.9c0.2,0.1,0.2,0,0.4,0.1c0.5,0.2,0.9,0.8,1.1,1.3c0.5,1,1.4,1.6,2.2,2.4  c0.6,0.7,1.3,1.8,1.7,2.6c0.2,0.5,0.6,1.1,0.7,1.7c0.2,1,0.1,2.3-0.3,3.1c-0.2,0.7-1.1,1.5-1.5,2.2c-0.8,1.4-1.5,3.4-2.3,4.8  c-0.4,0.7-1,1.7-1.3,2.4c-0.2,0.6-0.7,1.4-0.8,2.2c-0.2,1.4,0.2,5.1,0.2,5.1v2.2c0,0,0.1,1.3,0.2,1.8c0.2,0.6,0.6,1.2,0.6,1.8  c0,1-0.2,2.3,0,3.3c0.1,0.5,0.6,1,0.7,1.5c0.2,0.7-0.1,1.7,0.2,2.4c0.2,0.8,0.8,1.9,1.3,2.6c0.4,0.6,1,1.5,1.5,2c1,1,2.7,2,4,2.7  c1,0.6,2.3,1.3,3.4,1.5c1.9,0.5,6.7,0.4,6.7,0.4h5c0,0,5.6,0.3,7.8-0.5c0.9-0.3,2.5-1.6,2.5-1.6s1.1-1.3,1.7-1.7  c0.8-0.6,2-1.3,3-1.5c0.9-0.3,2.2-0.3,3.1-0.4c2.4-0.2,5.7,0.3,8.2-0.2c0.6-0.2,1.5-0.6,2.2-0.9c1.6-0.5,5.4-1,5.4-1l6.3-0.7  l10.4-2.8l6.3-2.4l9.1-4.6l6-2.8l3.7-2.6l4.6-3.4l4.4-4.1l3-3.3l2.7-3.9l2.6-6.1c0,0,1.8-7.5,3-10.7c0.5-1.3,1.9-4.3,1.9-4.3  s1.4-2.3,1.8-3.3c1.1-2.7,2-6.5,3.1-9.2c0.8-2.1,3.1-6.9,3.1-6.9l1.7-3.4l2.3-3.7c0,0,1.6-2.7,2.3-3.9c1-1.5,2.1-3.6,3.1-5.2  c1-1.5,3.6-4.8,3.6-4.8s1.6-2.5,2.4-3.4c1.5-1.6,3.6-3.6,5.2-5c1-0.7,2.3-1.4,3.3-2c1-0.6,2.6-1.4,3.7-1.9c1.7-0.7,5.7-2.3,5.7-2.3  l2.8-2c0,0,1.2-0.6,1.5-1c0.2-0.5-0.2-1.2,0-1.7c0.2-0.3,0.6-0.8,0.9-0.7c0.4,0.1,0.4,0.8,0.6,1.1c0.2,0.4,0.7,0.7,1.2,0.8  c0.8,0.2,0.8-1.3,1-2c0.4-1,0.4-1.9,0.4-2.7c0.1-1.6,0-2.7,0.1-4.5c0-0.5-0.6-1.9-0.6-2.3c0.1-0.9-0.9-3.1-0.9-3.1l-1.1-3  c0,0-0.8-1.9-1.1-2.7c-0.2-0.5-0.7-1.1-0.7-1.7c0-0.4,0.3-1.1,0.7-1.1c0.2,0,0.4,0.4,0.6,0.6c0.5,0.6,1.5,1.9,1.5,1.9l1.7,1  c0,0,1.6-0.1,2.3-0.3c0.6-0.2,1.4-1,2-1.3c0.6-0.2,1.5-0.2,2-0.6c0.3-0.2,0.4-0.8,0.7-1c0.6-0.3,1.6,0,2.3,0.2  c0.5,0.2,1.5,0.7,1.5,0.7s1.5,0.1,2-0.2c0.4-0.2,0.8-0.6,1-1c0.2-0.5-0.1-1.3,0-1.9c0.1-0.5,0.3-1,0.6-1.5c0.2-0.3,0.8-0.4,1-0.7  c0.2-0.3,0-0.8,0-1.1c0-2.3,0.2-7.6,0.2-7.6s-0.3-3.6,0.2-5.2c0.2-0.5,0.4-1.2,0.9-1.5c0.4-0.2,1.2,0.3,1.5,0  c0.6-0.5,0.4-2.6,0.4-2.6s0.2-4.4-0.2-6c-0.2-0.6-1-1.3-1.7-1.5c-0.5-0.2-1.1,0.2-1.5,0.3c-0.5,0-1.1,0-1.5-0.2  c-0.5-0.2-0.9-1-1.5-1c-0.6,0-1.1,0.8-1.7,1c-0.2,0.1-0.6,0.2-0.7,0c-0.4-0.3-0.4-1.2-0.4-1.7c-0.1-1,0.9-3.5,0-3.1  c-0.2,0.1-1,0-1.3-0.3c-0.6-0.6-0.4-2.7-0.4-2.7l-0.6-2.5l-2.4-19.3l-0.2-4.1l-0.2-4.4l-0.5-7.7l0.2-6.9l0.2-7.3l0.9-8.2l1.3-7.7  l0.9-6.9c0,0,0.5-3.7,1-5.2c0.4-1.4,1.5-3,2-4.3c0.4-0.8,0.9-1.3,1.1-2.2C235.2,65.6,235.8,65.3,235.1,64.5z"/>
         </g> 
      </svg>
</div>

再舉一個例子

顯示代碼片段

document.querySelectorAll('path.Vsvg').forEach(path => {
  path.addEventListener('mouseover', e => {
    path.parentNode.parentNode.append(path.parentNode);
  });
});
.Vsvg {
fill:white;
stroke:dodgerblue;
transform-origin: center center;
transform-box: fill-box;
transition:  1s;
}

:hover.Vsvg {
 fill:dodgerblue;
 stroke:white;
 stroke-width:2px;
 filter:url(#dropshadow);
  -webkit-transform: scale(1.5);
 transform: scale(1.5);
 
 }
<body>
   <section id="map">

    <svg version="1.1"
       id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="467 -284 959 593" xml:space="preserve">
      <defs>
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
      <g>
      <title>"ID" - IDAHO
      State capital city - Boise
      Population - 228,790
      </title>
      <path id="ID"  class="Vsvg" d="
        M615.5-107.5l8.8-35.2l1.4-4.2l2.5-5.9l-1.3-2.3l-2.5,0.1l-0.8-1l0.5-1.1l0.3-3.1l4.5-5.5l1.8-0.5l1.1-1.1l0.6-3.2l0.9-0.7l3.9-5.8
        l3.9-4.3l0.2-3.8l-3.4-2.6l-1.5-4.4l13.6-63.3l13.5,2.5l-4.4,21.4l3.6,7.5l-1.6,4.7l2,4.6l3.1,1.3l3.8,9.6l3.5,4.4l0.5,1.1l3.3,1.1
        l0.4,2.1l-7,17.4l-0.2,2.6l2.6,3.3l0.9,0l4.9-3l0.7-1.1l1.6,0.7l-0.3,5.4l2.7,12.6l3.9,3.2l1.7,2.2l-0.7,4.1l1.1,2.8l1.1,1.1
        l2.5-2.4l2.8,0l2.9,1.3l2.8-0.7l3.8-0.2l4,1.6l2.7-0.3l0.5-3l2.9-0.8l1.3,1.5l0.4,2.9l1.4,1.2l-8.4,53.6
        C710.4-89.3,622.5-106,615.5-107.5z"/> 
        </g>
  <g>    
    <title>   "UT" - Utah
      State capital city - Salt Lake City
      Population
      City  186,440
      Estimate Estimate (2018)  200,591
      </title>
      <path id="UT"  class="Vsvg" d="M726.5,26.1l-83.7-11.9
        l20.6-112.5l46.8,8.7l-1.5,10.6l-2.3,13.2l7.8,0.9l16.4,1.8l8.2,0.9L726.5,26.1z"/>
</g>
      <g>    
    <title>   "AZ" - Arizona
      State capital city - Phoenix
      Population
      City  1,445,632
      Estimate Estimate (2018)  1,660,272
      </title>
      <path id="AZ" class="Vsvg" d="
        M611.9,98.6l-2.6,2.2l-0.3,1.5l0.5,1l18.9,10.7l12.1,7.6l14.7,8.6l16.8,10l12.3,2.4l25,2.7l17.3-119.1l-83.7-11.9l-3.1,16.4l-1.6,0
        l-1.7,2.6l-2.5-0.1l-1.3-2.7l-2.7-0.3l-0.9-1.1H628l-0.9,0.6l-1.9,1l-0.1,7l-0.2,1.7l-0.6,12.6l-1.5,2.2l-0.6,3.3l2.7,4.9l1.3,5.8
        l0.8,1l1,0.6l-0.1,2.3l-1.6,1.4l-3.4,1.7l-1.9,1.9l-1.5,3.7l-0.6,4.9l-2.9,2.7l-2.1,0.7l0.1,0.8l-0.5,1.7l0.5,0.8l3.7,0.6l-0.6,2.7
        l-1.5,2.2L611.9,98.6z"/>
</g>        
<g>    
    <title>   "NV" - Nevada
      State capital city - Carson City
      Population
      City  55,274
      Estimate Estimate (2018)  55,414
      </title>
      <path id="NV" class="Vsvg" d="M663.4-98.4
        L639.8,30.4l-1.8,0.3l-1.6,2.4l-2.4,0l-1.5-2.7l-2.6-0.4l-0.8-1.1l-1-0.1l-2.8,1.6l-0.3,6.8l-0.4,5.8l-0.3,8.6l-1.4,2.1l-2.4-1.1
        L551.3-51.5l19-67.6L663.4-98.4z"/>
</g>        
<g>    
    <title>   "OR" - Oregon
      State capital city - Salem
      Population
      City  154,637
      Estimate Estimate (2018)  173,442
      </title>
      <path id="OR" class="Vsvg" d="
        M615.7-108.5l8.9-34.8l1.1-4.2l2.4-5.6l-0.6-1.2l-2.5,0l-1.3-1.7l0.5-1.5l0.5-3.2l4.5-5.5l1.8-1.1l1.1-1.1l1.5-3.6l4-5.7l3.6-3.9
        l0.2-3.5l-3.3-2.5l-1.8-4.6l-12.7-3.6l-15.1-3.5l-15.4,0.1l-0.5-1.4l-5.5,2.1l-4.5-0.6l-2.4-1.6l-1.3,0.7l-4.7-0.2l-1.7-1.4
        l-5.3-2.1l-0.8,0.1l-4.3-1.5l-1.9,1.8l-6.2-0.3l-5.9-4.1l0.7-0.8l0.2-7.8l-2.3-3.9l-4.1-0.6l-0.7-2.5l-2.4-0.5l-5.8,2.1l-2.3,6.5
        l-3.2,10l-3.2,6.5l-5,14.1l-6.5,13.6l-8.1,12.6l-1.9,2.9l-0.8,8.6l0.4,12.1L615.7-108.5z"/>
</g>     
     <g>
      <title>   "WA" - Washington Territory
      State capital city - Olympia
      Population
      City  46,478
      Estimate (2018)   52,555
      </title>
      <path id="WA" class="Vsvg"  d="
        M569.1-276.4l4.4,1.5l9.7,2.7l8.6,1.9l20,5.7l23,5.7l15.2,3.2l-13.6,63.6l-12.4-3.5l-15.5-3.6l-15.2,0l-0.5-1.3l-5.6,2.2l-4.6-0.7
        l-2.1-1.6L579-200l-4.7-0.1l-1.7-1.3l-5.3-2.1l-0.7,0.1l-4.4-1.5l-1.9,1.8l-6.3-0.3l-5.9-4.1l0.8-0.9l0.1-7.7l-2.3-3.8l-4.1-0.6
        l-0.7-2.5l-2.3-0.5l-3.6,1.2l-2.3-3.2l0.3-2.9l2.7-0.3l1.6-4l-2.6-1.1l0.2-3.7l4.4-0.6l-2.7-2.7l-1.5-7.1l0.6-2.9v-7.9l-1.8-3.2
        l2.3-9.4l2.1,0.5l2.4,2.9l2.7,2.6l3.2,1.9l4.5,2.1l3.1,0.6l2.9,1.5l3.4,1l2.3-0.2v-2.4l1.3-1.1l2.1-1.3l0.3,1.1l0.3,1.8l-2.3,0.5
        l-0.3,2.1l1.8,1.5l1.1,2.4l0.6,1.9l1.5-0.2l0.2-1.3l-1-1.3l-0.5-3.2l0.8-1.8l-0.6-1.5v-2.3l1.8-3.6l-1.1-2.6l-2.4-4.9l0.3-0.8
        L569.1-276.4z M559.6-270.4l2-0.2l0.5,1.4l1.5-1.6h2.3l0.8,1.5l-1.5,1.7l0.6,0.8l-0.7,2l-1.4,0.4c0,0-0.9,0.1-0.9-0.2
        s1.5-2.6,1.5-2.6l-1.7-0.6l-0.3,1.5l-0.7,0.6l-1.5-2.3L559.6-270.4z"/>
  </g> 
  <g>
      <title>   "CA" - California
      State capital city - Sacramento
      Population
      City  466,488
      Estimate (2018)   508,529
      </title>
      <path id="CA" class="Vsvg" d="
        M611.7,98.2l3.9-0.5l1.5-2l0.5-2.9l-3.6-0.6l-0.5-0.7l0.5-2l-0.2-0.6l1.9-0.6l3-2.8l0.6-5l1.4-3.4l1.9-2.2l3.5-1.6l1.7-1.6l0.1-2.1
        l-1-0.6l-1-1.1l-1.2-5.8l-2.7-4.8l0.6-3.5l-2.4-1L551.3-51.5l18.9-67.6l-67.1-15.7l-1.5,4.7l-0.2,7.4l-5.2,11.8l-3.1,2.6l-0.3,1.1
        l-1.8,0.8l-1.5,4.2l-0.8,3.2l2.7,4.2l1.6,4.2l1.1,3.6l-0.3,6.5l-1.8,3.1l-0.6,5.8l-1,3.7l1.8,3.9l2.7,4.5l2.3,4.9l1.3,4l-0.3,3.2
        l-0.3,0.5v2.1l5.7,6.3l-0.5,2.4l-0.6,2.3l-0.6,1.9l0.2,8.2l2.1,3.7l1.9,2.6l2.7,0.5l1,2.7l-1.1,3.6l-2.1,1.6h-1.1l-0.8,3.9l0.5,2.9
        l3.2,4.4l1.6,5.3l1.5,4.7l1.3,3.1l3.4,5.8l1.5,2.6l0.5,2.9l1.6,1v2.4l-0.8,1.9l-1.8,7.1l-0.5,1.9l2.4,2.7l4.2,0.5l4.5,1.8l3.9,2.1
        h2.9l2.9,3.1l2.6,4.9l1.1,2.3l3.9,2.1l4.8,0.8l1.5,2.1l0.6,3.2l-1.5,0.6l0.3,1l3.2,0.8l2.7,0.2l3.2-1.7l3.9,4.2l0.8,2.3l2.6,4.2
        l0.3,3.2v9.4l0.5,1.8l10,1.5l19.7,2.7L611.7,98.2z M523.6,54.5l1.3,1.5l-0.2,1.3l-3.2-0.1l-0.6-1.2l-0.6-1.5L523.6,54.5z
         M525.5,54.5l1.2-0.6l3.6,2.1l3.1,1.2l-0.9,0.6l-4.5-0.2l-1.6-1.6L525.5,54.5z M546.2,74.3l1.8,2.3l0.8,1l1.5,0.6l0.6-1.5l-1-1.8
        l-2.7-2l-1.1,0.2V74.3z M544.7,82.9l1.8,3.2l1.2,1.9l-1.5,0.2l-1.3-1.2c0,0-0.7-1.5-0.7-1.9s0-2.2,0-2.2L544.7,82.9z"/>
        </g>
    </svg>

  </section>
</body>

uj5u.com熱心網友回復：

使用 JS 的快速示例，在 svg 等中沒有額外的元素，并且更靈活一些，僅顯示復選框，需要調整以使事件雙向進行。

const svg = document.getElementById('the-svg'),
      paths = svg.querySelectorAll('path');

handleChecked = (elem) => {
  elem.addEventListener('click', function(e) {
    const thePiece = document.getElementById(`${e.srcElement.id}-checkbox`);
    thePiece ? thePiece.checked = !thePiece.checked : console.error(thePiece);
    elem.style.fill = thePiece.checked ? '#3F72AF' : '#ffffff';
  });
};

window.addEventListener('load', function(e) {
  if (paths.length) {
    for (i = 0, x = paths.length; i < x;   i) {
      handleChecked(paths[i]);
    }    
  }
});
.mySVG input[type=checkbox]{
    /*display: none;*/
}
.mySVG label{
    cursor: pointer;
}
.mySVG svg{
    fill:#F9F7F7;
    stroke: #112D4E;
    stroke-width: 5;
    width:100px;
}
<div class="mySVG">
  <input type="checkbox" id="V1svg-checkbox" name="x">
  <input type="checkbox" id="V2svg-checkbox" name="x">
  <input type="checkbox" id="V3svg-checkbox" name="x">
  <label for="x">
      <svg viewBox="0 0 290.5 366.2" id="the-svg">
          <path id="V1svg" class="Vsvg" d="  M249.3,38.1c-6.5,8.6-14.9,21.8-14.1,25.6c0.2,1.1-10.7,0.1-14.4,0.1c-3.4-0.1-8-0.2-11.3,0.2c-2.8,0.3-9.1,1.2-9.1,1.2l-10.2,2.8  l-11,4.1l-12.7,5.2l-8.6,4.5l-8.6,6.5l-8.2,7.3l-4.5,8.2l-2.8,9l-4.5,19.9l-2.4,8.2l-2,4.5l-0.8,3.6l-0.8,7.3l-0.8,9.4l-0.8,4.9  l-2.4,3.6l-6.9,3.2c0,0-3.3,0.2-4.5,0.8c-0.5,0.2-1,0.7-1.2,1.2c-0.2,0.6,0.1,1.5-0.2,1.9c-0.6,1-1.8,1.5-3.1,2.2  c-1.4,0.7-2.4,1.2-3.6,1.2c-0.7,0-2.1,0.1-2.8,0.1c-1,0-2.3,0-3.2,0c-1.1,0-2.6-0.2-3.6-0.4c-0.9-0.2-1.9-0.8-2.8-0.8  c-1.2,0-1.5-0.4-1.7-0.1c-1.7,1.5-2.7,2.8-2.7,2.8l-3.2,2.8l-5.7,6.9l-8.6,13.5l-3.2,4.5l-7.8,2.8l-7.8,1.6l-4.5,4.5l-3.6,3.6  c0,0-2.1,3.6-3.6,3.6c-1.8,0.2-4.9-3.2-4.9-3.2l-1.6-2.4l-0.4-2l-0.4-3.2c0,0-0.2-1.5,0-2c0.2-1.2,1.6-3.6,1.6-3.6l2-3.2  c0,0,1.2-1,1.8-1.6c0.6-0.5,1.9-1.7,1.9-1.7l1.6-1.6l1.6-1.6c0,0,3.4-6,4.9-8.6c2.7-4.8,9.4-15.9,9.4-15.9l3.2-4.9l1.6-2l2.8-3.6  l0.4-3.6v-3.6v-2.4l-1.3-3.1l-2-4.1l-0.8-4.9v-4.1l3.2-10.2l6.1-14.6c0,0,2.1-5.3,3.1-7.8c1-2.4,3.1-8.2,3.1-8.2l7.3-17.9l6.9-9.8  l6.5-8.2l12.3-7.8l14.3-8.2l23.2-8.6L158,39l28.2-1.6l20.4-0.8l27.3-0.8l9.4,0.3C243.3,36.1,250.5,36.5,249.3,38.1z"/>
          <path id="V2svg" class="Vsvg" d="  M35.1,230.6l6.5-7.1c0,0,2.2-2.4,3.3-3.5c0.4-0.4,1-1.2,1.5-1.3c2-0.5,7.6-1.5,7.6-1.5l8.2-2.8l12.4-19.5l5.3-5.7l5.3-4.9l1-0.6  l5.7,1.6l6.9-0.2h1.9l4.7-2.3c0,0,0.9-0.9,1-1.5c0.2-0.4,0-1.5,0-1.5s0.3-1,0.6-1.3c0.7-0.6,3.1-1,3.1-1s2-0.2,2.7-0.4  c1.9-0.6,4.5-1.5,6.1-3.1c1-1,2.2-2.5,2.6-3.9c0.7-2.2,1.2-7.5,1.2-7.5l1-13.2l1.5-5.1l1.6-3.6l1.6-5.1l1.6-6.3l2-9.4  c0,0,2.6-11.5,4.5-16.1c0.6-1.5,1.8-3.1,2.5-4.5c0.6-1,1.2-2.7,2-3.6c1.2-1.5,5.1-4.3,5.1-4.3l3.6-3.6c0,0,2.7-2.7,2.8-2.3  c0.6,1.5,0,8.4,0,8.4l-0.4,2.8l-0.4,2.3l-0.2,7.1l0.4,9.2l0.8,3.5c0,0,0.5,4.2,0.7,6.1c0.2,1.6,0.9,5.5,0.9,5.5l0.2,6.9l0.4,8.8v9.2  v11l-1.2,11c0,0-0.6,3.4-1,4.4c-0.5,1.1-0.8,4.1-0.8,4.1s-1.5,4.8-2.2,6.8c-1,2.9-4,9.3-4,9.3l-3.2,6.9l-2,4.1l-2,5.5l-2.4,8.8  l-3.6,9c0,0-2.7,4.7-3.8,6.9c-0.6,1-1.6,2.3-2.3,3.2c-0.9,0.9-2,1.9-3.1,2.7c-1,0.7-3.1,1.5-4.3,2c-3.4,1.2-11,2.9-11,2.9l-7.9,1.9  l-8.2,0.8l-5.7,1.2c0,0-1.7,0.3-2.4,0.4c-0.4,0-1-0.2-1.2,0c-0.8,0.7,0.8,2.5,0.4,3.6c-0.2,0.6-1.9-0.6-1.9-0.6l-1.9-0.4l-2.8,0.4  l-6.7,0.4H67l-2.4,0.8l-2,0.6l-2.4,0.6l-3.2-0.2c0,0-2.3,0-3.2,0c-0.8,0-1.9,0-2.7,0c-0.2,0-0.6,0.2-0.8,0c-0.6-0.4-1-1.5-1.2-2.3  c-0.1-0.3,0-1,0-1s-0.2-0.7-0.4-1c-0.2-0.4-1.2-1-1.2-1s-0.8-0.3-1-0.6c-0.2-0.3-0.1-1.4-0.1-1.4s0-1,0.1-1.5  c0.2-0.7,0.7-1.9,0.7-2.3c0.1-0.6,0.8-2.2,0.8-2.4c0.2-1,1.9-8.6,1.5-11.6c-0.1-0.7-0.3-1.5-0.5-2.1c-0.1-0.3-0.1-0.8-0.2-1.1  c-0.1-0.2-0.2-0.4-0.3-0.7c0-0.1-0.3-0.6-0.5-0.8c-0.1-0.2-0.5-0.5-0.6-0.6c-0.2-0.2-0.7-0.7-1-0.7c-3.1,0.1-1.1,0-1.3,0  c-1.3,0.1-1.9-0.1-3.1,0.4c-0.2,0.1-0.3,0.3-0.5,0.4c-0.6,0.2-1.9-0.2-1.9-0.2s-1.6-0.2-2.3-0.5c-0.7-0.3-2.2-1.7-2.2-1.7"/>
          <path id="V3svg" class="Vsvg" d="  M235.1,64.5c-1-1.1-5.2-0.2-5.2-0.2l-6.9-0.2l-8.7-0.4l-6.7,0.4l-7.7,1.1l-10.4,2.7l-13.7,5.4l-8.9,3.7l-5.7,3.1l-3.3,1.7l-2.6,1.9  l-1.7,1.5l-0.9,0.3l0.6,3.1l-0.4,5l-1,6.3v8.3l0.4,6.5l0.9,3.6l0.2,2.7l0.3,2.2l0.4,3l0.9,4.1v5.2l0.4,12.8l0.2,12.1l-0.2,6l-0.6,5  l-0.7,6.1l-1,4.6l-0.9,4.3l-3.7,10.3l-5,11l-3.1,6.1l-2.7,8.7l-1.3,5.2l-2.3,4.8l-2,5l-2.8,4.8l-2.8,4l-3.1,2.7l-6.1,2.2l-10,2.6  l-5.7,1.3l-5.2,0.6l-5.2,0.7c0,0-3.6,1-5.2,1.1c-0.9,0.1-2.4-0.6-3,0.2c-0.7,0.9,1.5,2.9,0.7,3.7c-0.4,0.4-1.7-0.3-1.7-0.3  s-1.1-0.6-1.7-0.7c-0.6-0.1-2.3,0.3-2.3,0.3l-6,0.6h-2.6H67l-6.5,1.9l-5.1-0.1c0,0-1.5-0.2-1.9,0.1c-0.5,0.4-0.8,1.1-1.3,1.5  c-0.2,0.2-0.8,1.2-1,1.5c-0.6,0.6-1.1,2.7-1.1,3.1c-0.2,1.2-0.6,3-0.6,4.3c0,1-0.1,1.9-0.2,2.2c-0.1,0.5,0.1,2.8,0.4,3.1  c0.4,0.4,1.4,0.3,1.9,0.6c0.4,0.2,0.5,0.6,0.9,0.9c0.2,0.1,0.2,0,0.4,0.1c0.5,0.2,0.9,0.8,1.1,1.3c0.5,1,1.4,1.6,2.2,2.4  c0.6,0.7,1.3,1.8,1.7,2.6c0.2,0.5,0.6,1.1,0.7,1.7c0.2,1,0.1,2.3-0.3,3.1c-0.2,0.7-1.1,1.5-1.5,2.2c-0.8,1.4-1.5,3.4-2.3,4.8  c-0.4,0.7-1,1.7-1.3,2.4c-0.2,0.6-0.7,1.4-0.8,2.2c-0.2,1.4,0.2,5.1,0.2,5.1v2.2c0,0,0.1,1.3,0.2,1.8c0.2,0.6,0.6,1.2,0.6,1.8  c0,1-0.2,2.3,0,3.3c0.1,0.5,0.6,1,0.7,1.5c0.2,0.7-0.1,1.7,0.2,2.4c0.2,0.8,0.8,1.9,1.3,2.6c0.4,0.6,1,1.5,1.5,2c1,1,2.7,2,4,2.7  c1,0.6,2.3,1.3,3.4,1.5c1.9,0.5,6.7,0.4,6.7,0.4h5c0,0,5.6,0.3,7.8-0.5c0.9-0.3,2.5-1.6,2.5-1.6s1.1-1.3,1.7-1.7  c0.8-0.6,2-1.3,3-1.5c0.9-0.3,2.2-0.3,3.1-0.4c2.4-0.2,5.7,0.3,8.2-0.2c0.6-0.2,1.5-0.6,2.2-0.9c1.6-0.5,5.4-1,5.4-1l6.3-0.7  l10.4-2.8l6.3-2.4l9.1-4.6l6-2.8l3.7-2.6l4.6-3.4l4.4-4.1l3-3.3l2.7-3.9l2.6-6.1c0,0,1.8-7.5,3-10.7c0.5-1.3,1.9-4.3,1.9-4.3  s1.4-2.3,1.8-3.3c1.1-2.7,2-6.5,3.1-9.2c0.8-2.1,3.1-6.9,3.1-6.9l1.7-3.4l2.3-3.7c0,0,1.6-2.7,2.3-3.9c1-1.5,2.1-3.6,3.1-5.2  c1-1.5,3.6-4.8,3.6-4.8s1.6-2.5,2.4-3.4c1.5-1.6,3.6-3.6,5.2-5c1-0.7,2.3-1.4,3.3-2c1-0.6,2.6-1.4,3.7-1.9c1.7-0.7,5.7-2.3,5.7-2.3  l2.8-2c0,0,1.2-0.6,1.5-1c0.2-0.5-0.2-1.2,0-1.7c0.2-0.3,0.6-0.8,0.9-0.7c0.4,0.1,0.4,0.8,0.6,1.1c0.2,0.4,0.7,0.7,1.2,0.8  c0.8,0.2,0.8-1.3,1-2c0.4-1,0.4-1.9,0.4-2.7c0.1-1.6,0-2.7,0.1-4.5c0-0.5-0.6-1.9-0.6-2.3c0.1-0.9-0.9-3.1-0.9-3.1l-1.1-3  c0,0-0.8-1.9-1.1-2.7c-0.2-0.5-0.7-1.1-0.7-1.7c0-0.4,0.3-1.1,0.7-1.1c0.2,0,0.4,0.4,0.6,0.6c0.5,0.6,1.5,1.9,1.5,1.9l1.7,1  c0,0,1.6-0.1,2.3-0.3c0.6-0.2,1.4-1,2-1.3c0.6-0.2,1.5-0.2,2-0.6c0.3-0.2,0.4-0.8,0.7-1c0.6-0.3,1.6,0,2.3,0.2  c0.5,0.2,1.5,0.7,1.5,0.7s1.5,0.1,2-0.2c0.4-0.2,0.8-0.6,1-1c0.2-0.5-0.1-1.3,0-1.9c0.1-0.5,0.3-1,0.6-1.5c0.2-0.3,0.8-0.4,1-0.7  c0.2-0.3,0-0.8,0-1.1c0-2.3,0.2-7.6,0.2-7.6s-0.3-3.6,0.2-5.2c0.2-0.5,0.4-1.2,0.9-1.5c0.4-0.2,1.2,0.3,1.5,0  c0.6-0.5,0.4-2.6,0.4-2.6s0.2-4.4-0.2-6c-0.2-0.6-1-1.3-1.7-1.5c-0.5-0.2-1.1,0.2-1.5,0.3c-0.5,0-1.1,0-1.5-0.2  c-0.5-0.2-0.9-1-1.5-1c-0.6,0-1.1,0.8-1.7,1c-0.2,0.1-0.6,0.2-0.7,0c-0.4-0.3-0.4-1.2-0.4-1.7c-0.1-1,0.9-3.5,0-3.1  c-0.2,0.1-1,0-1.3-0.3c-0.6-0.6-0.4-2.7-0.4-2.7l-0.6-2.5l-2.4-19.3l-0.2-4.1l-0.2-4.4l-0.5-7.7l0.2-6.9l0.2-7.3l0.9-8.2l1.3-7.7  l0.9-6.9c0,0,0.5-3.7,1-5.2c0.4-1.4,1.5-3,2-4.3c0.4-0.8,0.9-1.3,1.1-2.2C235.2,65.6,235.8,65.3,235.1,64.5z"/>
      </svg>
  </label>
</div>

uj5u.com熱心網友回復：

好吧，我環顧四周，自己嘗試了一下。但就我現在而言，現在有辦法做到這一點，因為要選擇復選框，您需要單擊 svg 視圖框中的某個位置，它只能是一個正方形。因此，始終會選擇頂部的那個，因為它的視圖框位于其他視圖框之上。

解決這個問題的唯一方法是找出滑鼠的位置，然后將要選擇的 svg 放在頂部。我會嘗試一下，一旦找到可行的解決方案，我將編輯或回復這篇文章。

uj5u.com熱心網友回復：

為此，您需要 javascript。您需要做的是獲取 svg 路徑（按類或 id）并添加一個事件偵聽器。此外，您需要獲取復選框并為它們分配一個值或真或假。

    <!-- html starts here -->
    <svg>
      <path id='path1'>
    </svg>
    <input id='checkbox1' type='checkbox' />

    // javascript starts here
    const firstPath = document.querySelector('#path1');
    const firstCheckbox = document.querySelector('#checobox1');
    
    firstPath.addEventListener('click', () => {
        firstCheckbox.checked = true;
    })

并且您可以制作不同的組合，因此一個路徑可以啟用 2 個復選框，另一個可以啟用 3 個，依此類推。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459420.html

標籤：html css svg 复选框 小路

上一篇：將SVG剝離到其中的一部分

下一篇：reactnative-為專案添加不同的圖示并使其可按下

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • CA和證書

    1、在 CentOS7 中使用 gpg 創建 RSA 非對稱密鑰對 gpg --gen-key #Centos上生成公鑰/密鑰對（存放在家目錄.gnupg/） 2、將 CentOS7 匯出的公鑰，拷貝到 CentOS8 中，在 CentOS8 中使用 CentOS7 的公鑰加密一個檔案 gpg -a ......

    uj5u.com 2020-09-10 00:09:53 more
  • Kubernetes K8S之資源控制器Job和CronJob詳解

    Kubernetes的資源控制器Job和CronJob詳解與示例 ......

    uj5u.com 2020-09-10 00:10:45 more
  • VMware下安裝CentOS

    VMware下安裝CentOS 一、軟硬體準備 1 Centos鏡像準備 1.1 CentOS鏡像下載地址 下載地址 1.2 CentOS鏡像下載程序 點擊下載地址進入如下圖的網站，選擇需要下載的版本，這里選擇的是Centos8，點擊如圖所示。 決定選擇Centos8后，選擇想要的鏡像源進行下載，此 ......

    uj5u.com 2020-09-10 00:12:10 more
  • 如何使用Grep命令查找多個字串

    如何使用Grep 命令查找多個字串 大家好，我是良許！ 今天向大家介紹一個非常有用的技巧，那就是使用 grep 命令查找多個字串。 簡單介紹一下，grep 命令可以理解為是一個功能強大的命令列工具，可以用它在一個或多個輸入檔案中搜索與正則運算式相匹配的文本，然后再將每個匹配的文本用標準輸出的格式 ......

    uj5u.com 2020-09-10 00:12:28 more
  • git配置http代理

    git配置http代理 經常遇到克隆 github 慢的問題，這里記錄一下幾種配置 git 代理的方法，解決 clone github 過慢。 目錄 git配置代理 git單獨配置github代理 git配置全域代理 配置終端環境變數 git配置代理 主要使用 git config 命令 git單獨 ......

    uj5u.com 2020-09-10 00:12:33 more
  • Linux npm install 裝包時提示Error EACCES permission denied解

    npm install 裝包時提示Error EACCES permission denied解決辦法 ......

    uj5u.com 2020-09-10 00:12:53 more
  • Centos 7下安裝nginx，使用yum install nginx，提示沒有可用的軟體包

    Centos 7下安裝nginx，使用yum install nginx，提示沒有可用的軟體包。 18 (flaskApi) [root@67 flaskDemo]# yum -y install nginx 19 已加載插件：fastestmirror, langpacks 20 Loading ......

    uj5u.com 2020-09-10 00:13:13 more
  • Linux查看服務器暴力破解ssh IP

    在公網的服務器上經常遇到別人爆破你服務器的22埠，用來挖礦或者干其他嘿嘿嘿的事情~ 這種情況下正確的做法是： 修改默認ssh的22埠 使用設定密鑰登錄或者白名單ip登錄 建議服務器密碼為復雜密碼 創建普通用戶登錄服務器（root權限過大） 建立堡壘機，實作統一管理服務器 統計爆破IP [root ......

    uj5u.com 2020-09-10 00:13:17 more
  • CentOS 7系統常見快捷鍵操作方式

    Linux系統中一些常見的快捷方式，可有效提高操作效率，在某些時刻也能避免操作失誤帶來的問題。 ......

    uj5u.com 2020-09-10 00:13:31 more
  • CentOS 7作業系統目錄結構介紹

    作業系統存在著大量的資料檔案資訊，相應檔案資訊會存在于系統相應目錄中，為了更好的管理資料資訊，會將系統進行一些目錄規劃，不同目錄存放不同的資源。 ......

    uj5u.com 2020-09-10 00:13:35 more
最新发布
  • vim的常用命令

    Vim的6種基本模式 1. 普通模式在普通模式中，用的編輯器命令，比如移動游標，洗掉文本等等。這也是Vim啟動后的默認模式。這正好和許多新用戶期待的操作方式相反（大多數編輯器默認模式為插入模式）。 2. 插入模式在這個模式中，大多數按鍵都會向文本緩沖中插入文本。大多數新用戶希望文本編輯器編輯程序中一 ......

    uj5u.com 2023-04-20 08:43:21 more
  • vim的常用命令

    Vim的6種基本模式 1. 普通模式在普通模式中，用的編輯器命令，比如移動游標，洗掉文本等等。這也是Vim啟動后的默認模式。這正好和許多新用戶期待的操作方式相反（大多數編輯器默認模式為插入模式）。 2. 插入模式在這個模式中，大多數按鍵都會向文本緩沖中插入文本。大多數新用戶希望文本編輯器編輯程序中一 ......

    uj5u.com 2023-04-20 08:42:36 more
  • docker學習

    ###Docker概述 真實專案部署環境可能非常復雜，傳統發布專案一個只需要一個jar包，運行環境需要單獨部署。而通過Docker可將jar包和相關環境（如jdk，redis，Hadoop...）等打包到docker鏡像里，將鏡像發布到Docker倉庫，部署時下載發布的鏡像，直接運行發布的鏡像即可。 ......

    uj5u.com 2023-04-19 09:26:53 more
  • 設定Windows主機的瀏覽器為wls2的默認瀏覽器

    這里以Chrome為例。 1. 準備作業 wsl是可以使用Windows主機上安裝的exe程式，出于安全考慮，默認情況下改功能是無法使用。要使用的話，終端需要以管理員權限啟動。 我這里以Windows Terminal為例，介紹如何默認使用管理員權限打開終端，具體操作如下圖所示： 2. 操作 wsl ......

    uj5u.com 2023-04-19 09:25:49 more
  • docker學習

    ###Docker概述 真實專案部署環境可能非常復雜，傳統發布專案一個只需要一個jar包，運行環境需要單獨部署。而通過Docker可將jar包和相關環境（如jdk，redis，Hadoop...）等打包到docker鏡像里，將鏡像發布到Docker倉庫，部署時下載發布的鏡像，直接運行發布的鏡像即可。 ......

    uj5u.com 2023-04-19 09:19:04 more
  • Linux學習筆記

    IP地址和主機名 IP地址 ifconfig可以用來查詢本機的IP地址，如果不能使用，可以通過install net-tools安裝。 Centos系統下ens33表示主網卡；inet后表示IP地址；lo表示本地回環網卡； 127.0.0.1表示代指本機；0.0.0.0可以用于代指本機，同時在放行設 ......

    uj5u.com 2023-04-18 06:52:01 more
  • 解決linux系統的kdump服務無法啟動的問題

    問題：專案麒麟系統服務器的kdump服務無法啟動，沒有相關日志無法定位問題。 1、查看服務狀態是關閉的，重啟系統也無法啟動 systemctl status kdump 2、修改grub引數，修改“crashkernel”為“512M（有的機器數值太大太小都會導致報錯，建議從128M開始試，或者加個 ......

    uj5u.com 2023-04-12 09:59:50 more
  • 解決linux系統的kdump服務無法啟動的問題

    問題：專案麒麟系統服務器的kdump服務無法啟動，沒有相關日志無法定位問題。 1、查看服務狀態是關閉的，重啟系統也無法啟動 systemctl status kdump 2、修改grub引數，修改“crashkernel”為“512M（有的機器數值太大太小都會導致報錯，建議從128M開始試，或者加個 ......

    uj5u.com 2023-04-12 09:59:01 more
  • 你是不是暴露了？

    作者：袁首京 原創文章，轉載時請保留此宣告，并給出原文連接。 如果您是計算機相關從業人員，那么應該經歷不止一次網路安全專項檢查了，你肯定是收到過資訊系統技術檢測報告，要求你加強風險監測，確保你提供的系統服務堅實可靠了。 沒檢測到問題還好，檢測到問題的話，有些處理起來還是挺麻煩的，尤其是線上正在運行的 ......

    uj5u.com 2023-04-05 16:52:56 more
  • 細節拉滿，80 張圖帶你一步一步推演 slab 記憶體池的設計與實作

    1. 前文回顧 在之前的幾篇記憶體管理系列文章中，筆者帶大家從宏觀角度完整地梳理了一遍 Linux 記憶體分配的整個鏈路，本文的主題依然是記憶體分配，這一次我們會從微觀的角度來探秘一下 Linux 內核中用于零散小記憶體塊分配的記憶體池 —— slab 分配器。 在本小節中，筆者還是按照以往的風格先帶大家簡單 ......

    uj5u.com 2023-04-05 16:44:11 more

Copyright © 2010-2020 有解無憂