@tishkunov

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

Как сделать подобный узел на svg? 8fee263c64f9462c901d28af96d840c3.png
  • Вопрос задан
  • 348 просмотров
Решения вопроса 1
  1. Надо нарисовать кривыми Безье путь этого узла в каком-нибудь векторном редакторе, напр. Adobe Illustrator:
    как это выглядит
    3870afe253d5421aaeebb9dd84570db3.png

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

  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>

Результат
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы