Первый мой ответ был опубликован до объявления конкурса и не совсем выполнял его условия. Поэтому публикую новый ответ.
Если я правильно понял задачу, то необходимо было выполнить следующие условия:
- Вёрстка должна быть полностью адаптивна
Вырезы на тултипе должны быть прозрачны
Тултип должен растягиваться по горизонтали в зависимости от длины
текста в тултипе и по вертикали (желательно), если строчек больше одной.
Пример ниже полностью адаптивен: блоки, тултипы, текст.
Проверена работоспособность в IE11, Firefox, Chrome, Opera
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Вывод Tooltip</title>
<style>
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%;
margin:1.66%;
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
.img_1-1{background-image:url('https://i.stack.imgur.com/S8q6Z.jpg');}
.img_1-2{background-image:url('https://i.stack.imgur.com/Ox8J2.jpg');}
.img_1-3{background-image:url('https://i.stack.imgur.com/zdZU0.jpg');}
svg path
{
fill:inherit;
}
#svg1
{
fill:yellow;
}
.container
{
width:80%;
height:auto;
margin:0px;
padding:0px;
position:relative;
clear:both;
}
</style>
</head>
<body>
<div class="square img_1-1">
<div class="container">
<svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="-100 -100 480 240" >
<g transform="scale(1.4 1.2)">
<use xlink:href="#tooltip" x="0%" y="3%" fill="yellow" opacity="0.9" > </use>
<text font-size="24" x="30" y="57" fill="dodgerblue">Морж</text>
</g>
</svg>
</div>
</div>
<div class="square img_1-2">
<div class="container">
<svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="5 0 240 240" >
<g transform="scale(2.2 0.75)">
<use xlink:href="#tooltip" x="0%" y="3%" fill="dodgerblue" opacity="0.8" > </use>
</g>
<text font-size="16" font-family="serif" x="45" y="45" fill="white">Харьковский дельфинарий</text>
</svg>
</div>
</div>
<div class="square img_1-3">
<div class="container">
<svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="-60 -45 240 240" >
<g transform="scale(1.5 1.5)">
<use xlink:href="#tooltip" x="3%" y="3%" fill="crimson" opacity="0.6" > </use>
<text font-size="16" x="30" y="40" fill="white">Дельфины
<tspan dx="-45" dy="20"> и </tspan>
<tspan dx="-20" dy="15"> мяч</tspan>
</text>
</g>
</svg>
</div>
</div>
<div class="container">
<svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="-100 -100 480 240">
<defs>
<g id="tooltip" transform="scale(1 1)">
<path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="stroke-linecap:round;stroke-linejoin:round; "/>
</g>
</defs>
</svg>
</div>
</body>
</html>
Масштабирование тултипа осуществляется командой - transform="scale(2.2 0.75)", где первая цифра это увеличение по горизонтали, вторая уменьшение высоты. Это пример для однострочного тултипа на второй картинке (Харьковский дельфинарий)
Важный атрибут viewBox выполняет сразу несколько задач:
Адаптивность svg изображения
Обязательным условием для выполнения этого является,- либо отсутствие viewport в шапке svg файла, либо задание высоты и ширины окна просмотра браузера в процентах.
Если не указан viewport то значения по умолчанию - width="100%" и height="100%" от размеров окна браузера.
Параметры viewBox="5 0 240 240" (не путать с viewport)
Первые две цифры отвечают за смещение svg изображения по осям X, Y
3,4 цифры отвечают за масштабирование изображения внутри viewport
При изменении этих параметров необходимо помнить, что:
У viewBox всё наоборот.
Поэтому, если вправо перемещаем viewBox - min-x > 0, то изображение сдвигается влево. Подробнее тут и тут.
Если увеличиваем viewBox, то изображение уменьшается.
Это всё применяется для позиционирования и масштабирования тултипа.
Клонирование тултипа
Для этого применяется команда use
<use xlink:href="#tooltip" x="0%" y="3%" fill="dodgerblue" opacity="0.8" > </use>
Как видно в этой команде делается дополнительной позиционирование тултипа по вертикали и горизонтали.
Цифры только в процентах, иначе svg не будет масштабироваться!
Чтобы осуществить стилизацию клонов тултипа из внутренней или из внешней таблицы стилей необходимо применить принудительное наследование
svg path
{
fill:inherit;
}
А в самом path заполнение fill обязательно удалить!
Перенос текста
В SVG нет автоматического переноса текста, как в html
Поэтому приходится использовать тег <tspan>
<text font-size="16" x="30" y="40" fill="white">Дельфины
<tspan dx="-45" dy="20"> и </tspan>
<tspan dx="-20" dy="15"> мяч</tspan>
</text>
Но думаю это не критично, так как размещение и заполнение тултипа делается при вёрстке Html.
