Как нарисовать дугу внутри другого круга с помощью svg

Я пытаюсь добиться следующего изображения:

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

<svg width = "173" height = "172" xmlns = "http://www.w3.org/2000/svg">
 <g>
  <title>background</title>
  <rect fill = "none" id = "canvas_background" height = "175" width = "175" 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>Layer 1</title>
  <ellipse stroke = "#000" ry = "85" rx = "85" id = "svg_1" cy = "86" cx = "86" stroke-width = "1.5" fill = "#fff"/>
  <ellipse stroke = "#000" ry = "88" rx = "88" id = "svg_5" cy = "88" cx = "15" fill-opacity = "null" stroke-opacity = "null" stroke-width = "1.5" fill = "none"/>
  <line stroke = "#000" stroke-linecap = "null" stroke-linejoin = "null" id = "svg_3" y2 = "170" x2 = "86" y1 = "2" x1 = "82" fill-opacity = "null" stroke-opacity = "null" stroke-width = "1.5" fill = "none"/>
 </g>
</svg>

Приведенный выше код выдает следующее:

html css svg

24.12.2020 07:58

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

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

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

Ответы 2

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

Вот как вы должны это сделать, поясняющие комментарии прилагаются:

<svg width = "173" height = "172" xmlns = "http://www.w3.org/2000/svg">
  <defs>
    <!-- clip path-->
    <clipPath id = "clip">
      <ellipse id = "circle" ry = "85" rx = "85" cy = "86" cx = "86" />
    </clipPath>

    <!-- gradient -->
    <linearGradient id = "gradient" x1 = "0" x2 = "0" y1 = "0" y2 = "1">
      <stop offset = "0%" stop-color = "#000" />
      <stop offset = "100%" stop-color = "#fff" />
    </linearGradient>
  </defs>
  <g>
    <title>background</title>
    <rect fill = "none" id = "canvas_background" height = "175" width = "175" 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>Layer 1</title>
    <!-- same shape of the #circle in #clip, adding stroke and fill -->
    <use xlink:href = "#circle" stroke = "#000" stroke-width = "1.5" fill = "#fff" />

    <!-- using clip path, same shape of above -->
    <ellipse clip-path = "url(#clip)" stroke = "#000" ry = "88" rx = "88" id = "svg_5" cy = "88" cx = "15" stroke-width = "1.5" fill = "url(#gradient)" />
    <line clip-path = "url(#clip)" stroke = "#000" stroke-linecap = "null" stroke-linejoin = "null" id = "svg_3" y2 = "170" x2 = "86" y1 = "2" x1 = "82" fill-opacity = "null" stroke-opacity = "null" stroke-width = "1.5" fill = "none" />
  </g>
</svg>

Большой! Большое спасибо

— 24.12.2020 08:44

Кроме того, вы можете проверить это руководство, чтобы узнать, как написать svg. Это мне очень помогло.

— 24.12.2020 08:49

Спасибо, обязательно пройду

— 24.12.2020 08:55

24.12.2020 08:42

используйте это, я создал это с Adobe Illustrator.

        <svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px" width = "165px"
             height = "165px" viewBox = "0 0 165 165" style = "enable-background:new 0 0 165 165;" xml:space = "preserve">
<style type = "text/css">
    .st0{fill:#FFFFFF;stroke:#000000;stroke-width:1.5;}
    .st1{fill:url(#SVGID_1_);stroke:#000000;stroke-width:1.5;}
    .st2{fill:none;stroke:#000000;stroke-width:1.5;}
    .st3{fill:url(#SVGID_2_);stroke:#000000;stroke-width:1.5;}
</style>
            <defs>
            </defs>
            <path class = "st0" d = "M164.3,82.5c0,45.1-36.6,81.8-81.8,81.8c-10.8,0-21.2-2.1-30.6-5.9c-30-12.1-51.1-41.5-51.1-75.8
    S21.9,18.8,51.9,6.7c9.5-3.8,19.8-5.9,30.6-5.9C127.6,0.8,164.3,37.3,164.3,82.5z"/>
            <linearGradient id = "SVGID_1_" gradientUnits = "userSpaceOnUse" x1 = "51.875" y1 = "158.32" x2 = "51.875" y2 = "6.68">
                <stop  offset = "0" style = "stop-color:#FFFFFF"/>
                <stop  offset = "1" style = "stop-color:#000000"/>
            </linearGradient>
            <path class = "st1" d = "M103,82.5c0,20.8-7.7,39.7-20.5,54.1c-8.3,9.4-18.8,16.9-30.6,21.7c-30-12.1-51.1-41.5-51.1-75.8
    S21.9,18.8,51.9,6.7C63.7,11.5,74.2,19,82.5,28.4C95.3,42.8,103,61.7,103,82.5z"/>
            <line class = "st2" x1 = "82.5" y1 = "0.8" x2 = "82.5" y2 = "164.3"/>
</svg>

    <!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In  -->
            <svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" x = "0px" y = "0px" width = "165px"
                 height = "165px" viewBox = "0 0 165 165" style = "enable-background:new 0 0 165 165;" xml:space = "preserve">
    <style type = "text/css">
        .st0{fill:#FFFFFF;stroke:#000000;stroke-width:1.5;}
        .st1{fill:url(#SVGID_1_);stroke:#000000;stroke-width:1.5;}
        .st2{fill:none;stroke:#000000;stroke-width:1.5;}
        .st3{fill:url(#SVGID_2_);stroke:#000000;stroke-width:1.5;}
    </style>
                <defs>
                </defs>
                <path class = "st0" d = "M164.3,82.5c0,45.1-36.6,81.8-81.8,81.8c-10.8,0-21.2-2.1-30.6-5.9c-30-12.1-51.1-41.5-51.1-75.8
        S21.9,18.8,51.9,6.7c9.5-3.8,19.8-5.9,30.6-5.9C127.6,0.8,164.3,37.3,164.3,82.5z"/>
                <linearGradient id = "SVGID_1_" gradientUnits = "userSpaceOnUse" x1 = "51.875" y1 = "158.32" x2 = "51.875" y2 = "6.68">
                    <stop  offset = "0" style = "stop-color:#FFFFFF"/>
                    <stop  offset = "1" style = "stop-color:#000000"/>
                </linearGradient>
                <path class = "st1" d = "M103,82.5c0,20.8-7.7,39.7-20.5,54.1c-8.3,9.4-18.8,16.9-30.6,21.7c-30-12.1-51.1-41.5-51.1-75.8
        S21.9,18.8,51.9,6.7C63.7,11.5,74.2,19,82.5,28.4C95.3,42.8,103,61.7,103,82.5z"/>
                <line class = "st2" x1 = "82.5" y1 = "0.8" x2 = "82.5" y2 = "164.3"/>
    </svg>

24.12.2020 08:47

Другие вопросы по теме

Как я могу заменить все классы, начинающиеся с «border-», с помощью gsub?

Как заменить слово гиперссылкой с помощью javascript?

Как добавить игровое меню

Как встроить сайт в javascript без iframe?

Скрытие элементов при изменении размера экрана

Невозможно изменить слайды JQuery lightSlider по номеру индекса элемента

Как создать свойство nth-child CSS для многоуровневого html

Скрыть строку таблицы tr, содержащую определенную метку, используя css

Удалить «Результаты поиска: '%s'» и пустое пространство со страницы результатов поиска магазина Woocommerce

Пакеты Гэтсби не удались

Как нарисовать дугу внутри другого круга с помощью svg

Ответы 2

Другие вопросы по теме

Похожие вопросы