Создать символ плюс (+) с помощью пути SVG

Im пытается создать знак + в качестве пути SVG для проекта карт Google. Символ «плюс» будет нанесен вдоль полилинии с использованием свойства «Иконки». Пока мне удается приблизиться, мой плюс теперь выглядит как горизонтальная линия с вертикальным набором на одном конце «- |». Мне нужно, чтобы он появился в середине горизонтальной линии, чтобы он выглядел как плюс.Создать символ плюс (+) с помощью пути SVG

Мой текущий путь устанавливается с помощью следующей команды: путь

path: 'M 0,-1 0,1 H -1,1 0,1'

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

источник

2013-02-20 bUKaneer

Не могли бы вы использовать текстовый элемент вместо пути, а затем просто визуализировать символ плюса? – robwilliams

Я не думал об этом - любая идея синтаксиса? – bUKaneer

Понятия не имею, но если у вас есть дикая догадка, если вы делаете 'var x = {path: 'M 0, -1 0,1 H -1,1 0,1', strokeColor: '# f00'}' например, тогда, возможно, 'var x = {text: '+', strokeColor: '# f00'}'? – robwilliams

Я думаю, что вы хотите:

path: 'M0,-1 V1 M-1,0 H1'

Что переводится как начало в точке (0, -1), рисовать по вертикали 1 единицу, а затем перейти к (-1, 0) и рисовать по горизонтали 1 Блок.

источник

2013-02-20 15:16:26

Ahhh благодарит за это, пятно на и многое другое кратким! Работает как шарм. Не могли бы вы порекомендовать какие-либо хорошие онлайн-ресурсы для тестирования путей и так далее, как у Ive появилось довольно много небольших путей, которые мне нужно производить и перезагружать мое приложение каждый раз, когда я делаю изменения, это немного боль? Очень обязан! – bUKaneer

Я не знаю ничего подобного. Я сделал нечто похожее, потому что вы можете перетаскивать точки некоторых существующих путей и видеть код: http://www.petercollingridge.co.uk/svg-tutorial/paths. Возможно, я попытаюсь сделать что-то, где вы можете добавить новые пути и узлы. –

Эй, спасибо за подсказку и ваше сообщение. Я определенно буду читать и использовать это! ; О) – bUKaneer

Хотя Im довольно уверен, что это не самый сжатый способ описать этот путь Ive удалось построить знак плюс, используя следующий путь заявление [Далее методом проб и ошибок, и некоторые очень нечеткие воспоминания о черепахе]:

path: 'M 0,0 H 0.5,0.5 1,1 M 0,0 V 0.5,0.5 1,1 M 0,0 H -0.5,-0.5 -1,-1 M 0,0 V -0.5,-0.5 -1,-1',

источник

2013-02-20 14:33:48 bUKaneer

Создать символ плюс (+) с помощью пути SVG

ответ

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