Рисование с использованием пути к значку SVG

Я новичок в SVG. Я хочу сделать значок, как на изображении ниже. Как я могу добиться этого с помощью пути svg? Изображение иконки

Я очень ценю блог Jenkov SVG

— 24.12.2020 11:47

javascript css svg

24.12.2020 11:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Нарисуйте треугольник и окружность.

<svg width = "100" height = "100" viewBox = "0 0 100 100" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" xml:space = "preserve" xmlns:serif = "http://www.serif.com/" style = "fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g transform = "matrix(1,0,0,1,0,-0.377897)">
        <circle cx = "49.509" cy = "63.179" r = "22.737" style = "fill:none;stroke:black;stroke-width:1.8px;"/>
        <g transform = "matrix(0.837287,0,0,0.838403,6.90389,6.94193)">
            <path d = "M50.885,9.42L69.326,39.219L32.444,39.219L50.885,9.42Z" style = "fill:none;stroke:black;stroke-width:2.15px;"/>
        </g>
    </g>
</svg>

Обновлять.

<svg width = "100" height = "100" viewBox = "0 0 100 100" version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" xml:space = "preserve" xmlns:serif = "http://www.serif.com/" style = "fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g transform = "matrix(1,0,0,1,0,-0.377897)">
        <g transform = "matrix(1,0,0,1,0.490673,0)">
            <circle cx = "49.509" cy = "63.179" r = "22.737" style = "fill:none;stroke:black;stroke-width:1.8px;"/>
        </g>
        <g transform = "matrix(0.837287,0,0,0.838403,7.39456,13.5265)">
            <path d = "M50.885,9.42L69.326,39.219C69.326,39.219 61.595,32.108 51.566,31.949C40.814,31.778 32.444,39.219 32.444,39.219L50.885,9.42Z" style = "fill:none;stroke:black;stroke-width:2.15px;"/>
        </g>
    </g>
</svg>

Спасибо за ваш ответ, могут ли края прямоугольника сочетаться с кругом? с некоторой кривой Безье?

— 24.12.2020 11:47

принял ответ. Спасибо

— 24.12.2020 11:58

24.12.2020 11:42

Использование SVG — очень интересный способ отображения векторных изображений на вашем веб-сайте. Возможно, вы захотите обратиться к этим документам, прежде чем приступать к серьезным вещам: Mozilla / W3

<svg width = "800" height = "600" xmlns = "http://www.w3.org/2000/svg">
 <g>
  <title>BG</title>
  <rect fill = "#fff" id = "canvas_background" height = "602" width = "802" y = "-1" x = "-1"/>
  <g display = "none" overflow = "visible" y = "0" x = "0" height = "100%" width = "100%" id = "canvasGrid">
   <rect fill = "url(#gridpattern)" stroke-width = "0" y = "0" x = "0" height = "100%" width = "100%"/>
  </g>
 </g>
 <g>
  <title>SVG-01</title>
  <ellipse ry = "56" rx = "56" id = "svg_1" cy = "268" cx = "400" stroke-width = "1.5" stroke = "#000" fill = "#fff"/>
  <path id = "svg_2" d = "m366.72932,213.48481l33.27077,-58.22384l33.27077,58.22384l-66.54153,0z" stroke-width = "1.5" stroke = "#000" fill = "#fff"/>
 </g>
</svg>

Спасибо за ваш ответ @nil, могут ли края прямоугольника сочетаться с кругом? с некоторой кривой Безье? Я хочу, чтобы это смешалось по краям

— 24.12.2020 11:50

24.12.2020 11:47