Добавление границы в SVG-полигон с помощью фильтров

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

Я бы сделал что-то вроде ниже.Объявляя пространство имен xlink в теге svg как без него, Safari не поддерживает тег 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>

Answer 2

Вы можете создать более аккуратные закругленные углы, используя трюк размытие-затем-порог.

Мы размываем черный треугольник, затем используем примитив 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>