В SVG не сложно создать облачко для слов или мыслей. В простейших случаях достаточно элемента Ellipse. Рассмотрим более сложные случаи. Для стандартного вида облачка в комиксах хорошо подойдёт path.
Сохраним в отдельном SVG-файле:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 132 136">
<defs>
<style>
path {
fill: white;
stroke: #000;
stroke-width: 4;
stroke-linejoin: bevel;
vector-effect: non-scaling-stroke;
}
</style>
</defs>
<path d="M66.1 1.5C30.4 1.5 1.5 22.9 1.5 46c0 18.1 17.9 33.5 42.8 39.3 1.5 14.8-1.3 39-8.5 48.1 10.8-12.5 22.4-33.6 26.6-45.7 1.2 0 2.5.1 3.7.1 35.7 0 64.6-18.7 64.6-41.8S101.8 1.5 66.1 1.5zM35.8 133.4c-.3.4-.7.8-1 1.1.4-.3.7-.7 1-1.1z"/></svg>
Мы не используем атрибуты ширины и высоты, но добавляем атрибут preserveAspectRatio="none". Мы не знаем ширину текста, который будет в облачке и нам нужно растянуть фигуру, чтобы он полностью захватывал текст.
В стилях у SVG мы задаёт нужные параметры у контура. Свойство vector-effect: non-scaling-stroke позволяет сохранить толщину контура при изменении размеров.
Зададим текст в элементе blockquote.
<blockquote class="speech bubble">Кто сказал <em>мяу?</em></blockquote>
Применим к тексту свойства CSS:
blockquote.bubble {
background: url(speech.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;
}
Мы задаём нулевую высоту (height: 0), а также делаем отступы (padding-bottom: 20%) и (padding-top: 6%).
Пример
Кто сказал мяу?
Другой случай, когда облачко нужно отобразить в виде пунктира - мысли и речь шёпотом.
Здесь тот же технический приём, только используется свойство stroke-dasharray: 20,10.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 500" preserveAspectRatio="none">
<defs>
<style>
path {
fill: white;
stroke: #ccc;
stroke-width: 4;
stroke-linejoin: bevel;
stroke-dasharray: 20,10;
vector-effect: non-scaling-stroke;
}
</style>
</defs>
<path d="M372.8,14.3c-196.9,0-356.2,84.9-356.2,176.6c0,71.8,98.7,132.9,236,156C260.8,405.6,269,439,312,471c-22-49-30-78-13-118 c6.6,0,66.6,3.3,73.8,3.3c196.9,0,356.2-74.2,356.2-165.9S569.7,14.3,372.8,14.3z"/>
</svg>
Присоединяем к тексту.
blockquote.whisper {
background: url(whisper.svg);
width: 25%;
font-size: 2vw;
color: #ccc;
font-style: italic;
padding: 6% 5% 15%;
}
Свойство fill у SVG должен совпадать с фоном страницы, чтобы смотрелось аккуратнее. Также используем vector-effect: non-scaling-stroke для сохранения толщины контура.
(Мысли кота) Надо захватить мир!
Третий вид облачка, используемого в комиксах, имеет сложный узор с применением стиля stroke-linejoin: miter.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 150" preserveAspectRatio="none">
<defs>
<style>
path {
fill: white;
stroke: #231F20;
stroke-width: 4;
stroke-linejoin: miter;
vector-effect: non-scaling-stroke;
}
</style>
</defs>
<path d="M32.7,18.3c11,5,33.3,3.3,37-11.3 c11.7,8.7,40,11.3,54.7,0c7.3,10,36.7,13.3,46,0c0.3,8,29,16.7,39.3,11.7C202.3,27,212,40.7,229,42c-11.7,6-7.7,28.3,0,32.7 c-11,1-14.3,12.3-14.3,12.3l34.7,25.3l-12.7,2.3l36.7,21l-52.9-12.6l6.2-6.4l-28.3-16.3c0,0-14.7,14-14.3,19.3 c-10-5-36,3.7-44.3,13.3c-9.7-13.7-40.3-12.7-56-2c-7-10.3-37.7-11.7-48.7-10.7c7.2-9.7-9.3-31.7-27-35c14-5,19.7-34.3,6.7-40.7 C30.3,43.3,39.7,28,32.7,18.3z"/>
</svg>
Коты, в атаку!
Для удобного управления размером текста в облачках, используйте единицы vm:
blockquote.bubble {
font-size: 2.2vw;
}
Источник: the new code – Making Comic Book Speech Bubbles with SVG
Blambot Comic Fonts & Lettering - виды облачков в комиксах.
Вернуться в раздел SVG