主頁 > 作業系統 > 在SVG上居中文本元素

在SVG上居中文本元素

2022-04-21 05:37:17 作業系統

我有一個div包含 SVG 元素的元素和另一個div包含文本的元素。
我希望能夠將文本元素放在 svg 上，但不知道該怎么做。我只能垂直對齊文本，但無法將其放在 svg 上并將其居中。

顯示代碼片段

.table-text {
  color: black;
  font-size: 2em;
}

.my-table {
  display: flex;
  align-items: center;
}
<div tabindex="0" class="my-table">
   <svg xmlns="http://www.w3.org/2000/svg" class="my-svg" id="D1" style="fill: #399e54;" fill="none" stroke="black" stroke-width="2" viewBox="0 0 262 263" width="262" height="263">
      <path stroke="" stroke-width="" d="M 229.3 131.5 C 229.3 186.146 185.17 230.445 130.734 230.445 C 76.2972 230.445 32.1677 186.146 32.1677 131.5 C 32.1677 76.8544 76.2972 32.5553 130.734 32.5553 C 185.17 32.5553 229.3 76.8544 229.3 131.5 Z" />
      <path stroke="" stroke-width="" d="M 108.99 29.2536 C 108.936 29.8786 109.427 30.416 110.052 30.416 H 151.948 C 152.573 30.416 153.064 29.8786 153.01 29.2536 L 151.064 6.79053 C 151.016 6.23777 150.555 5.81352 150.003 5.81352 H 111.997 C 111.445 5.81352 110.984 6.23777 110.936 6.79053 L 108.99 29.2536 Z" />
      <path stroke="" stroke-width="" d="M 105.693 2.06967 C 105.693 1.47891 106.17 1 106.758 1 H 155.242 C 155.83 1 156.307 1.47891 156.307 2.06967 V 4.74385 C 156.307 5.33462 155.83 5.81352 155.242 5.81352 H 106.758 C 106.17 5.81352 105.693 5.33462 105.693 4.74385 V 2.06967 Z" />
      <path stroke="" stroke-width="" d="M 108.99 233.746 C 108.936 233.121 109.427 232.584 110.052 232.584 H 151.948 C 152.573 232.584 153.064 233.121 153.01 233.746 L 151.064 256.209 C 151.016 256.762 150.555 257.186 150.003 257.186 H 111.997 C 111.445 257.186 110.984 256.762 110.936 256.209 L 108.99 233.746 Z" />
      <path stroke="" stroke-width="" d="M 105.693 260.93 C 105.693 261.521 106.17 262 106.758 262 H 155.242 C 155.83 262 156.307 261.521 156.307 260.93 V 258.256 C 156.307 257.665 155.83 257.186 155.242 257.186 H 106.758 C 106.17 257.186 105.693 257.665 105.693 258.256 V 260.93 Z" />
      <path stroke="" stroke-width="" d="M 186.373 42.502 C 185.894 42.9055 185.863 43.6339 186.305 44.0775 L 215.93 73.8169 C 216.372 74.2605 217.098 74.2289 217.5 73.7486 L 231.947 56.4835 C 232.302 56.0587 232.275 55.4315 231.884 55.0392 L 205.011 28.0621 C 204.62 27.6698 203.995 27.6426 203.572 27.9994 L 186.373 42.502 Z" />
      <path stroke="" stroke-width="" d="M 203.049 20.8 C 203.465 20.3822 204.14 20.3822 204.556 20.8 L 238.839 55.2149 C 239.255 55.6326 239.255 56.3099 238.839 56.7277 L 236.955 58.6186 C 236.539 59.0363 235.864 59.0363 235.448 58.6186 L 201.165 24.2036 C 200.749 23.7859 200.749 23.1086 201.165 22.6909 L 203.049 20.8 Z" />
      <path stroke="" stroke-width="" d="M 44.5003 189.251 C 44.9023 188.771 45.6278 188.739 46.0697 189.183 L 75.6953 218.923 C 76.1372 219.366 76.1057 220.094 75.6272 220.498 L 58.4283 235.001 C 58.0051 235.357 57.3803 235.33 56.9894 234.938 L 30.1157 207.961 C 29.7248 207.569 29.6977 206.941 30.0532 206.516 L 44.5003 189.251 Z" />
      <path stroke="" stroke-width="" d="M 23.1612 206.272 C 22.745 206.69 22.745 207.367 23.1612 207.785 L 57.4444 242.2 C 57.8605 242.618 58.5352 242.618 58.9513 242.2 L 60.835 240.309 C 61.2511 239.891 61.2511 239.214 60.835 238.796 L 26.5518 204.381 C 26.1357 203.964 25.461 203.964 25.0448 204.381 L 23.1612 206.272 Z" />
      <path stroke="" stroke-width="" d="M 186.373 220.498 C 185.894 220.094 185.863 219.366 186.305 218.923 L 215.93 189.183 C 216.372 188.739 217.098 188.771 217.5 189.251 L 231.947 206.516 C 232.302 206.941 232.275 207.569 231.884 207.961 L 205.011 234.938 C 204.62 235.33 203.995 235.357 203.572 235.001 L 186.373 220.498 Z" />
      <path stroke="" stroke-width="" d="M 203.049 242.2 C 203.465 242.618 204.14 242.618 204.556 242.2 L 238.839 207.785 C 239.255 207.367 239.255 206.69 238.839 206.272 L 236.955 204.381 C 236.539 203.964 235.864 203.964 235.448 204.381 L 201.165 238.796 C 200.749 239.214 200.749 239.891 201.165 240.309 L 203.049 242.2 Z" />
      <path stroke="" stroke-width="" d="M 44.5003 73.7486 C 44.9023 74.2289 45.6278 74.2605 46.0697 73.8169 L 75.6953 44.0775 C 76.1372 43.6339 76.1057 42.9055 75.6272 42.502 L 58.4283 27.9994 C 58.0051 27.6425 57.3803 27.6698 56.9894 28.0621 L 30.1157 55.0392 C 29.7248 55.4315 29.6977 56.0587 30.0532 56.4835 L 44.5003 73.7486 Z" />
      <path stroke="" stroke-width="" d="M 23.1612 56.7277 C 22.745 56.3099 22.745 55.6326 23.1612 55.2149 L 57.4444 20.8 C 57.8605 20.3822 58.5352 20.3822 58.9513 20.8 L 60.835 22.6909 C 61.2511 23.1086 61.2511 23.7859 60.835 24.2036 L 26.5518 58.6186 C 26.1357 59.0363 25.461 59.0363 25.0448 58.6186 L 23.1612 56.7277 Z" />
      <path stroke="" stroke-width="" d="M 232.855 109.107 C 232.232 109.053 231.697 109.545 231.697 110.173 V 152.231 C 231.697 152.858 232.232 153.351 232.855 153.296 L 255.232 151.343 C 255.782 151.295 256.205 150.832 256.205 150.277 V 112.126 C 256.205 111.571 255.782 111.108 255.232 111.06 L 232.855 109.107 Z" />
      <path stroke="" stroke-width="" d="M 259.934 105.758 C 260.523 105.758 261 106.237 261 106.828 V 155.498 C 261 156.089 260.523 156.568 259.934 156.568 H 257.27 C 256.682 156.568 256.205 156.089 256.205 155.498 V 106.828 C 256.205 106.237 256.682 105.758 257.27 105.758 H 259.934 Z" />
      <path stroke="" stroke-width="" d="M 29.1454 109.704 C 29.768 109.649 30.3033 110.142 30.3033 110.769 V 152.827 C 30.3033 153.455 29.768 153.947 29.1454 153.893 L 6.7683 151.94 C 6.21765 151.892 5.79503 151.429 5.79503 150.874 V 112.723 C 5.79503 112.168 6.21766 111.705 6.7683 111.657 L 29.1454 109.704 Z" />
      <path stroke="" stroke-width="" d="M 2.06558 106.432 C 1.47708 106.432 1 106.911 1 107.502 V 156.172 C 1 156.763 1.47708 157.242 2.06558 157.242 H 4.72952 C 5.31802 157.242 5.7951 156.763 5.7951 156.172 V 107.502 C 5.7951 106.911 5.31802 106.432 4.72952 106.432 H 2.06558 Z" />
   </svg>
   <div class="table-text">
     TEST
   </div>
</div>

我也創造了這個小提琴

uj5u.com熱心網友回復：

如果您不想將文本與<text>元素一起包含在 SVG 中，則可以使用絕對定位將文本放置在 SVG 上。
然后，您可以display: flex;像這樣將文本垂直和水平居中：

.my-table {
  display: inline-block;
  position:relative;
}
.table-text {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: black;
  font-size: 2em;
}
<div tabindex="0" class="my-table">
   <svg xmlns="http://www.w3.org/2000/svg" class="my-svg" id="D1" style="fill: #399e54;" fill="none" stroke="black" stroke-width="2" viewBox="0 0 262 263" width="262" height="263">
      <path stroke="" stroke-width="" d="M 229.3 131.5 C 229.3 186.146 185.17 230.445 130.734 230.445 C 76.2972 230.445 32.1677 186.146 32.1677 131.5 C 32.1677 76.8544 76.2972 32.5553 130.734 32.5553 C 185.17 32.5553 229.3 76.8544 229.3 131.5 Z" />
      <path stroke="" stroke-width="" d="M 108.99 29.2536 C 108.936 29.8786 109.427 30.416 110.052 30.416 H 151.948 C 152.573 30.416 153.064 29.8786 153.01 29.2536 L 151.064 6.79053 C 151.016 6.23777 150.555 5.81352 150.003 5.81352 H 111.997 C 111.445 5.81352 110.984 6.23777 110.936 6.79053 L 108.99 29.2536 Z" />
      <path stroke="" stroke-width="" d="M 105.693 2.06967 C 105.693 1.47891 106.17 1 106.758 1 H 155.242 C 155.83 1 156.307 1.47891 156.307 2.06967 V 4.74385 C 156.307 5.33462 155.83 5.81352 155.242 5.81352 H 106.758 C 106.17 5.81352 105.693 5.33462 105.693 4.74385 V 2.06967 Z" />
      <path stroke="" stroke-width="" d="M 108.99 233.746 C 108.936 233.121 109.427 232.584 110.052 232.584 H 151.948 C 152.573 232.584 153.064 233.121 153.01 233.746 L 151.064 256.209 C 151.016 256.762 150.555 257.186 150.003 257.186 H 111.997 C 111.445 257.186 110.984 256.762 110.936 256.209 L 108.99 233.746 Z" />
      <path stroke="" stroke-width="" d="M 105.693 260.93 C 105.693 261.521 106.17 262 106.758 262 H 155.242 C 155.83 262 156.307 261.521 156.307 260.93 V 258.256 C 156.307 257.665 155.83 257.186 155.242 257.186 H 106.758 C 106.17 257.186 105.693 257.665 105.693 258.256 V 260.93 Z" />
      <path stroke="" stroke-width="" d="M 186.373 42.502 C 185.894 42.9055 185.863 43.6339 186.305 44.0775 L 215.93 73.8169 C 216.372 74.2605 217.098 74.2289 217.5 73.7486 L 231.947 56.4835 C 232.302 56.0587 232.275 55.4315 231.884 55.0392 L 205.011 28.0621 C 204.62 27.6698 203.995 27.6426 203.572 27.9994 L 186.373 42.502 Z" />
      <path stroke="" stroke-width="" d="M 203.049 20.8 C 203.465 20.3822 204.14 20.3822 204.556 20.8 L 238.839 55.2149 C 239.255 55.6326 239.255 56.3099 238.839 56.7277 L 236.955 58.6186 C 236.539 59.0363 235.864 59.0363 235.448 58.6186 L 201.165 24.2036 C 200.749 23.7859 200.749 23.1086 201.165 22.6909 L 203.049 20.8 Z" />
      <path stroke="" stroke-width="" d="M 44.5003 189.251 C 44.9023 188.771 45.6278 188.739 46.0697 189.183 L 75.6953 218.923 C 76.1372 219.366 76.1057 220.094 75.6272 220.498 L 58.4283 235.001 C 58.0051 235.357 57.3803 235.33 56.9894 234.938 L 30.1157 207.961 C 29.7248 207.569 29.6977 206.941 30.0532 206.516 L 44.5003 189.251 Z" />
      <path stroke="" stroke-width="" d="M 23.1612 206.272 C 22.745 206.69 22.745 207.367 23.1612 207.785 L 57.4444 242.2 C 57.8605 242.618 58.5352 242.618 58.9513 242.2 L 60.835 240.309 C 61.2511 239.891 61.2511 239.214 60.835 238.796 L 26.5518 204.381 C 26.1357 203.964 25.461 203.964 25.0448 204.381 L 23.1612 206.272 Z" />
      <path stroke="" stroke-width="" d="M 186.373 220.498 C 185.894 220.094 185.863 219.366 186.305 218.923 L 215.93 189.183 C 216.372 188.739 217.098 188.771 217.5 189.251 L 231.947 206.516 C 232.302 206.941 232.275 207.569 231.884 207.961 L 205.011 234.938 C 204.62 235.33 203.995 235.357 203.572 235.001 L 186.373 220.498 Z" />
      <path stroke="" stroke-width="" d="M 203.049 242.2 C 203.465 242.618 204.14 242.618 204.556 242.2 L 238.839 207.785 C 239.255 207.367 239.255 206.69 238.839 206.272 L 236.955 204.381 C 236.539 203.964 235.864 203.964 235.448 204.381 L 201.165 238.796 C 200.749 239.214 200.749 239.891 201.165 240.309 L 203.049 242.2 Z" />
      <path stroke="" stroke-width="" d="M 44.5003 73.7486 C 44.9023 74.2289 45.6278 74.2605 46.0697 73.8169 L 75.6953 44.0775 C 76.1372 43.6339 76.1057 42.9055 75.6272 42.502 L 58.4283 27.9994 C 58.0051 27.6425 57.3803 27.6698 56.9894 28.0621 L 30.1157 55.0392 C 29.7248 55.4315 29.6977 56.0587 30.0532 56.4835 L 44.5003 73.7486 Z" />
      <path stroke="" stroke-width="" d="M 23.1612 56.7277 C 22.745 56.3099 22.745 55.6326 23.1612 55.2149 L 57.4444 20.8 C 57.8605 20.3822 58.5352 20.3822 58.9513 20.8 L 60.835 22.6909 C 61.2511 23.1086 61.2511 23.7859 60.835 24.2036 L 26.5518 58.6186 C 26.1357 59.0363 25.461 59.0363 25.0448 58.6186 L 23.1612 56.7277 Z" />
      <path stroke="" stroke-width="" d="M 232.855 109.107 C 232.232 109.053 231.697 109.545 231.697 110.173 V 152.231 C 231.697 152.858 232.232 153.351 232.855 153.296 L 255.232 151.343 C 255.782 151.295 256.205 150.832 256.205 150.277 V 112.126 C 256.205 111.571 255.782 111.108 255.232 111.06 L 232.855 109.107 Z" />
      <path stroke="" stroke-width="" d="M 259.934 105.758 C 260.523 105.758 261 106.237 261 106.828 V 155.498 C 261 156.089 260.523 156.568 259.934 156.568 H 257.27 C 256.682 156.568 256.205 156.089 256.205 155.498 V 106.828 C 256.205 106.237 256.682 105.758 257.27 105.758 H 259.934 Z" />
      <path stroke="" stroke-width="" d="M 29.1454 109.704 C 29.768 109.649 30.3033 110.142 30.3033 110.769 V 152.827 C 30.3033 153.455 29.768 153.947 29.1454 153.893 L 6.7683 151.94 C 6.21765 151.892 5.79503 151.429 5.79503 150.874 V 112.723 C 5.79503 112.168 6.21766 111.705 6.7683 111.657 L 29.1454 109.704 Z" />
      <path stroke="" stroke-width="" d="M 2.06558 106.432 C 1.47708 106.432 1 106.911 1 107.502 V 156.172 C 1 156.763 1.47708 157.242 2.06558 157.242 H 4.72952 C 5.31802 157.242 5.7951 156.763 5.7951 156.172 V 107.502 C 5.7951 106.911 5.31802 106.432 4.72952 106.432 H 2.06558 Z" />
   </svg>
   <div class="table-text">
     TEST
   </div>
</div>

uj5u.com熱心網友回復：

SVG 可以對齊文本，使用pathLength

在 SVG 上居中文本元素

<svg viewbox="0 0 200 50">
  <path id="P" pathLength="10" d="M0 20h200" stroke="blue"/>
  <text>
    <textPath href="#P" 
              startoffset="5" text-anchor="middle" 
              dominant-baseline="middle"
              fill="green" font-size="14px">Middle aligned</textPath>
  </text>
</svg>

將整個表格繪制為本機 Web 組件：<svg-table>

<svg-table>Table #1</svg-table>
<svg-table chairs="4" chair="gold">VIPs</svg-table>
<svg-table chairs="5">Table2</svg-table>
<svg-table chairs="10" color="red">Full</svg-table>

在 SVG 上居中文本元素

<script>
  customElements.define("svg-table", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => { // ensure innerHTML is parsed
        let tablename = this.innerHTML;
        let tablecolor = this.getAttribute("color") || "green";
        let chaircolor = this.getAttribute("chair") || "lightgreen";
        let chaircount = ~~this.getAttribute("chairs") || 8;
        let angle = 360 / chaircount;
        let chair = `<path fill="${chaircolor}" stroke="black" d="m109 29c0 1 0 1 1 1h42c1 0 1-1 1-1l-2-22c0-1-1-1-1-1h-38c-1 0-1 0-1 1l-2 22zm-3-27c0-1 0-1 1-1h48c1 0 1 0 1 1v3c0 1 0 1-1 1h-48c-1 0-1 0-1-1v-3z"
                           transform="rotate(ANGLE 131 131)"/>`;
        let chairs = Array(chaircount).fill(0).map((_, i) => chair.replace("ANGLE", i * angle));
        let table = `<circle fill="${tablecolor}" stroke="black" cx="131" cy="131" r="98"/>`;
        let label = `<path id="P" pathLength="2" d="M0 135h262"/>`   // 135 = y
          `<text><textPath href="#P" startoffset="1" text-anchor="middle" dominant-baseline="middle" fill="beige" stroke="none" font-size="45px">`  
          `${tablename}</textPath></text>`;
        let svg = `<svg viewBox="0 0 262 262"><defs>${chair}</defs>${table}${label}${chairs}</svg>`;
        this.innerHTML = svg;

      })
    }
  })
