改善霓虹锐化切割文字效果
[英]Improve neon sharped cut text effect
问题描述
I am trying to add sharped cut effect on text.
我正在尝试在文本上添加锐利的剪切效果。 I have achieved this thing:我已经实现了这件事：
But I want to achieve this backplate/background sharped cut text effect:但我想实现这种背板/背景锐化切割文本效果：
My Code:我的代码：
.wrapper { background-color: #000; } .previewText { text-shadow: var(--text-color) 0px 0px 10px, var(--text-color) 0px 0px 25px, #000 1px 1px 1px; --text-color: #fff; } .previewText svg { position: absolute; left: 0; top: 0; z-index: 0; }
<div class="wrapper"> <div class="preview-items--item__text previewText cut-sharp" style="font-family: Amarila; font-size: 50px; --text-color:#30cbfd;"> <div style="filter: url("#cutSharpru5i2bye4iml4tvt6s0");"> <p>work <span style="font-family: PoiretOne;">HARD</span></p> <p><span style="font-family: PoiretOne;">dream</span> big</p> </div> <svg viewBox="0 0 100 100"> <filter id="cutSharpru5i2bye4iml4tvt6s0"> <feMorphology in="SourceGraphic" result="dilated" operator="dilate" radius="2.5"></feMorphology> <feFlood flood-color="#fff" flood-opacity="0.12" result="neon"></feFlood> <feComposite in="neon" in2="dilated" operator="in" result="cutSharpru5i2bye4iml4tvt6s0"></feComposite> <feMerge> <feMergeNode in="cutSharpru5i2bye4iml4tvt6s0"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </svg> </div> </div>
Can someone help me to achieve that thing as shown in the image #2?有人可以帮助我实现如图 #2 所示的目标吗？ I am stuck.我被困住了。 I tried a lot but i just got a little bit of a stroke with svg , the stroke should be in the full background of texts as shown in the image #2.我尝试了很多，但我只是用svg得到了一点笔触，笔触应该在文本的完整背景中，如图 #2 所示。
1 个解决方案
解决方案1
3 2022-06-25 19:29:48
You need to use lighting primitives to get those edge lighting effects.您需要使用光照图元来获得那些边缘光照效果。 Lighting primitives are buggy and usually trigger some kind of weird cross-browser bug then when you try to run them on Safari.光照原语是有缺陷的，当您尝试在 Safari 上运行它们时，通常会触发某种奇怪的跨浏览器错误。 Even Chrome runs into issues with them because they're just not very well debugged.甚至 Chrome 也遇到了问题，因为它们没有很好地调试。
That caveat provided - this is the basic structure of how you'd accomplish something like this.提供的警告 - 这是你如何完成这样的事情的基本结构。 It's a painstaking process of trial and error to figure out the exact right combination of lighting effect attributes to get exactly what you want - so this is something in the right neighborhood but I would not claim this is professional quality yet.这是一个艰苦的试错过程，以找出照明效果属性的正确组合以获得您想要的结果 - 所以这是在正确的附近，但我不会声称这是专业品质。
I would probably recommend Photoshop rather than SVG filters for this kind of effect.对于这种效果，我可能会推荐 Photoshop 而不是 SVG 滤镜。
body { background-color: black; } .meow { font-family: 'Meow Script', cursive; font-size: 11pt; font-weight: light; fill: #faf; stroke: none; } .comfort { font-family: 'Comfortaa', sans-serif; font-size: 11pt; font-weight: light; fill: #FAF; stroke: none; }
<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Meow+Script&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet"> </head> <body> <svg width="800px" height="600px" viewBox="0 0 100 100"> <defs> <filter id="shiny-filter" height="200%" color-interpolation-filters="sRGB"> <!-- Part 1 neon text --> <feMorphology operator="dilate" radius="0.25" result="dilated-original"/> <feGaussianBlur stdDeviation="0.75"/> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1.1 0" result="glow"/> <feComposite operator="over" in2='SourceGraphic' result="neon-text"/> <!-- Part 2 drop shadow --> <feGaussianBlur stdDeviation="0.5" in="dilated-original" result="blurred-dil-orig"/> <feFlood flood-color="#111"/> <feComposite operator="in" in2="blurred-dil-orig"/> <feOffset dy="4" result="drop-shadow-y"/> <feComposite operator="over" in="neon-text" in2="drop-shadow-y" result="neon-text-and-shadow"/> <!-- Part 3 backplate --> <feMorphology radius="2" operator="dilate" in="dilated-original" result="super-dilated-original"/> <feFlood x="9.5" y="4" width="72" height="30" flood-color="#111"/> <feComposite operator="over" in="super-dilated-original"/> <feGaussianBlur stdDeviation="1" result="combined-backdrop"/> <feFlood flood-color="#222"/> <feComposite operator="in" in2="combined-backdrop" result="combined-backdrop-grey"/> <!-- Part 4 lighting --> <feSpecularLighting in="combined-backdrop-grey" result="topOut" specularExponent="15" lighting-color="#FcF" surfaceScale="2"> <fePointLight x="50" y="-150" z="10"/> </feSpecularLighting> <feSpecularLighting in="combined-backdrop-grey" result="leftOut" specularExponent="15" lighting-color="#FcF" surfaceScale="2" > <fePointLight x="-150" y="50" z="10"/> </feSpecularLighting> <feSpecularLighting in="combined-backdrop-grey" result="rightOut" specularExponent="15" lighting-color="#FcF" surfaceScale="2" > <fePointLight x="150" y="50" z="10"/> </feSpecularLighting> <feMerge> <feMergeNode in="combined-backdrop-grey"/> <feMergeNode in="neon-text-and-shadow"/> <feMergeNode in="leftOut"/> <feMergeNode in="topOut"/> <feMergeNode in="rightOut"/> </feMerge> </filter> </defs> <g transform="translate(0 3)" filter="url(#shiny-filter)"> <text class="meow" x="10" y="11">work</text> <text class="comfort" x="38" y="14">HARD</text> <text class="comfort" x="9" y="33">DREAM</text> <text class="meow" x="73" y="33">big</text> </g> </svg>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.