{"id":162321,"date":"2012-12-12T12:42:03","date_gmt":"2012-12-12T08:42:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=162321"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=162321","title":{"rendered":"Tooltip \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c SVG<\/span>"},"content":{"rendered":"
\t\t\t\u0414\u0435\u043d\u044c \u0434\u043e\u0431\u0440\u044b\u0439,
\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0442\u044b\u0441\u044f\u0447\u0430 \u0438 \u043e\u0434\u0438\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0443\u043b\u0442\u0438\u043f\u043e\u0432. \u0427\u0435\u0440\u0435\u0437 css3<\/a>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f js \u0438 jquery<\/a>, \u0438\u043b\u0438 \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0442\u0443\u043b\u0442\u0438\u043f\u044b<\/a>. \u0410 \u0432\u043e\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440<\/a> \u044d\u0442\u0438\u0445 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u0441\u043e \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043a\u0430\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u0432\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0441\u0435\u0432\u0434\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u041d\u0430 \u0432\u0430\u0448\u0435 \u043e\u0431\u043e\u0437\u0440\u0435\u043d\u0438\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0442\u0443\u043b\u0442\u0438\u043f\u043e\u0432, \u043d\u043e \u0443\u0436\u0435 \u0432 SVG. \u0418\u0442\u0430\u043a \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0438\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f\u043c\u0438<\/s> \u043c\u044b\u0441\u043b\u044f\u043c\u0438 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u0434\u0435\u043b\u0443.
<\/a>
SVG, \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u043e\u0439, \u043f\u043b\u043e\u0445\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0435\u043c\u0435\u0439\u0441\u0442\u0432\u043e IE, \u0447\u0442\u043e \u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u044c\u044e, \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043f\u043e\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>. <\/p>\n

\u0415\u0441\u0442\u044c \u0442\u0430\u043a\u0430\u044f \u043a\u0440\u0443\u0442\u0430\u044f \u0448\u0442\u0443\u043a\u0430 \u043a\u0430\u043a svg editor<\/a>, \u043d\u0435 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0449\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0430\u044f \u0432 \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 JS, HTML, SVG, CSS. \u0410 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u043a\u0443\u0441\u043d\u043e\u0433\u043e. <\/p>\n

\u0418\u0442\u0430\u043a \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0442\u0443\u043b\u0442\u0438\u043f\u0430\u043c. <\/p>\n

\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0435\u0440\u0432\u044b\u0439<\/h5>\n

\u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043d\u0435 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0430\u043b\u0443\u043d\u044b, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0442\u0440\u0435\u043c\u044f \u043a\u043b\u0438\u043a\u0430\u043c\u0438, \u0447\u0443\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0441 \u0442\u0435\u043d\u044c\u044e, \u043d\u043e \u043d\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e. \u0422\u0435, \u0447\u0442\u043e \u0441 \u0442\u0435\u043d\u044c\u044e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441 \u0441\u043e\u0431\u043e\u0439 \u0434\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u0442\u043e \u0447\u0442\u043e \u043d\u0430 \u0437\u0430\u0434\u043d\u0435\u043c \u043f\u043b\u0430\u043d\u0435 \u043a\u043b\u043e\u043d \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435\u043c.<\/p>\n

<\/p>\n

\u043a\u043e\u0434<\/b><\/p>\n
\n
<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>\u0421\u043b\u043e\u0439 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>\u0421\u043b\u043e\u0439 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>\u200b <\/code><\/pre>\n<\/p><\/div>\n<\/div>\n
  demo<\/a><\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0432\u0442\u043e\u0440\u043e\u0439, \u0443\u0441\u043b\u043e\u0436\u043d\u0451\u043d\u043d\u044b\u0439<\/h4>\n
  \u0414\u0432\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0431\u0430\u043b\u0443\u043d\u0430, \u0441 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u0442\u0430, \u0431\u043e\u0440\u0434\u0435\u0440 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430, \u0442\u0435\u043d\u0438 (\u043f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043d\u0430 \u0437\u0430\u0434\u043d\u0438\u0439 \u043f\u043b\u0430\u043d, + \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435 \u043d\u0430 \u0435\u0434\u0438\u043d\u0438\u0446\u0443 )
    <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
<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>\u0421\u043b\u043e\u0439 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>\u200b <\/code><\/pre>\n
  <\/div>\n<\/div>\n
  demo<\/a><\/p>\n
\u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0440\u0435\u0442\u0438\u0439<\/h4>\n
  \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0434\u0432\u0430 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0431\u0430\u043b\u0443\u043d\u0430 \u0432\u043a\u0443\u043f\u0435 \u0441 css.
    <\/p>\n
\u041a\u043e\u0434<\/b><\/p>\n
\n
<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>\u0422\u0443\u043b\u0442\u0438\u043f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0432\u0430<\/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;">\u0422\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442<\/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>\u0422\u0443\u043b\u0442\u0438\u043f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0440\u0430\u0437<\/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;">\u0422\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442, \u0442\u0435\u043a\u0441\u0442<\/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>\u0421\u043b\u043e\u0439 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> \u200b <\/code><\/pre>\n
  <\/div>\n<\/div>\n
  \u0430 \u0432\u043e\u0442 \u043a\u043e\u0434 css:<\/p>\n
css<\/b><\/p>\n
\n
.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; } \u200b <\/code><\/pre>\n
  <\/div>\n<\/div>\n
  demo<\/a><\/p>\n
  \u0418\u0442\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u0438\u043c\u0435\u0435\u043c:  <\/p>\n