使用feMorphology svg滤镜可修剪输出中的角

Question

我正在使用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>

但是我的代码以某些形​​状返回了一些修整的角。帮我解决这个问题。

Answer 1

过滤器按预期工作：

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

想象一下，在您的情况下，沿路径移动的正方形为10px×10px。为了进行扩张，正方形扫过的最外面的像素将定义新的外部边界。（对于侵蚀，这将是不方的路径内的最外面的像素不扫过。）