- PVSM.RU - https://www.pvsm.ru -

Tooltip посредством SVG

День добрый,
На момент написания поста существуют тысяча и один способ создания тултипов. Через css3 [1], используя js и jquery [2], или к примеру анимированные тултипы [3]. А вот вообще генератор [4] этих прямоугольников со стрелочками через всевозможные псевдо элементы. На ваше обозрение хотелось бы предложить ещё один подход к созданию тултипов, но уже в SVG. Итак с новыми извращениями мыслями приступаем к делу.

SVG, как таковой, плохо понимает семейство IE, что бы решить проблемы с кроссбраузерностью, был написан пост, который можно прочитать здесь [5].

Есть такая крутая штука как svg editor [6], не тривиальная вещь, использующая в своей работе JS, HTML, SVG, CSS. А в последней версии которой реализовано очень много вкусного.

Итак перейдем к тултипам.

Пример первый

На первый взгляд не тривиальные балуны, но на самом деле создаются они тремя кликами, чуть сложнее с тенью, но не намного. Те, что с тенью представляют с собой два объекта, то что на заднем плане клон первого с небольшим размытием.

Tooltip посредством SVG

код

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_2">
   <stop stop-color="#2b2b2b" offset="0"/>
   <stop stop-color="#a3a3a3" offset="1"/>
  </linearGradient>
  <filter id="svg_3_blur">
   <feGaussianBlur stdDeviation="1" in="SourceGraphic"/>
  </filter>
  <filter id="svg_7_blur">
   <feGaussianBlur stdDeviation="1" in="SourceGraphic"/>
  </filter>
 </defs>
 <g>
  <title>Слой 1</title>
  <path filter="url(#svg_3_blur)" id="svg_3" d="m205.5,6.5l0,150l-140,0l-45,50l20,-50l-35,0l0,-150l200,0z" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/>
  <path id="svg_1" d="m202.5,2.5l0,150l-140,0l-45,50l20,-50l-35,0l0,-150l200,0z" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/>
 </g>
 <g>
  <title>Слой 2</title>
  <path filter="url(#svg_7_blur)" id="svg_7" d="m296.91864,337.6908l-31.93365,1.75967l-8.54471,42.94473l-28.24948,-10.37997l-40.97134,32.94879l-15.60017,-19.22943l-131.38384,82.24933l73.00109,-91.72491l-60.63728,-11.91797l18.97343,-17.74603l-41.62931,-32.55728l29.91727,-7.87863l-9.40605,-42.86328l31.36139,4.49747l25.80284,-39.55603l22.8499,15.43948l52.82199,-23.69279l7.08209,21.47713l63.06906,-0.30273l-10.93362,20.69568l53.29218,23.1875l-25.47705,13.34485l26.59528,39.30444z" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/>
  <path id="svg_5" d="m229.99786,28.57198l0,0c0,-14.29139 11.31085,-25.87151 25.26352,-25.87151l11.48346,0l0,0l55.12051,0l103.35101,0c6.70038,0 13.12628,2.72472 17.86407,7.574c4.73792,4.8559 7.3996,11.43169 7.3996,18.29751l0,64.67191l0,0l0,38.80714l0,0c0,14.28462 -11.31085,25.87146 -25.26367,25.87146l-103.35101,0l-72.00818,65.77798l16.88766,-65.77798l-11.48346,0c-13.95267,0 -25.26352,-11.58684 -25.26352,-25.87146l0,0l0,-38.80714l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/>
  <path id="svg_6" d="m290.91864,335.6908l-31.93365,1.75967l-8.54471,42.94473l-28.24948,-10.37997l-40.97134,32.94879l-15.60017,-19.22943l-131.38384,82.24933l73.00109,-91.72491l-60.63728,-11.91797l18.97343,-17.74603l-41.62931,-32.55728l29.91727,-7.87863l-9.40605,-42.86328l31.36139,4.49747l25.80284,-39.55603l22.84991,15.43947l52.82198,-23.69278l7.08209,21.47714l63.06906,-0.30273l-10.93362,20.69566l53.29218,23.1875l-25.47705,13.34485l26.59528,39.30444z" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/>
  <path id="svg_8" d="m368.62555,420.61554c0,-1.45065 1.75122,-2.62485 3.91336,-2.62485c2.15677,0 3.90829,1.17419 3.90829,2.62485c0,1.45062 -1.75153,2.62457 -3.90829,2.62457c-2.16214,0 -3.91336,-1.17395 -3.91336,-2.62457zm8.0173,-18.85013c0,-3.62662 4.37112,-6.56174 9.77332,-6.56174c5.39728,0 9.77344,2.93512 9.77344,6.56174c0,3.62225 -4.37616,6.55692 -9.77344,6.55692c-5.40219,0 -9.77332,-2.93466 -9.77332,-6.55692zm18.56833,-28.58026c0,-10.02161 15.2233,-18.13901 34.01114,-18.13901c18.79276,0 34.01111,8.1174 34.01111,18.13901c0,10.01663 -15.21835,18.134 -34.01111,18.134c-18.78784,0 -34.01114,-8.11737 -34.01114,-18.134zm-29.19119,-82.10022c0,-43.19751 52.13574,-78.18681 116.50241,-78.18681c64.36176,0 116.49762,34.9893 116.49762,78.18681c0,43.19745 -52.13586,78.18692 -116.49762,78.18692c-64.36667,0 -116.50241,-34.98947 -116.50241,-78.18692z" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/>
 </g>
