SVG, как добавить рамку на символ SVG?

Question

Я использую большой SVG, который содержит флаги стран, например,

<symbol viewBox="0 0 640 480" id="flag-be"><g fill-rule="evenodd" stroke-width="1pt"><path d="M0 0h213.34v480H0z"/><path fill="#ffd90c" d="M213.34 0h213.33v480H213.33z"/><path fill="#f31830" d="M426.67 0h213.34v480H426.66z"/></g></symbol>

Это прекрасно работает, и я могу просто использовать svg # flag-be и вуаля, получил мой флаг.

<svg class="icon flag-be"><use href="#flag-be"></use></svg>

Тем не менее, я хотел бы добавить рамку вокруг флагов (потому что некоторые, которые имеют много белого выглядят странно без него), в идеале что-то, что можно установить только через css

Это прекрасно работает, когда у меня есть каждый флаг в отдельных svgs (с использованием border), но мне не удалось заставить его работать, когда я использую несколько флагов как часть одного контейнера svg (график)

Что проще всего? Что мне добавить новый элемент в каждом символе для границы? Что является наиболее гибким для стилизации «используемых» символов в SVG?

Answer 1

Ни <svg>, ни <use>, ни <g> элементы не являются графическими элементами. Попытка установить стиль, изменяющий графический вид на них, приведет только к тому, что стиль наследуется его дочерними элементами. Таким образом, если вы установите stroke на <use>, он будет унаследован всеми элементами пути, и вы получите рамку вокруг каждого поля флага.

(Следует помнить: контент, клонированный с элементом <use>, может наследовать стили , но они не могут быть нацелены с помощью селекторов CSS .)

Так почему же установка border работает на крайнем <svg> элементе? Поскольку этот элемент обрабатывается как часть пространства имен HTML и отображается так, как если бы он был обычным <span>, в то время как для его дочерних элементов в пространстве имен SVG свойство border не имеет значения.

В вашем случае вы должны добавить графический элемент, окружающий весь флаг. Вероятно, в точке использования, как это:

<svg ...>
    ...
    <svg class="icon flag-be" width="24" height="16">
        <use href="#flag-be" />
        <rect width="100%" height="100%" style="fill:none;stroke:black;stroke-width:1" />
    </svg>
    ...
</svg>

Обратите внимание на внутренний элемент <svg>. Его цель - дать ссылку на процентную ширину и высоту <rect>. В противном случае они будут вычислены по отношению к external <svg>.

В настоящее время width и height должны быть установлены как атрибуты внутреннего элемента <svg>. SVG 2 определяет их как атрибуты представления, которые можно установить с помощью CSS, но некоторые браузеры по-прежнему допускают это только для внешних <svg> элементов.