Вычитание SVG объектов и путей

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

Path

который я создал с svgwrite, создав два circles и rect, а затем с помощью Inkscape, чтобы взять разность двух кругов и пересечения с прямая линия: Combination

Вопрос в том, могу ли я сделать это напрямую с помощью SVG или svgwrite? Либо делать логические операции, либо создавать путь, который ведет себя как выше.

Я пытался создать черно-белый круг с путем, как:

d="M0,128 A128,128,1,1,0 0 127.9 Z\ 
    M 32 128 A 96 96 1 1 0 32 127.9 Z"

с fill="#000000", stroke = "none", fill-rule="evenodd" Однако это кольцо не распознается редактором SVG шрифта (он просто создает черный диск).

Я также попытался создать комбинацию путей (внешний круг, внутренний круг, горизонтальная линия)

d="M0,128 A128,128,1,1,0 0 127.9 Z\ 
M 32 128 A 96 96 1 1 0 32 127.9 Z \ 
M 38 128 l 0 15 l 180 0 l 0 -30 l -180 0 z"

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

path generated

есть ли способ программно генерировать путь первой картинке выше?

источник

2014-09-01 Massagran

Похоже, вы могли бы сделать это в SVG в качестве прямого соединения пути, состоящего из трех отдельных подпутей - внешний круг плюс верхние и нижние почти полукругов (с помощью эллиптической кривой дуги) - вместе с соответствующим правилом заполнения. Тогда ваш редактор шрифтов сможет справиться с этим, так как ему не нужно было бы вычислять какие-либо из самих путей посредством изменения формы. – martineau

@martineau, это точно мой вопрос. Как вы создаете << явный составной путь, состоящий из 3 подпапок с эллиптическими кривыми дуги >>? Мои попытки (см. D и fill-rule = "evenodd") приведены в моем описании, но я не знаю, как их улучшить. – Massagran

Я не предлагаю те же 3 подпапки. Первый будет внешним, полным кругом (как и у вас), но остальные два будут замкнутыми эллиптическими кривыми дуги (верхние и нижние частичные кружки). К сожалению, я не могу включить изображение в свой комментарий. – martineau

следующее предложение @ Мартино и this SO вопрос, я пришел к этому решению:

Создать круг, составленный из двух половин
Создает два меньших половины окружности (не совсем круглые)

затем используйте fill-rule: evenodd, чтобы объединить их все.

d=" 
M 128, 128     
m -128, 0      
a 128,128 0 1,0 256,0\  
a 128,128 0 1,0 -256,0\ 
M 32,112 a 1.15 1 0 1 1 194, 0z\ 
M 32,142 a 1.15 1 0 1 0 194, 0z\ 
"

который возвращает что-то вроде этого: e letter path from script . К сожалению, редактор шрифтов Inkscape SVG только делает это: Imgur

Так что я буду продолжать расследование, где эта проблема может исходить от. Дальнейшие предложения приветствуются.

источник

2014-09-02 17:46:59 Massagran

Первая дуга имеет отрицательный (0) угол поворота, второй должен иметь положительный (1) угол вытягивания и нарисован с противоположной стороны для достижения желаемого эффекта.

#--------------------------N-----------↓↓↓-↓↓↓-------------P-↓↓↓-↓↓↓↓↓---------------------------------------------- 
d="M 0 128 A 128 128 1 1 0 0 127.9 Z M 224 128 A 96 96 1 1 1 224 127.9 Z M 38 128 L 0 15 L 180 0 L 0 -30 L -180 0 Z"

источник

2016-06-01 11:47:22 Ghost

Фильтры не производят пути, они просто производят растровые изображения (так что если вам нужен путь - это неправильный ответ). Но вот версия, использующая SVG-фильтр, - так как вы отметили вопрос с ним (не будет работать в Firefox - не можете использовать объекты в качестве входов feImage еще - вам придется встроить их в URI данных).

<svg width="200px" height="200px"> 
 
    <defs> 
 
    <circle id="inner" cx="80" cy="80" r="60" fill="white" /> 
 
    <line id="crossbar" x1="20" x2="140" y1="80" y2="80" stroke-width="22" stroke="black"/> 
 
    
 
    <filter id="combine" x="0%" y="0%"> 
 
     <feImage xlink:href="#inner" result="innerwhite"/> 
 
     <feImage xlink:href="#crossbar" result="crossbarthing"/> 
 
     <feComposite operator="xor" in="SourceGraphic" in2="innerwhite"/> 
 
     <feComposite operator="over" in2="crossbarthing"/> 
 
    </filter> 
 
    </defs> 
 
    <circle filter="url(#combine)" cx="100" cy="100" fill= 
 
"black" r="80"/>" 
 
</svg>

источник

2016-06-02 15:20:21

Вычитание SVG объектов и путей

ответ

Смежные вопросы