</svg>​

demo [7]

Пример второй, усложнённый

Два стандартных балуна, с наложением градиета, бордер градиента, тени (продублирован элемент, выставлен на задний план, + поставлено размытие на единицу )
Tooltip посредством SVG

Код

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_2">
   <stop stop-color="#000000" offset="0"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <linearGradient y2="1" x2="0" y1="0" x1="1" id="svg_3">
   <stop stop-color="#000000" offset="0"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <linearGradient y2="1" x2="0" y1="0" x1="1" id="svg_4">
   <stop stop-color="#000000" offset="0"/>
   <stop stop-color="#c6c6c6" offset="1"/>
  </linearGradient>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_5">
   <stop stop-color="#13470c" offset="0"/>
   <stop stop-color="#ffff00" offset="1"/>
  </linearGradient>
  <linearGradient y2="1" x2="0" y1="0" x1="1" id="svg_6">
   <stop stop-color="#13470c" offset="0"/>
   <stop stop-color="#ffff00" offset="1"/>
  </linearGradient>
  <linearGradient y2="0" x2="1" y1="1" x1="0" id="svg_8">
   <stop stop-color="#000000" offset="0"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <linearGradient y2="0" x2="1" y1="1" x1="0" id="svg_9">
   <stop stop-color="#2d2d2d" offset="0"/>
   <stop stop-color="#ffffff" offset="1"/>
  </linearGradient>
  <filter id="svg_11_blur">
   <feGaussianBlur stdDeviation="1" in="SourceGraphic"/>
  </filter>
  <filter id="svg_12_blur">
   <feGaussianBlur stdDeviation="1" in="SourceGraphic"/>
  </filter>
 </defs>
 <g>
  <title>Слой 1</title>
  <path filter="url(#svg_12_blur)" id="svg_12" stroke-opacity="0.99" d="m92.20741,80.14999c-4.92593,0 -8.89241,3.9664 -8.89241,8.8923l0,118.83849c0,4.9259 3.96648,8.89604 8.89241,8.89604l39.74147,0c-1.64343,1.87819 -2.55142,3.9185 -2.55142,6.06161c0,9.15715 16.46146,16.57161 36.7825,16.57161c20.32091,0 36.7822,-7.41446 36.7822,-16.57161c0,-2.14311 -0.90796,-4.18343 -2.55112,-6.06161l114.92337,0c4.92578,0 8.89227,-3.97014 8.89227,-8.89604l0,-118.83849c0,-4.9259 -3.96649,-8.8923 -8.89227,-8.8923l-223.127,0zm43.65637,160.87736c-11.16757,0 -20.21092,4.3414 -20.21092,9.70087c0,5.36008 9.04335,9.70474 20.21092,9.70474c11.16402,0 20.21086,-4.34467 20.21086,-9.70474c0,-5.35947 -9.04684,-9.70087 -20.21086,-9.70087zm-20.21092,24.25433c-6.25627,0 -11.31822,3.2536 -11.31822,7.27502c0,4.02148 5.06195,7.27502 11.31822,7.27502c6.25278,0 11.31874,-3.25354 11.31874,-7.27502c0,-4.02142 -5.06596,-7.27502 -11.31874,-7.27502zm-19.40176,17.78473c-4.0215,0 -7.27506,1.80859 -7.27506,4.04343c0,2.23126 3.25356,4.04016 7.27506,4.04016c4.01797,0 7.27451,-1.8089 7.27451,-4.04016c0,-2.23483 -3.25655,-4.04343 -7.27451,-4.04343z" stroke-width="2" stroke="url(#svg_3)" fill="url(#svg_6)"/>
  <path filter="url(#svg_11_blur)" id="svg_11" d="m372.14999,80.1502l34.39606,0l0,0l51.58783,0l120.37991,0l0,80.24705l0,0l0,34.39604l0,22.92863l-120.37991,0l-85.65231,67.42828l34.06448,-67.42828l-34.39606,0l0,-22.92863l0,-34.39604l0,0l0,-80.24705z" stroke-opacity="0.99" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="url(#svg_9)" fill="url(#svg_6)"/>
  <path stroke-opacity="0.99" id="svg_1" d="m89.20741,76.14999c-4.92593,0 -8.89241,3.9664 -8.89241,8.8923l0,118.83849c0,4.9259 3.96648,8.89604 8.89241,8.89604l39.74147,0c-1.64345,1.87819 -2.55144,3.9185 -2.55144,6.06161c0,9.15715 16.46147,16.57161 36.78252,16.57161c20.32091,0 36.7822,-7.41446 36.7822,-16.57161c0,-2.14311 -0.90796,-4.18343 -2.55112,-6.06161l114.92337,0c4.92578,0 8.89227,-3.97014 8.89227,-8.89604l0,-118.83849c0,-4.9259 -3.96649,-8.8923 -8.89227,-8.8923l-223.127,0zm43.65637,160.87734c-11.16757,0 -20.21092,4.34142 -20.21092,9.7009c0,5.36005 9.04335,9.70473 20.21092,9.70473c11.16402,0 20.21086,-4.34468 20.21086,-9.70473c0,-5.35948 -9.04684,-9.7009 -20.21086,-9.7009zm-20.21092,24.25435c-6.25627,0 -11.31822,3.2536 -11.31822,7.27502c0,4.02148 5.06195,7.27502 11.31822,7.27502c6.25278,0 11.31874,-3.25354 11.31874,-7.27502c0,-4.02142 -5.06596,-7.27502 -11.31874,-7.27502zm-19.40175,17.78473c-4.0215,0 -7.27507,1.80859 -7.27507,4.04343c0,2.23126 3.25357,4.04016 7.27507,4.04016c4.01796,0 7.27451,-1.8089 7.27451,-4.04016c0,-2.23483 -3.25655,-4.04343 -7.27451,-4.04343z" stroke-width="2" stroke="url(#svg_3)" fill="url(#svg_6)"/>
  <path id="svg_7" d="m369.14999,77.1502l34.39606,0l0,0l51.58783,0l120.37991,0l0,80.24705l0,0l0,34.39604l0,22.92863l-120.37991,0l-85.65231,67.42828l34.06448,-67.42828l-34.39606,0l0,-22.92863l0,-34.39604l0,0l0,-80.24705z" stroke-opacity="0.99" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="url(#svg_9)" fill="url(#svg_6)"/>
  <path id="svg_10" d="m1,1l0.16667,0l0,0l0.25,0l0.58333,0l0,0.38889l0,0l0,0.16667l0,0.11111l-0.58333,0l-0.41505,0.32676l0.16505,-0.32676l-0.16667,0l0,-0.11111l0,-0.16667l0,0z" stroke-opacity="0.99" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="url(#svg_9)" fill="url(#svg_6)"/>
 </g>
