如何制作我的 svg 图像圆圈，该圆圈目前是方形的，半径很无聊

Question

如何制作我的 SVG 图像圆，该圆目前是正方形，半径很无聊。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000pt" height="1000pt" viewBox="0 0 1000 1000" version="1.1">
<defs>
<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="3.475598" y1="1.1821" x2="102.7784" y2="1.1821" gradientTransform="matrix(10.07021,0,0,10.07021,-35.000003,-11.90396)">
<stop offset="0" style="stop-color:rgb(49.803922%,0%,100%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(88.235294%,0%,100%);stop-opacity:1;"/>
</linearGradient>
</defs>
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 783.335938 0 L 209.425781 0 C 55.613281 0 0 53.488281 0 213.285156 L 0 789.226562 C 0 944.03125 55.613281 1000 209.425781 1000 C 209.425781 1000 628.230469 1000 783.335938 1000 C 938.441406 1000 1000 944.03125 1000 789.226562 C 1000 634.421875 1000 213.285156 1000 213.285156 C 1000 53.488281 940.460938 0 783.335938 0 Z M 581.554688 288.144531 L 652 288.144531 L 425.09375 711.855469 L 343.601562 711.855469 M 671.117188 356.039062 L 671.210938 288.625 L 896.488281 466.210938 C 896.164062 487.175781 896.808594 511.339844 896.488281 532.304688 L 671.210938 709.894531 L 671.390625 641.867188 L 856.292969 499.550781 Z M 143.707031 499.550781 L 328.609375 641.867188 L 328.789062 709.894531 L 103.511719 532.304688 C 103.191406 511.339844 103.835938 487.175781 103.511719 466.210938 L 328.789062 288.625 L 328.882812 356.035156 Z M 143.707031 499.550781 "/>
</g>
</svg>

Answer 1

我已经更改了路径 d 属性的第一部分：

M 783.335938 0 L 209.425781 0 C 55.613281 0 0 53.488281 0 213.285156 L 0 789.226562 C 0 944.03125 55.613281 1000 209.425781 1000 C 209.425781 1000 628.230469 1000 783.335938 1000 C 938.441406 1000 1000 944.03125 1000 789.226562 C 1000 634.421875 1000 213.285156 1000 213.285156 C 1000 53.488281 940.460938 0 783.335938 0 Z

像这样的圆圈：

M0,500a500 500 0 0 0 1000 0a500 500 0 0 0-1000 0

圆从点x:0开始，y:500: M0,500

在 x 和 y 轴上的半径均为 500：a500 500

逆时针运行：a500 500 0 0 0 1000 0

svg{width:200px;}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1000 1000" version="1.1">
<defs>
<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="3.475598" y1="1.1821" x2="102.7784" y2="1.1821" gradientTransform="matrix(10.07021,0,0,10.07021,-35.000003,-11.90396)">
<stop offset="0" style="stop-color:rgb(49.803922%,0%,100%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(88.235294%,0%,100%);stop-opacity:1;"/>
</linearGradient>
</defs>
<g id="surface1">
  
  
<path id="kk" style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M0,500a500 500 0 0 0 1000 0a500 500 0 0 0-1000 0
                                                                    
 M 581.554688 288.144531 L 652 288.144531 L 425.09375 711.855469 L 343.601562 711.855469 M 671.117188 356.039062 L 671.210938 288.625 L 896.488281 466.210938 C 896.164062 487.175781 896.808594 511.339844 896.488281 532.304688 L 671.210938 709.894531 L 671.390625 641.867188 L 856.292969 499.550781 Z M 143.707031 499.550781 L 328.609375 641.867188 L 328.789062 709.894531 L 103.511719 532.304688 C 103.191406 511.339844 103.835938 487.175781 103.511719 466.210938 L 328.789062 288.625 L 328.882812 356.035156 Z M 143.707031 499.550781 "/>
  
  
  
</g>
</svg>

Answer 2

我建议保留初始 <path> 并定义一个新的变体（<symbol>) of it that uses clip-path 以隐藏角落...

我所做的更改：

初始 SVG 不再可见。它只包含图标的定义变体。变体定义为 <symbol> 个标签。
一个变体引用了原点 <symbol>：<use href="#icon"/> 自定义样式。
在您的页面中，您可以参考（和显示）图标变体：
```
<svg class="icon">
  <use href="#icon"/>
</svg>
```
我缩小了你的图标 <path> 以使其更具可读性。

.icon {
  width: 100px;
}

<!-- Icon Definition (invisible) -->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <symbol id="icon" viewBox="0 0 1000 1000">
    <defs>
      <linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="3.475598" y1="1.1821" x2="102.7784" y2="1.1821" gradientTransform="matrix(10.07021,0,0,10.07021,-35.000003,-11.90396)">
        <stop offset="0" style="stop-color:rgb(49.803922%,0%,100%);stop-opacity:1;"/>
        <stop offset="1" style="stop-color:rgb(88.235294%,0%,100%);stop-opacity:1;"/>
      </linearGradient>
    </defs>
    <path style="stroke:none; fill-rule:nonzero; fill:url(#linear0); pointer-events: bounding-box;" d="M783 0 209 0C56 0 0 53 0 213L0 789C0 944 56 1000 209 1000C209 1000 628 1000 783 1000C938 1000 1000 944 1000 789C1000 634 1000 213 1000 213C1000 53 940 0 783 0ZM582 288 652 288 425 712 344 712 582 288M671 356 671 289 896 466C896 487 897 511 896 532L671 710 671 642 856 500ZM144 500 329 642 329 710 104 532C103 511 104 487 104 466L329 289 329 356ZM144 500"/>
  </symbol>

  <symbol id="iconCircle" style="clip-path: circle(50%);">
    <use href="#icon"/>
  </symbol>
</svg>

<!-- Icon Demo -->
<div style="display: flex; flex-direction: column; flex-wrap: wrap; max-height: 170px;">
  <!-- Default icon -->
  <span>Default</span>
  <svg class="icon">
    <use href="#icon"/>
  </svg>

  <!-- ClipPath circle icon -->
  <span>clip-path: circle(50%)</span>
  <svg class="icon">
    <use href="#iconCircle"/>
  </svg>


  <!-- Hover me icon -->
  <span>:hover clip-path: inset(0 0 0 0 round 50%)</span>
  <svg class="icon">
    <style>
      .iconTransform {
        cursor: pointer;
        transition: clip-path .18s ease-out; 
        clip-path: inset(0 0 0 0 round 15px);
      }

      .iconTransform:hover {
        clip-path: inset(0 0 0 0 round 50%);
      }
    </style>
    <use class="iconTransform" href="#icon"/>
  </svg>
</div>

如何制作我的 svg 图像圆圈，该圆圈目前是方形的，半径很无聊

How to make my svg image circle which is currently square with bored radius

svg

vector

graphical-logo

更多信息：