使用SVG制作漫画书气泡

While there are a great many techniques for making speech bubbles on web pages using CSS, most tend to be either complex to create, or too simple for the expressive nature of comic book dialogue. While not without a few limits of its own, SVG offers far more options:

尽管有许多使用CSS在网页上制作气泡的技术，但大多数技术要么创建起来很复杂，要么对于漫画对话的表现性来说太简单了。 SVG不仅有其自身的一些局限性，还提供了更多的选择：

冒泡 (Making Bubbles)

Creating the bubbles is fairly straightforward in any vector graphic application: for a simple bubble I’d recommend merging an ellipse with a speech “tail” to create a single SVG path. However, the exported code does have to be treated a little carefully:

在任何矢量图形应用程序中，创建气泡都非常简单：对于简单的气泡，我建议将椭圆与语音“尾巴”合并以创建单个SVG路径。 但是，导出的代码确实需要谨慎处理：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" 
viewBox="0 0 132 136">
    <path d="M125.2,2.8C57.6,2.8,2.8,42.1,2.8,84.6c0,33.3,33.9,61.6,81.1,72.2c2.8,27.2-2.5,71.7-16.1,88.4c20.5-23,42.4-61.8,50.4-84 c2.3,0,4.7,0.2,7,0.2c67.6,0,122.3-34.4,122.3-76.8S192.8,2.8,125.2,2.8z" />
</svg>

Note the removal of the width and height attributes on the SVG, together with the addition of preserveAspectRatio="none". The latter is necessary due to the fact that we don’t know the exact dimensions of text that will be entered into the bubble, and we want the vector shape to stretch around whatever size it takes up.

请注意，删除了SVG上的width和height属性，并添加了preserveAspectRatio="none" 。 后者是必需的，因为我们不知道将要输入到气泡中的文本的确切尺寸，并且我们希望矢量形状能够围绕它占用的任何大小进行拉伸。

The SVG is styled to help with this goal:

SVG旨在帮助实现此目标：

path { 
    fill: #fff;
    stroke: #111;
    stroke-width: 2;
    stroke-linejoin: bevel;
    vector-effect: non-scaling-stroke;
}

The stroke-linejoin: bevel is used to tighten the point on the tail of the speech bubble, while vector-effect: non-scaling-stroke means that the stroke will not resize with the SVG, keeping it’s thickness constant.

stroke-linejoin: bevel用于收紧语音气泡尾巴上的点，而vector-effect: non-scaling-stroke表示该笔触不会随着SVG调整大小，保持其厚度不变。

使用方法 (Method of Use)

I’ll use a <blockquote> element to contain the text:

我将使用<blockquote>元素包含文本：

<blockquote class="bubble">
	<p>Did someone say <em>chimichangas?</em>
</blockquote>

Applying and scaling the SVG speech bubble is accomplished using the following CSS:

SVG语音气泡的应用和缩放通过以下CSS完成：

blockquote.bubble { 
    background: url(speech-bubble.svg); 
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 25%;
    text-align: center;
    height: 0;
    padding-top: 6%;
    padding-bottom: 20%;
    box-sizing: content-box;
    line-height: 1;
}

The declaration uses a trick to “open” the height of the element (set to 0) with padding-bottom (and a little padding-top to push the text down), which fits the box of the element.

该声明使用技巧来“ padding-bottom ”元素的height (设置为0 )，并在其padding-bottom (并在padding-top一个小padding-top以向下推动文本)，以适合元素的框。

其他泡泡 (Other Bubbles)

Over almost a century of development, comic book writers and illustrators have created a stylistic convention from various kinds of bubbles for different types of speech and narration:

在近一个世纪的发展中，漫画作家和插画家通过各种气泡为不同类型的演讲和旁白创建了一种风格惯例：

耳语泡泡 (Whisper Bubbles)

Whisper bubbles are particularly easy in SVG, since their dashed outlines work well with stroke-dasharray:

在SVG中，耳语气泡特别容易，因为其虚线轮廓与stroke-dasharray ：

That’s the sound of my brain

那是我的大脑的声音

There are just two issues in this version:

此版本中只有两个问题：

• The fill color of the SVG element must be same as the background: since SVG doesn’t yet have a stroke-position, the dashes will always appear halfway through the outline of the shape; making the fill appear odd against the background unless they are very close in color. (There is a rather complex method around this problem, but I’ll leave that for a future article).

  SVG元素的fill颜色必须与背景相同：由于SVG尚无stroke-position ，因此虚线始终会出现在形状轮廓的中间； 除非颜色非常接近，否则填充在背景下显得奇怪。 (有一个解决此问题的相当复杂的方法，但我将在以后的文章中介绍)。

• Due to the use of vector-effect, the dashed strokes remain the same thickness even at small viewport sizes. This could be altered by using the SVG inline, which would allow the use of media queries to make the stroke thinner.

  由于使用了vector-effect ，即使在较小的视口尺寸下，虚线笔触也保持相同的厚度。 这可以通过使用SVG内联进行更改，这将允许使用媒体查询来使笔触变薄。

无线电气泡 (Radio bubbles)

Autobots,Attack!

汽车人， 进攻！

Radio speech bubbles - sometimes referred to as “electric” bubbles - are used for transmitted or electronic dialogue. Aside from their paths being more complex, the only other significant change here is altering the stroke-linejoin value:

无线电气泡(有时称为“电”气泡)用于传输或电子对话。 除了它们的路径更复杂之外，这里唯一的其他重要更改是更改了stroke-linejoin值：

path {
    stroke-linejoin: miter;
}

…which is used to make the outline of the speech bubble “spikier”.

…用来使对话气泡的轮廓变得“尖刻”。

If you’d like to learn more about comic book lettering and speech bubbles, Nate Piekos has an excellent resource on his Blambot site.

如果您想了解更多有关漫画书字样和对话气泡的信息， Nate Piekos在其Blambot网站上提供了很好的资源。

使气泡文本响应 (Making The Bubble Text Responsive)

The easiest way to scale the text inside the bubble is to scale it using vw units:

缩放气泡内文本的最简单方法是使用vw单位缩放文本：

blockquote.bubble { 
    font-size: 2.2vw;
}

If the speech bubble was set in any kind of max-width container, you’d have to write an @media query to provide a clamp for the text at the top end.

如果气泡是在任何一种max-width容器中设置的，则必须编写一个@media查询以提供对顶端文本的限制。

翻译自: https://thenewcode.com/443/Making-Comic-Book-Speech-Bubbles-with-SVG