切割銳利的霓虹燈文字和svg效果

我正在開發一個Neon網站。文本和 SVG 有一個選項可以cut sharped像這些示例影像一樣產生效果：

我正在嘗試對我的霓虹燈文本和 svgs 做同樣的效果，但無法使其完美。
第一次嘗試：

filter: drop-shadow(rgb(179, 179, 179) 2px 0px 0px) drop-shadow(rgb(179, 179, 179) -2px 0px 0px) drop-shadow(rgb(179, 179, 179) 0px 2px 0px) drop-shadow(rgb(179, 179, 179) 0px -2px 0px);

這drop-shadow不能正常作業，因為它顯示為 3/4 陰影層：

第二次嘗試：

-webkit-text-stroke: 1px rgb(179, 179, 179);

stroke也不完美，這很奇怪。

有人可以幫我實作cut sharped對文本和 svgs 的影響，比如我上面顯示的示例影像嗎？我堅持下去。

uj5u.com熱心網友回復：

您可以使用
Sara Soueidan 所描述的 svg 過濾器（SVG 過濾器效果：帶有 的大綱文本）

Svg 過濾器可以應用于 svg 和 html 元素。

body {
  background-color: #222;
}

h1,
h2{
  font-family: 'Kaushan Script', cursive;
  color: #fff;
  text-align:center;
  font-size: 12vw;
  margin:0
}

h1{
  font-size: 20vw;
}

.outline{
  filter: url(#outline);
}

<link href="https://fonts.googleapis.com/css2?family=Kaushan Script&display=swap" rel="stylesheet">
<h1 class="outline">Hello</h1>
<h2 class="outline">World</h2>


<svg viewBox="0 0 100 100">
  <filter id="outline">
    <feMorphology in="SourceAlpha" result="dilated" operator="dilate" radius="5" />
    <feFlood flood-color="magenta" flood-opacity="1" result="neon" />
    <feComposite in="neon" in2="dilated" operator="in" result="outline" />
    <feMerge>
      <feMergeNode in="outline" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</svg>

然而：svg 過濾器因引入大量性能損失而臭名昭著。
所以你不應該將它們應用于許多元素。

uj5u.com熱心網友回復：

對于 SVG，這很容易。在繪制填充之前，只需繪制描邊的路徑。

但是，您必須在任何填充之前繪制所有筆畫。否則，一個元素的筆觸將位于前一個元素的填充之上。

<svg viewBox="0 0 203.2 152.4">
  <defs>
    <g id="hello">
      <path d="m 153.91272,38.02268 c -2.12093,1.573594 -4.03661,4.173443 -7.04696,3.626107 1.29993,-2.668267 2.66827,-5.062866 2.66827,-8.073218 0,-2.052513 -0.4105,-3.489272 -2.46302,-4.036609 0.75259,-0.410503 1.5736,-0.821005 1.5736,-1.847262 0,-1.847261 -2.25777,-2.531432 -3.76294,-2.463015 -4.17345,0.205251 -9.09948,2.052513 -12.794,5.062865 -3.83136,2.941935 -6.36279,6.36279 -6.22596,11.494073 0.27367,6.225956 3.55769,9.783645 7.11538,9.783645 4.31028,0 7.66272,-2.189347 10.53623,-5.131283 4.99445,0 8.00481,-1.64201 11.08357,-5.541785 z m -12.58874,-5.336533 c 0.27367,0.136834 -2.94194,4.447111 -2.94194,8.0048 0,1.163091 0.34209,2.052513 0.82101,3.147187 -1.5736,1.436759 -3.01036,2.736684 -5.26812,2.736684 -1.71043,0 -3.01035,-0.615754 -3.01035,-2.59985 0,-2.12093 1.29992,-4.789197 2.8051,-6.294373 2.05251,-1.984096 5.26812,-3.626106 7.5943,-4.994448 z"/>
      <path d="m 113.6151,31.728307 c 3.2156,-7.046961 7.11537,-13.2045 10.46781,-14.84651 -1.23151,3.899774 -5.47337,10.467816 -10.33098,14.983344 z m 13.34133,7.252213 c -2.73668,2.463015 -8.0048,6.84171 -11.76774,6.84171 -1.84726,0 -2.8051,-1.368342 -3.42086,-2.941936 -0.34208,-1.64201 -0.13683,-3.557689 0.47892,-4.72078 14.84652,-14.36759 16.62536,-20.388295 17.10428,-26.887919 0.0684,-0.889423 -0.20525,-2.5314327 -1.36834,-2.5314327 -2.18935,0 -8.68897,6.3627897 -14.70968,13.8202537 -4.44711,5.473368 -7.52588,13.2045 -7.52588,20.388295 0,4.036609 1.09467,8.894223 6.08912,8.894223 5.88387,0 12.31508,-6.910127 16.07802,-10.809901 z"/>
      <path d="m 93.090027,31.728307 c 3.2156,-7.046961 7.115373,-13.2045 10.467813,-14.84651 -1.23151,3.899774 -5.473373,10.467816 -10.330983,14.983344 z m 13.341333,7.252213 c -2.73668,2.463015 -8.004803,6.84171 -11.767743,6.84171 -1.84726,0 -2.8051,-1.368342 -3.42086,-2.941936 -0.34208,-1.64201 -0.13683,-3.557689 0.47892,-4.72078 14.846513,-14.36759 16.625363,-20.388295 17.104283,-26.887919 0.0684,-0.889423 -0.20525,-2.5314327 -1.36834,-2.5314327 -2.18935,0 -8.688973,6.3627897 -14.709683,13.8202537 -4.44711,5.473368 -7.52588,13.2045 -7.52588,20.388295 0,4.036609 1.09467,8.894223 6.08912,8.894223 5.88387,0 12.315083,-6.910127 16.078023,-10.809901 z"/>
      <path d="m 85.974747,38.364766 c -3.6261,2.873518 -9.373141,7.867966 -14.230755,7.867966 -2.189347,0 -4.447112,-0.889422 -4.24186,-3.489272 l 0.136834,-1.505176 c 13.136081,-4.310277 16.488521,-9.373143 16.488521,-12.72558 0,-2.736684 -2.73668,-3.284021 -4.92603,-3.284021 -8.894224,-0.06842 -18.814704,9.099474 -18.541035,18.062114 0.136834,4.515528 2.463015,8.96264 7.457464,8.96264 6.773292,0 14.299171,-6.431207 18.472621,-11.288821 z m -17.925278,-0.47892 c 1.847261,-4.515528 5.815453,-7.799549 9.236308,-8.688971 0.47892,-0.136835 0.82101,0.273668 0.82101,0.752588 0.0684,1.16309 -4.036614,5.88387 -10.057318,7.936383 z"/>
      <path d="m 39.861688,39.254188 c -2.531432,4.789197 -3.626106,7.936384 -3.968191,9.988897 -0.342086,2.052512 0.06842,3.010352 1.231507,3.420854 1.778845,0.615754 5.268117,-2.736683 7.457464,-2.257764 C 44.3088,49.10625 43.82988,47.532657 43.82988,46.301149 c 0,-2.052513 2.531433,-5.268116 3.557689,-7.046961 2.805101,-0.205251 4.926031,0 6.978544,0.47892 2.189348,-3.557689 4.994449,-6.636459 8.210052,-9.167892 -2.805101,-1.710427 -6.157539,-1.64201 -9.304725,-1.710427 l 7.389046,-9.099474 c 5.131283,-6.294373 5.610203,-7.594298 5.610203,-9.7836447 0,-0.752588 -0.273669,-1.573594 -1.163091,-1.573594 -1.436759,0 -4.310277,3.8313577 -5.131283,4.9260317 L 47.592821,28.854789 37.056587,30.086297 44.78772,21.876245 c 2.736683,-2.941935 6.841709,-7.046961 6.841709,-11.288821 0,-3.3524377 -1.710427,-6.7048757 -7.389046,-6.7048757 -5.883871,0 -14.504425,1.64201 -20.183044,3.489272 -3.899775,1.231508 -15.3254311,4.9944477 -17.7884461,7.7995487 -1.231508,1.642011 -2.326182,5.541785 -2.326182,7.525881 0,1.231508 0.47892,3.147187 2.052513,3.147187 0.95784,0 1.915679,-0.547337 2.736684,-0.95784 4.7207801,-2.394598 4.2418601,-2.463015 9.3731431,-4.24186 0.821005,-0.273668 1.710427,-0.684171 1.710427,-1.64201 0,-0.615754 -0.478919,-0.821005 -0.957839,-1.026257 11.220404,-4.652362 19.840959,-7.183795 23.467065,-7.183795 0.821005,0 2.394598,0.273668 2.394598,1.505176 0,1.368342 -1.984095,3.762941 -2.873518,4.72078 -6.020704,6.84171 -10.946736,12.178244 -13.546585,14.709676 -10.399399,1.984096 -10.467816,2.463016 -11.220405,2.463016 -0.547336,0 -1.094673,-0.47892 -1.573593,-0.47892 -1.847262,0 -3.831357,3.626106 -3.831357,5.1997 0,2.326181 2.189347,3.215603 6.978544,2.805101 -0.95784,1.847261 -5.815454,6.568041 -5.815454,8.48372 0,1.573593 1.847262,2.941935 3.352438,2.941935 1.642011,0 3.147187,-2.736684 3.968192,-3.899774 l 7.115378,-8.346887 z"/>
    </g>
  </defs>
  
  <use xlink:href="#hello" fill="none" stroke="red" stroke-width="8"/>
  <use xlink:href="#hello" fill="black"/>
</svg>

uj5u.com熱心網友回復：

您可以使用 text-shadow 添加多個陰影，只需用逗號分隔它們，如下所示：

.neon {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff;
}

只需使用陰影顏色和間距，直到它們符合您的喜好。或在Codepen上查看。

標籤：html css svg

上一篇：單擊其中一個SVG部件以顯示影像

下一篇：遍歷javascript中的陣列并回傳新陣列