Белая граница у тени в svg

198

16 марта 2018, 11:56

Проблема в отображении тени.

Как видно из примеров ниже, появляются белые места.

.container, 
.svg { 
  width: 128px; 
  height: 128px; 
} 
 
.svg { 
  box-shadow: rgb(0, 0, 0) 0px 0px 8px 13px; 
}

<div class="container"> 
  <svg class="svg" style="border-radius: 7%;"> 
   <rect  x="6.4" y="6.4" width="115.2" height="115.2"  style="stroke: rgb(0, 0, 0); fill: none; stroke-alignment: inside; stroke-width: 12.8" rx="7%" ry="7%"></rect> 
    <g transform="scale(0.6) translate(42.66666666666667, 42.66666666666667)"><style> #svg22 path, #svg22 circle, #svg22 polygon, #svg22 rect { fill: rgb(0, 0, 0) } #svg22 defs &gt; path { fill: none }  #svg22 path[fill="none"], #svg22 circle[fill="none"], #svg22 polygon[fill="none"], #svg22 rect[fill="none"] { fill: none } </style><style type="text/css"> #svg22 .st0{fill:rgb(0, 0, 0);} </style><path class="st0" d="M85.78,98.797l-9.157-74.312l1.803-15.536c0.091-0.793-0.161-1.586-0.689-2.181 c-0.531-0.595-1.29-0.934-2.086-0.934H52.35c-0.796,0-1.557,0.339-2.086,0.934c-0.53,0.595-0.78,1.388-0.689,2.181l1.803,15.536 L42.22,98.797c-0.103,0.822,0.167,1.648,0.736,2.254l19.008,20.235c0.528,0.562,1.265,0.879,2.036,0.879s1.508-0.317,2.034-0.879 l19.01-20.235C85.611,100.445,85.883,99.619,85.78,98.797z M72.566,23.098H55.434l-1.517-13.074h20.166L72.566,23.098z"></path></g> 
      </svg> 
</div> 
<br> 
<br> 
<br> 
 
<div class="container"> 
  <svg class="svg" style="border-radius: 50%;"> 
   <rect  x="6.4" y="6.4" width="115.2" height="115.2"  style="stroke: rgb(0, 0, 0); fill: none; stroke-alignment: inside; stroke-width: 12.8" rx="50%" ry="50%"></rect> 
    <g transform="scale(0.6) translate(42.66666666666667, 42.66666666666667)"><style> #svg22 path, #svg22 circle, #svg22 polygon, #svg22 rect { fill: rgb(0, 0, 0) } #svg22 defs &gt; path { fill: none }  #svg22 path[fill="none"], #svg22 circle[fill="none"], #svg22 polygon[fill="none"], #svg22 rect[fill="none"] { fill: none } </style><style type="text/css"> #svg22 .st0{fill:rgb(0, 0, 0);} </style><path class="st0" d="M85.78,98.797l-9.157-74.312l1.803-15.536c0.091-0.793-0.161-1.586-0.689-2.181 c-0.531-0.595-1.29-0.934-2.086-0.934H52.35c-0.796,0-1.557,0.339-2.086,0.934c-0.53,0.595-0.78,1.388-0.689,2.181l1.803,15.536 L42.22,98.797c-0.103,0.822,0.167,1.648,0.736,2.254l19.008,20.235c0.528,0.562,1.265,0.879,2.036,0.879s1.508-0.317,2.034-0.879 l19.01-20.235C85.611,100.445,85.883,99.619,85.78,98.797z M72.566,23.098H55.434l-1.517-13.074h20.166L72.566,23.098z"></path></g> 
      </svg> 
</div>

Пробовал добавить элемент с абсолютным позиционированием, который бы "закрашивал" белые места.

.container, 
.svg { 
  width: 128px; 
  height: 128px; 
} 
.container{ 
  position:relative; 
} 
.svg { 
  box-shadow: rgb(0, 0, 0) 0px 0px 8px 13px; 
} 
 
.border{ 
  position: absolute; 
  top:-1px; 
  left:-1px; 
  right:-1px; 
  bottom:-1px; 
  border:6px solid black; 
  border-radius:7%; 
}

<div class="container"> 
  <div class="border"></div>  
  <svg class="svg" style="border-radius: 7%;"> 
   <rect  x="6.4" y="6.4" width="115.2" height="115.2"  style="stroke: rgb(0, 0, 0); fill: none; stroke-alignment: inside; stroke-width: 12.8" rx="7%" ry="7%"></rect> 
    <g transform="scale(0.6) translate(42.66666666666667, 42.66666666666667)"><style> #svg22 path, #svg22 circle, #svg22 polygon, #svg22 rect { fill: rgb(0, 0, 0) } #svg22 defs &gt; path { fill: none }  #svg22 path[fill="none"], #svg22 circle[fill="none"], #svg22 polygon[fill="none"], #svg22 rect[fill="none"] { fill: none } </style><style type="text/css"> #svg22 .st0{fill:rgb(0, 0, 0);} </style><path class="st0" d="M85.78,98.797l-9.157-74.312l1.803-15.536c0.091-0.793-0.161-1.586-0.689-2.181 c-0.531-0.595-1.29-0.934-2.086-0.934H52.35c-0.796,0-1.557,0.339-2.086,0.934c-0.53,0.595-0.78,1.388-0.689,2.181l1.803,15.536 L42.22,98.797c-0.103,0.822,0.167,1.648,0.736,2.254l19.008,20.235c0.528,0.562,1.265,0.879,2.036,0.879s1.508-0.317,2.034-0.879 l19.01-20.235C85.611,100.445,85.883,99.619,85.78,98.797z M72.566,23.098H55.434l-1.517-13.074h20.166L72.566,23.098z"></path></g> 
      </svg> 
