如何使用 svg 在另一個圓內繪制弧線

Question

我正在努力實現下圖：

1. 我如何實現這種填充？
2. 如何在外圈的邊緣結束我的圈子？ 我嘗試調整 canvas 的 position 是行不通的。

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

上面的代碼產生以下內容：

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

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