Блог

Главная - Вопросы по программированию - Добавление границы контура к изображению SVG

Добавление границы контура к изображению SVG

#c# #winforms #svg

Вопрос:

Я рисую эту графическую википедию SVG на WinForms, используя SVG.NET библиотека.

введите описание изображения здесь

Проблема в том, что линия не видна, когда фон черный, как на первом изображении ниже. Я хочу добавить границу контура, но не так, как на втором изображении ниже. Я хочу добавить белую рамку контура, как на третьем изображении ниже. Возможно ли это?

введите описание изображения здесь . введите описание изображения здесь . введите описание изображения здесь

Комментарии:

1. вы можете нарисовать внутри группы прямоугольник с размером (ширина, высота) и положением (x y) ограничивающего прямоугольника группы. В прямой кишке может быть заполнение=»нет» и нужный вам штрих.

Ответ №1:

Выпадающие тени CSS — фильтра применяются к элементам SVG:

 <style>
 svg{
  width:180px;
  filter:drop-shadow(5px 5px 0px darkgreen) drop-shadow(-5px -5px 0px darkgreen); 
 }
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" style="stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round">
        <path d="M 22.5,11.63 L 22.5,6M 20,8 L 25,8M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" style="fill:#ffffff; stroke:#000000; stroke-linecap:butt; stroke-linejoin:miter;"/>
        <path d="M 11.5,37 C 17,40.5 27,40.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 19,16 9.5,13 6.5,19.5 C 3.5,25.5 11.5,29.5 11.5,29.5 L 11.5,37z " style="fill:#ffffff; stroke:#000000;"/>
        <path d="M 11.5,30 C 17,27 27,27 32.5,30M 11.5,33.5 C 17,30.5 27,30.5 32.5,33.5" style="fill:none; stroke:#000000;"/>
        <path d="M 11.5,37 C 17,34 27,34 32.5,37" style="fill:none; stroke:#000000;"/>
    </svg>

Для готовой шахматной доски есть моя https://chessmeister.github.io/ Веб-компонент.

Если вам нужны только шахматные фигуры, откройте https://chessmeister.github.io/elements.chessmeister.js и скопируйте функцию SVG_chesspiece .. на ней нет лицензии.. вы можете делать все, что хотите.

Метки: