轰，哇，战俘！ 带有SVG过滤器的漫画FX刻字

In two previous articles I’ve talked about using SVG to make comic book speech bubbles; in this one, I’m going to look at text effects associated with lettering for sound effects, which are more broadly applicable to web design.

在前两篇文章中，我讨论了使用SVG制作漫画演讲泡泡 ; 在这一部分中，我将研究与声音效果的刻字相关的文本效果，这些效果更广泛地适用于Web设计。

加入概述的信件 (Joined Outlined Letters)

Stroking the exterior of letterforms is a fairly well-established technique in web design: Webkit has a property to do so; you can also fake it with text-shadow, or use SVG stroke. However, none of those techniques allow you to do joined stroked letterforms, shown in the example at the top, where the stroke goes around the shared outline of letters that overlap. To achieve that, we have to use SVG filters:

在Web设计中，抚摸字母形式的外观是一项相当完善的技术：Webkit具有这样做的特性； 您也可以使用text-shadow伪造它 ，或使用SVG stroke 。 但是，这些技巧都不允许您执行连接的笔划字母形式(如顶部示例所示)，其中笔划围绕重叠的字母的共享轮廓进行。 为此，我们必须使用SVG过滤器：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 500">
    <defs>
        <filter id="outline">
            <feMorphology operator="dilate" in="SourceAlpha" radius="3"/>
            <feComposite in="SourceGraphic"/>
        </filter>
    </defs>
    <text fill="yellow" filter="url(#outline)" x="0" y="100" 
        dx="0, -10, -10, -12">
        BOOM
    </text>
</svg>

The <text> element (sized to 120px with CSS) uses staggered dx values, explained in the last article, to draw the letters together, while the <filter> strokes the joined outline.

<text>元素(CSS的大小为120px)使用交错的dx值(在上一篇文章中进行了说明)将字母拼在一起，而<filter>则绘制连接的轮廓。

I’ve made each example contentEditable, so you can edit the text yourself to see how it works with different letters: simply highlight the text and insert new content.

我已将每个示例都设置为contentEditable ，因此您可以自己编辑文本以查看其如何使用不同的字母：只需突出显示文本并插入新内容即可。

I’ll have more to say about the dilate filter in a future article: for now, you might want to experiment with changing the thickness of the stroke by altering the radius value of the filter in the associated CodePen demo.

在以后的文章中，我将对dilate过滤器进行更多说明：现在，您可能想尝试通过在关联的CodePen演示中更改过滤器的radius值来更改笔触的粗细。

粗体 (Roughened Text)

Sound effect lettering is also often drawn distorted or jagged to enhance the effect: think of the visual association of a sound like KERR-UNCH!, for example. We can achieve a similar result with SVG:

声音效果刻字也经常被扭曲或锯齿地绘制以增强效果：想想像KERR-UNCH之类的声音的视觉关联！ ， 例如。 我们可以使用SVG达到类似的结果：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60">
    <defs>
        <filter id="breakup">
            <feTurbulence result="TURBULENCE" baseFrequency=".7"
                numOctaves="1" seed="1" />
            <feDisplacementMap in="SourceGraphic" in2="TURBULENCE" 
                scale="1.7" />
        </filter>
    </defs>
<text x="10" y="50" dy="0, -10, 8, -8" filter="url(#breakup)">WHAM</text>
</svg>

This time the text is staggered vertically with dy values. Again, I’ll have more to say about the feTurbulence filter in a future article. For now, I’d suggest playing with the baseFrequency and scale values in the CodePen demo: these two values control how “fragmented” the roughness is, and the size of the fragment details.

这次文本与dy值垂直交错。 同样，在以后的文章中，我将对feTurbulence过滤器进行更多说明。 现在，我建议在CodePen演示中使用baseFrequency和scale值：这两个值控制粗糙度的“碎片化”程度以及片段细节的大小。

Dirk Weber’s excellent article The Art Of The SVG Filter And Why It Is Awesome on Smashing Magazine contains many more examples of using SVG filters on text.

Dirk Weber在Smashing Magazine上出色的文章SVG过滤器的艺术以及它为何如此出色包含了更多在文本上使用SVG过滤器的示例。

本戴点 (Ben-Day Dots)

In a previous article I’ve demonstrated a halftone effect with SVG. Officially, halftone uses dots or shapes that can change size and distribution, whereas Ben-Day dots, the variation I’m using here, must always remain the same size and spacing. “pop art” movement.

在上一篇文章中，我演示了SVG的半色调效果 。 正式地，半色调使用可以改变大小和分布的点或形状，而Ben-Day点(我在此处使用的变体)必须始终保持相同的大小和间距。 “流行艺术”运动。

Initial design of Ben-Day pattern in Adobe Illustrator

Ben Illustra模式在Adobe Illustrator中的初步设计

To create this effect, I started by creating a series of circle elements with their centers at the points of a hexagon. Fit on the edges of a <pattern> element, these circles would create the fill, with the addition of a <rect> behind them (since a <pattern> cannot take a traditional fill). This technique echoes the many examples I’ve used in making SVG backgrounds.

为了产生这种效果，我首先创建了一系列圆心 ，它们的中心在六边形的点上。 这些圆适合<pattern>元素的边缘，将创建填充，并在其后添加<rect> (因为<pattern>不能采用传统fill )。 这项技术呼应了我制作SVG背景时使用的许多示例。

<pattern id="hexapolka" patternUnits="userSpaceOnUse"
	width="100" height="86" patternTransform="scale(.1)">
    <rect width="100%" height="86" fill="#f0f" />
    <circle cx="0" cy="44" r="16" id="dot" fill="red" />
	<use xlink:href="#dot" transform="translate(48,0)" />
    <use xlink:href="#dot" transform="translate(25,-44)" />
    <use xlink:href="#dot" transform="translate(75,-44)" />
    <use xlink:href="#dot" transform="translate(100,0)" />
    <use xlink:href="#dot" transform="translate(75,42)" />
    <use xlink:href="#dot" transform="translate(25,42)" />
</pattern>

Added to the <defs> section, this was joined by a <filter> to create a drop shadow for the text:

添加到<defs>部分，由<filter> ，以为文本创建阴影：

<filter id="shadow">
    <feConvolveMatrix order="4,4" 
       kernelMatrix="
       1 0 0 0
       0 1 0 0
       0 0 1 0 
       0 0 0 1" in="SourceAlpha" result="bevel" />
    <feOffset dx="1" dy ="1" in="bevel" result="offset" />
    <feMerge>
       <feMergeNode in="offset" />
       <feMergeNode in="SourceGraphic" />
    </feMerge>
</filter>

I’ll provide much more information on <feMerge> and <feConvolveMatrix> in a future article; for now, I’d recommend playing with the dx and dy values to change the shadow offset in the CodePen demo.

我将在以后的文章中提供有关<feMerge>和<feConvolveMatrix>更多信息。 现在，我建议使用dx和dy值来更改CodePen演示中的阴影偏移。

The text is treated slightly differently in this case, as it has both a fill and a filter applied to it:

在这种情况下，对文本的处理略有不同，因为它同时具有填充和过滤器：

svg text {
  filter: url(#shadow);
  fill: url(#hexapolka);
}

Note that Safari currently has an issue with a drop-shadow applied this way, meaning that the text will not render in Safari (desktop or iOS). There are alternatives, which I will cover in an SVG drop shadow article; in the future, SVG2 should also support the text-shadow property of CSS.

请注意，Safari当前在使用这种阴影方式存在问题，这意味着文本不会在Safari(台式机或iOS)中呈现。 有一些替代方法，我将在SVG投影文章中介绍。 将来，SVG2还应该支持CSS的text-shadow属性。

结论 (Conclusion)

With a little work and experimentation, many different kinds of text effects can be easily achieved with SVG filters, which is a topic I’ll look at in depth next.

只需做一些工作和实验，使用SVG过滤器就可以轻松实现许多不同种类的文本效果，这是我接下来将要深入探讨的主题。

翻译自: https://thenewcode.com/633/Boom-Wham-Pow-Comic-Book-FX-Lettering-with-SVG-Filters