Блог

Главная - Вопросы по программированию - Как нарисовать дугу внутри другого круга с помощью svg

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

#html #css #svg

#HTML #css #svg

Вопрос:

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

введите описание изображения здесь

  1. Как мне добиться этой заливки?
  2. Как мне закончить свой круг на краю внешнего круга? Моя попытка отрегулировать положение холста не работает.
 <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>

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

введите описание изображения здесь

Ответ №1:

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

 <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>

Комментарии:

1. Отлично! Большое спасибо

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

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

Ответ №2:

используйте это, я создал это с помощью 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>
 Run code snippetHide resultsExpand snippet