Svg tooltip
Good afternoon,
At the time of writing, there are a thousand and one ways to create tooltips. Via css3 , using js and jquery , or for example animated tooltips . But in general, the generator of these rectangles with arrows through all sorts of pseudo elements. For your review I would like to suggest another approach to creating tooltips, but now in SVG. So with newperversions of thoughts we get down to business.
SVG, as such, poorly understands the IE family to solve problems with cross-browser compatibility, a post was written that can be read here .
There is such a cool thing as svg editor , not a trivial thing that uses JS, HTML, SVG, CSS in its work. And the latest version of which sold a lot of tasty.
So go to the tooltips.
')
At first glance, they are not trivial baluns, but in fact they are created with three clicks, a bit more complicated with a shadow, but not much. Those with a shadow represent two objects with them, then that in the background is a clone of the first with a slight blur.
demo
Two standard baluns, with gradient overlay, border gradient, shadows (element duplicated, backed up, + blur is set to one)
demo
In the last example, two simple baluns were used along with css.
and here is the css code:
demo
So what we have:
Summing up, I would like to say that the tooltips in SVG are far from a panacea, but only one of the options, which also has a place to live.
At the time of writing, there are a thousand and one ways to create tooltips. Via css3 , using js and jquery , or for example animated tooltips . But in general, the generator of these rectangles with arrows through all sorts of pseudo elements. For your review I would like to suggest another approach to creating tooltips, but now in SVG. So with new
SVG, as such, poorly understands the IE family to solve problems with cross-browser compatibility, a post was written that can be read here .
There is such a cool thing as svg editor , not a trivial thing that uses JS, HTML, SVG, CSS in its work. And the latest version of which sold a lot of tasty.
So go to the tooltips.
')
Example one
At first glance, they are not trivial baluns, but in fact they are created with three clicks, a bit more complicated with a shadow, but not much. Those with a shadow represent two objects with them, then that in the background is a clone of the first with a slight blur.
code
<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
Example Two, Complicated
Two standard baluns, with gradient overlay, border gradient, shadows (element duplicated, backed up, + blur is set to one)
Code
<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> -3.97014 8.89227, -8.89604l0, -118.83849c0, -4.9259 -3.96649, -8.8923 -8.89227, -8.8923l-223.127,0zm43. <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
Example three
In the last example, two simple baluns were used along with css.
Code
<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> and here is the css code:
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
So what we have:
- Online SVG editor that can help us
- Vector tooltips that don't care about scalability issues
- Feeling of satisfaction from the work done
Summing up, I would like to say that the tooltips in SVG are far from a panacea, but only one of the options, which also has a place to live.
Source: https://habr.com/ru/post/162321/
All Articles