Question

我有以下SVG：

<svg
                                        id="Capa_1"
                                        enable-background="new 0 0 80 70"
                                        height="64"
                                        width="64"
                                        viewBox="0 0 512 512"
                                        xmlns="http://www.w3.org/2000/svg"
                                      >
                                        <g>
                                          <g>
                                            <path
                                              d="m256 470-195-131.976v-380.024h390v380.024zm180-140.003h.293z"
                                              fill="#00C7B2"
                                            />
                                          </g>
                                          <path
                                            d="m256 480 195-131.976v-380.024h-195z"
                                            fill="#00957A"
                                          />
                                        </g>
                                      </svg>

我想使边界变圆或设置边界半径。像这样：

如何实现圆角效果？请调查一下。

Answer 1

请勿使用文本编辑器执行此操作。使用Inkscape之类的SVG编辑器。在这种情况下，这一点尤其重要，因为没有简单的方法可以进行<path>回合。如果这是一个盒子，那将是可能的。在Inkscape中将其打开并将拐角转换为Beziers，您可以实现以下目标：

<svg
       height="100"
       width="100"
       viewBox="0 0 1000 1000"
       version="1.1"
       id="svg4690">
      <g
         id="g4663">
        <g
           id="g4659"
           transform="translate(91.89342,225.31329)">
          <path
             d="M 256,470 61,338.024 61.42095,-0.4989023 c 0,0 -3.857948,-17.6595987 10.573732,-32.2960387 14.431681,-14.636439 34.702398,-12.24525 34.702398,-12.24525 L 354.62126,-43.308172 398.3299,-5.9441259 451,338.024 Z M 436,329.997 h 0.293 z"
             id="path4657"
             inkscape:connector-curvature="0"
             style="fill:#00c7b2"
             sodipodi:nodetypes="ccczcccccccc" />
        </g>
        <path
           d="m 347.89342,694.05631 195,-131.976 V 226.67058 c 0,0 2.47881,-17.96849 -12.88028,-31.30308 -15.3591,-13.33459 -38.72388,-11.98828 -38.72388,-11.98828 L 347.89342,182.0563 Z"
           id="path4661"
           inkscape:connector-curvature="0"
           style="fill:#00957a"
           sodipodi:nodetypes="ccczccc" />
      </g>
    </svg>

另外，请注意，原始SVG的位置不正确，绿色和深绿色区域的顶部不匹配：

但是在该代码段中这是不可见的，因为该区域不在视图框中。这是使用Inkscape的另一个很好的理由。

制作圆角的另一种方法是使用盒子。框可以通过ry属性四舍五入。这是3个具有轻度舍入，舍入和额外舍入设置的框。您只需要将它们放置在正确的位置即可。

<svg
       height="100"
       width="100"
       viewBox="0 0 1000 1000"
       version="1.1"
       id="svg4690">
      <g
         id="g4663">
        <g
           id="g4659"
           transform="translate(91.89342,225.31329)">
          <path
             d="M 256,470 61,338.024 61.42095,-0.4989023 c 0,0 -3.857948,-17.6595987 10.573732,-32.2960387 14.431681,-14.636439 34.702398,-12.24525 34.702398,-12.24525 L 354.62126,-43.308172 398.3299,-5.9441259 451,338.024 Z M 436,329.997 h 0.293 z"
             id="path4657"
             inkscape:connector-curvature="0"
             style="fill:#00c7b2"
             sodipodi:nodetypes="ccczcccccccc" />
        </g>
        <path
           d="m 347.89342,694.05631 195,-131.976 V 226.67058 c 0,0 2.47881,-17.96849 -12.88028,-31.30308 -15.3591,-13.33459 -38.72388,-11.98828 -38.72388,-11.98828 L 347.89342,182.0563 Z"
           id="path4661"
           inkscape:connector-curvature="0"
           style="fill:#00957a"
           sodipodi:nodetypes="ccczccc" />
        <rect
           style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
           id="rect4694"
           width="81.383575"
           height="81.383575"
           x="170.25067"
           y="196.41048"
           ry="8.6862621" />
        <rect
           ry="13.363494"
           y="291.82568"
           x="170.25067"
           height="81.383575"
           width="81.383575"
           id="rect4696"
           style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal" />
        <rect
           style="opacity:0.5;fill:#000000;fill-opacity:1;stroke:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:8;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:normal"
           id="rect4698"
           width="81.383575"
           height="81.383575"
           x="170.25067"
           y="386.77319"
           ry="33.007805" />
      </g>
    </svg>

Answer 2

我不确定有没有办法在HTML中舍入SVG（例如应用CSS？），但是您可以在编辑器中使用SVG进行编辑。我使用Figma进行编辑，但是我猜任何基于矢量的图形解决方案都应该可以。

<svg width="48" height="59" viewBox="0 0 48 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="19" rx="4" fill="#00C7B2"/>
<path d="M25.8629 58.0196C24.6968 58.6333 23.3032 58.6333 22.1371 58.0196L2.13714 47.4942C0.822862 46.8025 0 45.4396 0 43.9545V14C0 11.7909 1.79086 10 4 10H44C46.2091 10 48 11.7909 48 14V43.9545C48 45.4396 47.1771 46.8025 45.8629 47.4942L25.8629 58.0196ZM46.1538 45.6013H46.1899H46.1538Z" fill="#00C7B2"/>
<path d="M4.40314 5.48826C2.21424 5.48826 2.8797 5.48826 4.40314 5.48826L23.7245 0.137201C21.9918 0.617057 23.9735 0.068235 24.2199 0V58.4334C24.2199 58.4334 25 58.5 27 57.5L46 47.3743C47.3063 46.6855 48 45.1546 48 43.6696V3.99145C48 1.78704 46.2255 4.52027e-06 44.0366 4.52027e-06L24.2199 0L4.40314 5.48826Z" fill="#00957A"/>
</svg>

SVG中的边框半径

2 个答案: