SVG 路径阴影仅在表单外部答案

【问题标题】：SVG Path shadow only on outside of the formSVG 路径阴影仅在表单外部
【发布时间】：2015-11-29 02:51:14
【问题描述】：

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

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

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

不是这样的：

不过这样：

内部应该保持透明。

【问题讨论】：

使用剪辑路径或蒙版来剪辑掉内部阴影。

标签： svg path shadow

【解决方案1】：

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

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

【讨论】：

这似乎不起作用。我只看到一个黄色的盒子，里面有一个黑色的方形边框。