The problem is in the display of the shadow.

As you can see from the examples below, white spots appear.

.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>

I tried to add an element with absolute positioning, which would "paint over" white spaces.

 .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>

The problem is that the method is not universal. The radius of rounding, the size of the shadow, the position of the shadow can change. In some cases, the element .border goes beyond the boundaries - it has not been cured.

The second attempt was to paint over the background from 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>

There is a problem with the case when border-radius: 0 . Also the problem is that the background of the svg should be transparent. And in this case it is painted over.

How can I solve this problem?

    3 answers 3

    One of the problems is that in svg the line is thickened both inward and outward, while the radius of rounding is considered in the middle of this line. In % it is calculated differently, from the external size.
    When overlaying a shadow, the rounding radius is considered to be on the outer border of the line and its dimensions, also on the outer one.
    That is, 7% radius in your SVG means 0.07*(115.2+12.8)=8.96 and this will correspond to the outer radius - 8.96+(12.8/2)=15.36px , and in percent for the shadow it will be - 15.36/128=0,12 That is 12% .
    If you do not calculate the radii then there will be obvious discrepancies in the rounding of the corners.

    But the main problem is that the rounding of corners and the imposition of shadows are inaccurate and pixels of the background color appear in the corners. This problem can be solved by imposing a shadow not on the SVG but on a separate block per pixel smaller in size.

    Here is an example. The radius of rounding is calculated by the calc function. I think if you modify the code, then the parameters are 7% , 128px and so on. You can set variables and change only them.

     .container, .svg { width: 128px; height: 128px; } .container { position:relative; } .shadow { position: absolute; left:1px; top:1px; width:calc(128px - 2px); height:calc(128px - 2px); border:none; box-shadow: rgb(0, 0, 0) 0px 0px 8px 13px; border-radius: calc((0.07*(115.2 + 12.8) + 12.8/2)*1px); } 
     <div class="container"> <div class="shadow"></div> <svg class="svg"> <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>

    • I will try to apply your decision. We'll see. what happens. At least there is one indisputable advantage - we add only one element, and not as in my decision) - Stepan Kasyanenko

    Try this: 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; }
    • Everything would be fine, but you just removed the shadow from svg ))). And I need it then. - Stepan Kasyanenko
    • Yes, half a day dig, nothing happens. (( - cavy
    • So I killed 8 hours for this. It seems to be such a trifle, but unpleasant. - Stepan Kasyanenko
    • Patience and work ... Well done! Well done. ) - cavy
    • Maybe so: jsfiddle.net/hk5t4t8v/329 ? - cavy

    As a result, unscrewed as follows.

    Of course, not perfect. Generally bad. But nothing else came to mind))

     .container, .svg { width: 128px; height: 128px; } .container { position: relative; } .svg { box-shadow: inset 0px 0px 0 5px rgb(0, 0, 0), rgb(0, 0, 0) 0px 0px 8px 13px; } .border { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 4px solid black; } 
     <div class="container"> <div class="border" style="border-radius: 7%;"></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> <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> <div class="border" style="border-radius: 50%;"></div> </svg> </div>

    • It would be possible to make a shadow through the filters and then increase its scope - Arthur
    • If I mean the shadow filter for rect , then I tried, nothing good happened. - Stepan Kasyanenko