</script>

<room style="display:grid;grid:1fr/repeat(4,1fr);gap:1em">
  <svg-table>Table #1</svg-table>
  <svg-table chairs="4" chair="gold">VIPs</svg-table>
  <svg-table chairs="5">Table2</svg-table>
  <svg-table chairs="10" color="red">Full</svg-table>
</room>

uj5u.com熱心網友回復：

<text>（集成的）svg元素/標簽的一些好處：

  • 對齊/字體大小將相對于父 svg - 回應式文本顯示所需的 css 規則更少
  • 創建/保存靜態獨立 svg 檔案的機會（可用于其他應用程式，如辦公室或圖形應用程式或 pdf 匯出庫）

您可以輕松地將文本元素（水平/垂直）居中對齊，如下所示：

<text x="50%" y="50%" class="table-text" text-anchor="middle" dominant-baseline="middle">
   Test
</text>

如果您需要對多行文本的支持（并且不需要自包含的靜態 svg 檔案），您也可以使用<foreignObject>

<foreignObject class="foreignObject" x="0" y="0" width="100%" height="263px">
  <div class="div-center">
    <p class="p-center" xmlns="http://www.w3.org/1999/xhtml">
      foreignObject<br />subhead<br />subhead
    </p>
  </div>
</foreignObject>

