Question

我正在寻找一种使用SVG为多边形添加边框的方法。我无法添加另一个多边形，因为它应该独立于多边形形状。我尝试在多边形上使用笔划，但它也在多边形内绘制线条。最近在最新的W3C规范中删除了仅在多边形外部绘制。

所以我摆弄了svg滤镜，它几乎可以工作，但我得指出边框有点削减。有谁知道如何消除这种不良影响？

代码：

` <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
    <defs>
        <style>
            .cls-1{fill:#feb500;}
        </style>
        <filter id="solid-border" width="130%">
            <feFlood flood-color="black" result="base"/>
            <feMorphology result="bigger" in="SourceGraphic" operator="dilate" radius="3"/>
            <feComposite result="drop" in="base" in2="bigger" operator="in"/>
            <feMerge>
                <feMergeNode in="drop"/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
            <feBlend in="SourceGraphic" in2="drop" mode="normal"/>
        </filter>
    </defs>
    <g id="background" filter="url(#solid-border)">
        <polygon class="cls-1" points="64 13 6.5 107 121.5 107 64 13"/>
    </g>
</svg>`

Answer 1

您可以使用blur-then-threshold技巧创建更整洁的圆角。

我们正在模糊黑色三角形，然后使用feComponentTransfer基元将深灰色转换为黑色，将浅灰色转换为白色。

您可以通过更改stdDeviation或更改1属性中tableValues的数量来调整“笔画”尺寸。

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
    <defs>
        <style>
            .cls-1{fill:#feb500;}
        </style>
        <filter id="solid-border2" width="130%" color-interpolation-filters="sRGB">
            <feFlood flood-color="black" result="base"/>
            <feGaussianBlur result="blur" in="SourceAlpha" stdDeviation="3"/>
            <feComponentTransfer in="blur" result="threshold">
              <feFuncA type="discrete" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1"/>
            </feComponentTransfer>
            <feBlend in="SourceGraphic" in2="threshold" mode="normal"/>
        </filter>
    </defs>
    <g id="background" filter="url(#solid-border2)">
        <polygon class="cls-1" points="64 13 6.5 107 121.5 107"/>
    </g>
</svg>

如果您愿意，还可以将此技巧应用于您的过滤器版本。然而，角落有点时髦。

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
    <defs>
        <style>
            .cls-1{fill:#feb500;}
        </style>
        <filter id="solid-border" width="130%">
            <feFlood flood-color="black" result="base"/>
            <feMorphology in="SourceAlpha" operator="dilate" radius="4"/>
            <feGaussianBlur stdDeviation="2"/>
            <feComponentTransfer>
              <feFuncA type="discrete" tableValues="0 1 1 1 1 1"/>
            </feComponentTransfer>
            <feBlend in="SourceGraphic" in2="drop" mode="normal"/>
        </filter>
    </defs>
    <g id="background" filter="url(#solid-border)">
        <polygon class="cls-1" points="64 13 6.5 107 121.5 107"/>
    </g>
</svg>

Answer 2

我会做类似下面的事情。声明svg标记中的xlink命名空间没有它，Safari不支持use标记。在使用use标记后，您可以定义形状。使用标签中的内部笔划由原始形状覆盖。虽然我不确定这是否正在使用另一个多边形，因为你说不能使用它。

 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
        <defs>
            <style>
                .cls-1{fill:#feb500;}
            </style>
        </defs>
        <use xlink:href="#triangleShape" stroke="black" stroke-width="8"/>
        <polygon id="triangleShape" class="cls-1" points="64 13 6.5 107 121.5 107 64 13"/>
    </svg>

使用过滤器为svg多边形添加边框

2 个答案: