SVG中的边框半径答案

【问题标题】：Border radius in SVGSVG中的边框半径
【发布时间】：2021-02-10 10:22:13
【问题描述】：

我有以下 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>

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

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

【问题讨论】：

您可以参考this 或this 学习如何使用SVG 绘制弧线。

标签： html svg

【解决方案1】：

我不确定是否有办法在 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>

【讨论】：

【解决方案2】：

不要使用文本编辑器来执行此操作。使用像 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 的位置不正确，绿色和深绿色区域的顶部不匹配：

但是在 sn-p 中这是不可见的，因为该区域不在视图框内。这是使用 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>

【讨论】：