可調整大小的圖形示例：文本和foreignObject

顯示代碼片段

.my-table {
  resize: both;
  position: relative;
  overflow: auto;
  width: 50%;
  border: 1px solid #ccc;
  display: inline-block;
}

.my-svg {
  display: inline-block;
  height: 20em;
  max-width: 100%;
  max-height: 100%
}
<svg xmlns="http://www.w3.org/2000/svg" class="svgAsset" style="position:absolute;visibility:hidden;height:0; width:0;">
  <symbol id="table" viewBox="0 0 262 263">
    <path d="M 229.3 131.5 C 229.3 186.146 185.17 230.445 130.734 230.445 C 76.2972 230.445 32.1677 186.146 32.1677 131.5 C 32.1677 76.8544 76.2972 32.5553 130.734 32.5553 C 185.17 32.5553 229.3 76.8544 229.3 131.5 Z" />
  </symbol>
  <symbol id="chair" viewBox="0 0 262 263">
    <path d="M 108.99 29.2536 C 108.936 29.8786 109.427 30.416 110.052 30.416 H 151.948 C 152.573 30.416 153.064 29.8786 153.01 29.2536 L 151.064 6.79053 C 151.016 6.23777 150.555 5.81352 150.003 5.81352 H 111.997 C 111.445 5.81352 110.984 6.23777 110.936 6.79053 L 108.99 29.2536 Z
