SVG outer alignment of semi transparent stroke

Question

I am using an SVG image in my project. The border is currently centered and very much noticeable because of the lower opacity. Is there any way to show the border only outside the fill area? CSS property stroke-alignment is not working.

This isn't a duplicate as it's a particular problem with a semi transparent border.

Here is the SVG code:

<svg style="left: 50px; top: 261px; z-index: 16; width: 145px; height: 198px;
  transform: rotate(0deg);" version="1.1" id="Layer_16"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  x="0px" y="0px" viewBox="-0.9 -1 41.9 41.9" xml:space="preserve"
>
  <defs>
    <linearGradient id="grad_16" gradientTransform="rotate(90)">
      <stop offset="0%" style="stop-color:#5fe034; stop-opacity:1"></stop
      <stop offset="100%" style="stop-color:#ed2bb6; stop-opacity:1"></stop>
    </linearGradient>
  </defs>
  <polygon style="fill:url(#grad_16); stroke: #59e38e; stroke-width: 7px;
    stroke-opacity: 0.4" stroke-alignment="outer"
    points="30.8,11.3 20,0.5 9.3,11.4 14.6,11.4 14.7,28.7 9.2,28.7 20,39.5 30.8,28.6 25.4,28.6 25.3,11.3"
   ></polygon>
</svg>

Thanks and Regards,

Neha

I don't think is is "an exact duplicate" of the suggested question. You can e.g. clone your polygon element and apply the transparent border only to the underlying one. See this fiddle: https://jsfiddle.net/devmount/9e4gkz1c/ — andreas, Apr 20 '18 at 10:24
But if I reduce the opacity of the fill, it causes the same issue, https://jsfiddle.net/9e4gkz1c/9/ — Neha Dangui, Apr 20 '18 at 11:06
Ok in this case, you can simply set a general opacity for the whole ` — andreas, Apr 20 '18 at 12:17
Thanks a lot for the suggestion, but this wont work separately for the two different gradients right ? — Neha Dangui, Apr 23 '18 at 05:19

SVG outer alignment of semi transparent stroke

0 Answers0