使用 feMorphology svg 过滤器修剪输出中的角落答案

【问题标题】：Using feMorphology svg filter trims corners in the output使用 feMorphology svg 过滤器修剪输出中的角落
【发布时间】：2018-07-16 12:16:37
【问题描述】：

我正在使用 SVG 过滤器 feMorphology 的扩张来实现形状的阴影扩散。

我期待以下结果。

<?xml version="1.0" encoding="UTF-8"?>
<svg width="188px" height="209px" viewBox="0 0 188 209" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Test</title>
    <defs>
        <polygon id="path-1" points="94 29 168 194 20 194"></polygon>
        <filter x="-100%" y="-100%" width="1000%" height="1000%" filterUnits="userSpaceOnUse" id="filter">
            <feMorphology radius="5" operator="dilate" in="SourceAlpha" result="morphOut"></feMorphology>
            <feMerge>
                <feMergeNode in="morphOut"></feMergeNode>
                <feMergeNode in="SourceGraphic"></feMergeNode>
            </feMerge>
        </filter>
    </defs>
    <g id="Triangle">
        <path d="M 20 20 L 120 20 L 120 120 L 20 120 z " filter="url(#filter)" stroke-width="1" fill-rule="evenodd" fill="rgb(216,216,216)"/>
        <path d="M 70 150 L 120 200 L 20 200 z" filter="url(#filter)" stroke-width="1" fill-rule="evenodd" fill="rgb(216,216,216)"/>
    </g>
</svg>

但我的代码会返回某些形状的修剪角。帮我解决这个问题。

【问题讨论】：

一个更好的阴影传播策略是将 feGaussianBlur 或 feConvolveMatrix 与 feComponentTransfer/feFuncA 结合起来以提高不透明度。 codepen.io/mullany/pen/sJopz 可能会有所帮助

标签： javascript svg filter svg-filters

【解决方案1】：

过滤器工作为expected:

膨胀（或腐蚀）内核是一个矩形，宽度为 2*x 半径，高度为 2*y 半径。在膨胀中，输出像素是输入图像的内核矩形中相应 R、G、B、A 值的单个分量最大值。在腐蚀中，输出像素是输入图像的内核矩形中相应 R、G、B、A 值的单个分量最小值。

想象一个正方形，在你的例子中，10px × 10px，沿着路径移动。对于膨胀，正方形扫过的最外层像素将定义图形的新外边界。（对于侵蚀，它将是正方形不扫过的路径内的最外层像素。）

【讨论】：