M 105.693 2.06967 C 105.693 1.47891 106.17 1 106.758 1 H 155.242 C 155.83 1 156.307 1.47891 156.307 2.06967 V 4.74385 C 156.307 5.33462 155.83 5.81352 155.242 5.81352 H 106.758 C 106.17 5.81352 105.693 5.33462 105.693 4.74385 V 2.06967 Z" />
  </symbol>
</svg>

<div tabindex="0" class="my-table">
  <svg xmlns="http://www.w3.org/2000/svg" class="my-svg" id="D1" style="fill: #399e54;" fill="none" stroke="black" stroke-width="2" viewBox="0 0 262 263">
    <style>
      .chair {
        transform-origin: center;
      }

      .table-text {
        font-size: 32px;
        line-height: 32px;
      }
    </style>
    <use class="table" href="#table" />
    <use class="chair" href="#chair" />
    <use class="chair" href="#chair" transform="rotate(45)" />
    <use class="chair" href="#chair" transform="rotate(90)" />
    <use class="chair" href="#chair" transform="rotate(135)" />
    <use class="chair" href="#chair" transform="rotate(180)" />
    <use class="chair" href="#chair" transform="rotate(225)" />
    <use class="chair" href="#chair" transform="rotate(270)" />
    <use class="chair" href="#chair" transform="rotate(315)" />
    <text x="50%" y="50%" class="table-text" fill="#000" stroke="none" text-anchor="middle" dominant-baseline="middle">text</text>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" class="my-svg" id="D2" style="fill: red;" fill="none" stroke="black" stroke-width="2" viewBox="0 0 262 263">
    <style>
      .chair {
        transform-origin: center;
      }

      .table-text {
        font-size: 32px;
        line-height: 32px;
      }

      .p-center {
        font-size: 28px;
        line-height: 1em;
        text-align: center;
        margin: 0;
      }

      .div-center {
        display: flex;
        width: 100%;
        height: 260px;
        align-content: center;
        justify-content: center;
        flex-wrap: wrap;
      }
    </style>
    <use class="table" href="#table" />
    <use class="chair" href="#chair" />
    <use class="chair" href="#chair" transform="rotate(45)" />
    <use class="chair" href="#chair" transform="rotate(90)" />
    <use class="chair" href="#chair" transform="rotate(135)" />
    <use class="chair" href="#chair" transform="rotate(180)" />
    <use class="chair" href="#chair" transform="rotate(225)" />
    <use class="chair" href="#chair" transform="rotate(270)" />
    <use class="chair" href="#chair" transform="rotate(315)" />

    <foreignObject class="foreignObject" x="0" y="0" width="100%" height="263px">
      <div class="div-center">
        <p class="p-center" xmlns="http://www.w3.org/1999/xhtml">
          foreignObject<br />subhead<br />subhead
        </p>
      </div>
    </foreignObject>

  </svg>
</div>

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

標籤：css svg

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

下一篇：Vaadin遷移14到23：圖示大小不同（viewbox錯誤？）

標籤雲
其他(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 有解無憂