SVG外部对齐半透明笔划

时间:2018-04-20 09:07:57

标签: html svg

我在我的项目中使用SVG图像。由于较低的不透明度,边界目前居中并且非常明显。有没有办法只在填充区域外显示边框? CSS属性stroke-alignment不起作用。

这不是重复,因为它是半透明边框的特殊问题。

enter image description here

这是SVG代码:

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

谢谢和问候,

NEHA

0 个答案:

没有答案