</svg>​

demo [8]

Пример третий

В последним примере использовалось два простых балуна вкупе с css.
Tooltip посредством SVG

Код

<div class="cont">
    <div class="svgshnik">
        <svg width="316" height="170" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
  <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <filter id="svg_5_blur">
   <feGaussianBlur stdDeviation="1"/>
  </filter>
 </defs>
 <g>
  <title>Тултип, например, два</title>
  <g filter="url(#svg_5_blur)" opacity="0.75" id="svg_5">
   <rect id="svg_1" height="150" width="311" y="2.33333" x="3.33333" stroke="#000000" fill="#606060"/>
   <path id="svg_3" d="m135.45831,152.33334l8.03149,16l8.09351,-16l-16.125,0z" stroke="#000000" fill="#606060"/>
   <path id="svg_4" d="m135.58331,149.95834l8.03149,16l8.09351,-16l-16.125,0z" stroke="#606060" fill="#606060"/>
  </g>
  <g id="svg_6">
   <rect id="svg_7" height="150" width="311" y="2" x="1.66667" stroke="#000000" fill="#606060"/>
   <path id="svg_8" d="m133.79138,151.99979l8.03149,16l8.09351,-16l-16.125,0z" stroke="#000000" fill="#606060"/>
   <path id="svg_9" d="m133.91638,149.62479l8.03149,16l8.09351,-16l-16.125,0z" stroke="#606060" fill="#606060"/>
  </g>
 </g>
