Как сделать узел на svg?

Question

[tishkunov]

Как сделать подобный узел на svg?

Comments

[Ди Ма]

Нарисовать в Кореле. Или нужна формула?) Что именно не понятно?

[Nekto_TM]

Ди Ма: за такие советы нужно сажать или давать условку) Рисовать нужно в Иллюстраторе! А корел давно нужно сделать вне закона)

[Ди Ма]

Nekto_TM: У меня противоположенное мнение, т.к. совершенно не знаю Иллюстратор. Хотя понимаю, что он лучше, и что все нормальные люди рисуют именно в нем. А что, настолько большая разница?)

[Nekto_TM]

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

[Ди Ма]

Nekto_TM: =) Чем-то напоминают тех, кто закончил курсы "программиста". Там у них и майкрософт ворд, и корел учили, да и в целом по виндовсу, там интернет эксплорер кароче, и все такое.

А сам я иногда программирую, и бывает нужно что-то простое. А когда не знаешь Иллюстратор, любая простая задача, вроде "преобразовать в кривые" превращается в чтение документации, полотен менюшек, настроек, в общем, если бы я вбивал вручную каждый moveTo(), то нарисовал бы свой чертов канвас в 2 раза быстрее.

[Nekto_TM]

Ди Ма: не очень понял, но по поводу "А когда не знаешь Иллюстратор..." - вооот, есть такая беда у нас. Почему-то во времена пиратских двухтысячных, когда и корел, и люстра были одинаково бесплатны (ну с торрентов-то? да?), среди народа почему-то распространился корел. Не сказать, что он проще. И не сказать, что он прям таки хуже. Но стандартом индустрии стал Адоб, потому что собственно этой компании принадлежат основные изобретения в контроле цвета (CMS - color management system), и даже не основные, а собственно CMS был изобретен адобом. А все остальные безуспешно пытались подтянуться, пока Эдоуби их обгонял. И никто еще не обогнал.

[Ди Ма]

Nekto_TM: Они заслужили) Я давно пользуюсь Fireworks. Помню его еще от Макромедиа. И в своем роде он лучший)

Answer 1

[Сергей Соколов]

1. Надо нарисовать кривыми Безье путь этого узла в каком-нибудь векторном редакторе, напр. Adobe Illustrator:
   
   как это выглядит

   
   
   
2. в этом редкаторе сохранить файл как SVG или просто скопировать оттуда SVG-код нарисованного пути. В Illustrator в диалоге сохранения копии файла как SVG есть кнопка «Показать SVG-код»
   (Show SVG Code)

   
   
   
3. в веб-документе вставить этот путь и дать ему пунктирный стиль через stroke-dasharray, скруглёные концы через stroke-linecap="round", нужную толщину через stroke-width и цвет через stroke:
   SVG код вашего узла

   <svg width="800px" height="369.643px" viewBox="0 0 800 369.643" enable-background="new 0 0 800 369.643">
   <path fill="none" 
     stroke="#596E7A"
   	stroke-width="10"
   	stroke-miterlimit="10"
   	stroke-dasharray="25,25"
   	stroke-linecap="round"
   	d="M34.762,225.595c25.084,109.862,211.31,151.786,342.262,108.929	c129.701-42.448,212.358-186.755,180.357-288.095C543.096,1.19,460.075-8.983,449.372,67.834
   	c-15.801,113.4,167.532,164.904,318.724,34.547"/>
   </svg>

   
   

Результат