SVG Path阴影仅在表单外部

Question

我有一个简单的关闭svg路径

<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="none" stroke-width="2px" stroke="black" />

是否可以仅在外边框上获得阴影效果？

不是那样的：

但是那样：

内部应保持透明。

Answer 1

正如@Robert Longson所说，使用面具是解决方案：

＆＃13;

＆＃13;

<svg>
  <defs>
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 255 0 0 0 0 0 0 0 0 1 0"></feColorMatrix>
      <feGaussianBlur stdDeviation="4" result="coloredBlur"></feGaussianBlur>
      <feMerge>
        <feMergeNode in="coloredBlur"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>

  <defs>
    <mask id="myMask">
      <rect x="0" y="0" width="100" height="100" fill="white" />
      <rect x="11" y="11" width="78" height="78" fill="black" />
    </mask>
  </defs>
</svg>
<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100" fill="yellow" />
  <path d="M10 10 H 90 V 90 H 10 L 10 10" stroke-width="2px" stroke="black" filter="url(#glow)" mask="url(#myMask)" fill="none" />
</svg>

＆＃13;

＆＃13;

＆＃13;