</svg>
</div>
<div class="trash" style="top:0px;left:0px;">Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст</div>
</div>
<div class="cont">
<div class="svgshnik" style="top:200px">
<svg width="335" height="170" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <filter id="svg_21_blur">
   <feGaussianBlur stdDeviation="1" in="SourceGraphic"/>
  </filter>
 </defs>
 <g>
  <title>Тултип, например, раз</title>
  <g filter="url(#svg_21_blur)" id="svg_21">
   <rect id="svg_17" height="150" width="311" y="3.09639" x="3.76306" stroke="#000000" fill="#606060"/>
   <g id="svg_18" transform="rotate(-90 320.5188293457032,25.477945327758764) ">
    <path id="svg_19" d="m312.39383,20.00549l8.03149,12.85272l8.09351,-12.85272l-16.125,0z" stroke="#000000" fill="#606060"/>
    <path id="svg_20" d="m312.51883,18.09768l8.03149,12.85271l8.09351,-12.85271l-16.125,0z" stroke="#606060" fill="#606060"/>
   </g>
  </g>
  <g id="svg_22">
   <rect id="svg_23" height="150" width="311" y="2.09639" x="1.76306" stroke="#000000" fill="#606060"/>
   <g id="svg_24" transform="rotate(-90 318.5188293457032,24.4779357910156) ">
    <path id="svg_25" d="m310.39383,19.00549l8.03149,12.85271l8.09354,-12.85271l-16.12503,0z" stroke="#000000" fill="#606060"/>
    <path id="svg_26" d="m310.51883,17.09768l8.03149,12.85271l8.09354,-12.85271l-16.12503,0z" stroke="#606060" fill="#606060"/>
   </g>
  </g>
 </g>
</svg>
</div>
<div class="trash" style="top:200px; left:0px;">Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст, текст</div>
</div>


 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_2">
   <stop stop-color="#2b2b2b" offset="0"/>
   <stop stop-color="#a3a3a3" offset="1"/>
  </linearGradient>
  <filter id="svg_3_blur">
   <feGaussianBlur stdDeviation="1" in="SourceGraphic"/>
  </filter>
 </defs>
 <g>
  <title>Слой 1</title>
  <path filter="url(#svg_3_blur)" id="svg_3" d="m205.5,6.5l0,150l-140,0l-45,50l20,-50l-35,0l0,-150l200,0z" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/>
  <path id="svg_1" d="m202.5,2.5l0,150l-140,0l-45,50l20,-50l-35,0l0,-150l200,0z" stroke-width="2" stroke="#000000" fill="url(#svg_2)"/>
 </g>
​

а вот код css:

css

.cont{
    position:relative;
    top:0px;
    left:0px;        
}
.svgshnik{
    position: absolute;
    top:0px;
    left:0px;
    z-index:10;

}
.trash{
    position:absolute;
    padding:5px 0 0 5px;
    z-index:15;
    width:300px;
    color:white;
}
​

demo [9]

Итак что мы имеем:

  • Online SVG editor [6], который может помочь нам
  • Tooltips в векторе, которым всё равно на проблемы с масштабируемостью
  • Чувство удовлетворённости от проделанной работы

Подводя итоги хочется сказать, что тултипы в SVG далеко не панацея, а лишь один из вариантов, который тоже имеет место жить.

Автор: ChieF_Of_ReD

Источник [10]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/svg/22440

Ссылки в тексте:

[1] css3: http://habrahabr.ru/post/136061/

[2] js и jquery: http://jquery.bassistance.de/tooltip/demo/

[3] анимированные тултипы: http://habrahabr.ru/post/137412/

[4] вот вообще генератор: http://cssarrowplease.com/

[5] здесь: http://habrahabr.ru/post/159947/

[6] svg editor: http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html

[7] demo: http://jsfiddle.net/LkT6v/

[8] demo: http://jsfiddle.net/LhZBh/

[9] demo: http://jsfiddle.net/VasVU/

[10] Источник: http://habrahabr.ru/post/162321/