</div>

Проблема в том, что способ не универсальный. Может меняться радиус скругления, размер тени, положение тени. В некоторых случаев элемент .border выходит за границы - вылечить не удалось.

Вторая попытка была закрасить фон у svg.

.container, 
.svg { 
  width: 128px; 
  height: 128px; 
} 
 
.svg { 
  box-shadow: rgb(0, 0, 0) 0px 0px 8px 13px; 
  background: radial-gradient(at center center, rgb(255, 255, 255) 80%, rgba(0, 0, 0, 0) 80%) black; 
}

<div class="container"> 
  <div class="border"></div> 
  <svg class="svg" style="border-radius: 7%;"> 
   <rect  x="6.4" y="6.4" width="115.2" height="115.2"  style="stroke: rgb(0, 0, 0); fill: none; stroke-alignment: inside; stroke-width: 12.8" rx="7%" ry="7%"></rect> 
    <g transform="scale(0.6) translate(42.66666666666667, 42.66666666666667)"><style> #svg22 path, #svg22 circle, #svg22 polygon, #svg22 rect { fill: rgb(0, 0, 0) } #svg22 defs &gt; path { fill: none }  #svg22 path[fill="none"], #svg22 circle[fill="none"], #svg22 polygon[fill="none"], #svg22 rect[fill="none"] { fill: none } </style><style type="text/css"> #svg22 .st0{fill:rgb(0, 0, 0);} </style><path class="st0" d="M85.78,98.797l-9.157-74.312l1.803-15.536c0.091-0.793-0.161-1.586-0.689-2.181 c-0.531-0.595-1.29-0.934-2.086-0.934H52.35c-0.796,0-1.557,0.339-2.086,0.934c-0.53,0.595-0.78,1.388-0.689,2.181l1.803,15.536 L42.22,98.797c-0.103,0.822,0.167,1.648,0.736,2.254l19.008,20.235c0.528,0.562,1.265,0.879,2.036,0.879s1.508-0.317,2.034-0.879 l19.01-20.235C85.611,100.445,85.883,99.619,85.78,98.797z M72.566,23.098H55.434l-1.517-13.074h20.166L72.566,23.098z"></path></g> 
      </svg> 
</div>

Появляется проблема с случаем, когда border-radius: 0. Также проблема с тем, что фон у svg должен быть прозрачным. А в этом случае он закрашивается.

Как можно решить данную проблему?

Answer 1

Попробуйте так: https://jsfiddle.net/hk5t4t8v/318/

    <div class="container">
    <svg viewBox="0 0 128 128"; style="border-radius: 7%; width=128px; 
     height:128px">
    <rect  x="6.4" y="6.4" width="115.2" height="115.2"  style="stroke: rgb(0, 
    0, 0); fill: none; stroke-alignment: inside; stroke-width: 12.8" rx="7%" 
    ry="7%"></rect>
    <g transform="scale(0.6) translate(42.66666666666667, 42.66666666666667)">
    <style> #svg22 path, #svg22 circle, #svg22 polygon, #svg22 rect { fill: 
    rgb(0, 0, 0) } #svg22 defs &gt; path { fill: none }  #svg22 
    path[fill="none"], #svg22 circle[fill="none"], #svg22 polygon[fill="none"], 
    #svg22 rect[fill="none"] { fill: none } </style><style type="text/css"> 
    #svg22 .st0{fill:rgb(0, 0, 0);} </style><path class="st0" d="M85.78,98.797l-
    9.157-74.312l1.803-15.536c0.091-0.793-0.161-1.586-0.689-2.181 c-0.531-0.595-
    1.29-0.934-2.086-0.934H52.35c-0.796,0-1.557,0.339-2.086,0.934c-0.53,0.595-
    0.78,1.388-0.689,2.181l1.803,15.536 L42.22,98.797c-


 0.103,0.822,0.167,1.648,0.736,2.254l19.008,20.235c0.528,0.562,1.265,0.879,2.036,0.879s1.508-0.317,2.034-0.879 l19.01-20.235C85.611,100.445,85.883,99.619,85.78,98.797z M72.566,23.098H55.434l-1.517-13.074h20.166L72.566,23.098z"></path></g>
      </svg>
</div>

.container{
  width: 128px;
  height: 128px;
}
.svg {
  box-shadow: rgb(0, 0, 0) 0px 0px 8px 13px;
}