大数跨境
首页
>
SVG 缺失的圆角特性2
>
0
0

SVG 缺失的圆角特性2

SVG 缺失的圆角特性2 Very Good Graphics
2024-05-07
2
导读：VGG 能通过简单的声明式来实现需要 HTML 和 CSS 编码才能做的设计还原。

SVG 实现圆角的局限性

在上篇分享中，我们聊到了 SVG 设计中的一个有趣话题：url="" imgdata="null" data-itemshowtype="0" tab="innerlink" data-linktype="2">如何为矩形添加圆角以及实现独立圆角矩形的挑战。我们了解到，尽管在设计软件中添加圆角轻而易举，但将这一设计使用 SVG 代码实现时，却面临着一系列挑战。


今天，我们将在此基础上进一步深入，探讨 SVG 在处理非矩形图形元素时面临的圆角实现挑战及其解决方案，尤其是对于由路径构成的复杂图形。
line-height: 1.6em;text-align: justify;margin: 0px;text-indent: 0em;">

SVG 中为路径构成的复杂图形添加圆角

在 SVG 中，圆角化由路径构成的复杂图形是一个技术挑战。这涉及到将构成 <path> 元素的顶点转换成圆角，从而创建出具有圆滑过渡的曲线形状，而非简单的直线或折角。为了更直观地理解在 SVG 中为开放路径图形添加圆角的过程，下面提供了一个简单的示例。

由路径构成的开放路径图形

示例图使用 Figma 制作

<svg width="239" height="159" viewBox="0 0 239 159" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 123.5L51.5 30.5L92.5 153.5L146.5 1C149.833 34.5 157.5 104.5 157.5 104.5C157.5 104.5 181.167 65.5 192.5 44.5L237 108.5" stroke="#FF6600" stroke-width="3"/></svg>

由路径构成的开放路径图形的 SVG 代码

圆角开放路径图形

示例图使用Figma制作

<svg width="239" height="100" viewBox="0 0 239 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 88.5L40.5533 16.0665C44.6817 8.31006 56.089 9.26692 58.8676 17.6028L83.2988 90.8965C86.3082 99.9245 99.0357 100.043 102.212 91.0722L131.556 8.20392C135.122 -1.86714 150.001 -0.091437 151.132 10.5323C152.236 20.8981 153.344 31.2046 154.32 40.2328C155.346 49.7319 167.756 52.4491 172.615 44.2224C176.53 37.5947 180.725 30.4197 184.57 23.6949C188.271 17.224 197.53 16.7343 201.786 22.8545L237 73.5" stroke="#FF6600" stroke-width="3"/></svg>
圆角开放路径图形的SVG代码

我们可以从上面的 SVG 代码中看到，为 SVG 中的 <path> 元素添加圆角并不是一个直接的过程。这是因为标准的 <path> 元素不提供直接添加圆角的属性或方法。相反，我们必须使用 SVG 路径命令来模拟圆角效果。具体来说，可以通过以下步骤实现：

1、使用 M 命令（moveto）来移动到路径中的特定点。

2、使用 Q 命令（quadratic Bézier curve）或其他贝塞尔曲线命令（如 C 表示三次贝塞尔曲线）来创建圆角曲线，从而将直线段转换为平滑的圆弧。

通过这些命令，开发者可以精确控制路径的轮廓，从而实现所需的圆角效果。

SVG 其他属性实现圆角的局限性

SVG 2.0 规范引入了 stroke-linecap 和 stroke-linejoin 属性，为线条和多边形的样式提供了更多定制选项。stroke-linecap 的 round 选项可以模拟线条端点的圆角效果，而 stroke-linejoin 的 round 选项则可以模拟线条连接处的圆角外观。这些属性可以在视觉上产生圆润的边缘，为图形添加平滑的过渡效果。

引入了 stroke-linejoin 属性实现的开放路径图形

示例图使用 Figma 制作

<svg width="239" height="156" viewBox="0 0 239 156" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 124.5L51.5 31.5L92.5 154.5L146.5 2C149.833 35.5 156.7 103.1 157.5 105.5C158.3 107.9 181.167 66.5 192.5 45.5L237 109.5" stroke="#FF6600" stroke-width="3" stroke-linejoin="round"/></svg>

引入了 SVG stroke-linejoin 属性实现的开放路径图形代码

然而，重要的是理解 stroke-linejoin 属性并不直接在图形的几何形状上创建真实的圆角效果。相反，它通过改变路径的渲染方式来实现圆角的外观。具体来说，当 stroke-linejoin 设置为 round 时，它会在路径中相邻线段的连接处生成一个圆形过渡，从而在视觉上形成圆角效果。

需要注意的是，stroke-linejoin 属性并不接受一个具体的 radius 值来定义圆角的大小。它不是用来指定圆角半径的，而是通过改变渲染算法来模拟圆角的外观。因此，stroke-linejoin="round" 并不直接控制圆角的具体尺寸，而是提供了一种在路径拐点处创建圆滑过渡的方法。
对于需要精确和复杂圆角的设计，开发者通常需要手动操作 SVG 的 <path> 元素。传统 SVG 在模拟圆角时存在限制，特别是在视觉效果和设计灵活性方面，因为这些圆角不是基于真实几何形状，导致在缩放或高分辨率显示时精确性不足。此外，对于非直线路径，如曲线和贝塞尔曲线，SVG 的模拟属性不适用，限制了其应用。手动编辑 <path> 元素对于不熟悉 SVG 路径语法的用户来说具有挑战性，且即使是经验丰富的开发者也可能觉得代码冗长且难以维护。任何微小的数值调整都可能导致路径数据的显著变化。

为了更直观地理解这一点，以下是一组调整圆角数值的示例，展示了如何通过手动编辑 <path> 元素来精确控制圆角的大小和形状。

<svg width="239" height="139" viewBox="0 0 239 139" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 113.5L48.216 26.67C49.4545 24.343 52.8767 24.6301 53.7103 27.1308L89.7397 135.219C90.6425 137.927 94.4607 137.963 95.4136 135.272L142.017 3.66118C143.087 0.639866 147.527 1.16361 147.856 4.35184C150.643 31.3738 154.71 68.8971 156.542 85.7234C156.852 88.5729 160.58 89.4029 162.056 86.9457C168.837 75.6558 181.695 54.0744 190.16 38.7783C191.243 36.8216 194.009 36.6703 195.286 38.5064L237 98.5" stroke="#FF6600" stroke-width="3"/></svg>

开放路径顶点的圆角数值为3时的SVG代码

<svg width="239" height="117" viewBox="0 0 239 117" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 99.5L43.8373 20.8966C46.7272 15.467 54.7123 16.1368 56.6573 21.9719L86.0592 110.178C88.1657 116.497 97.075 116.58 99.2985 110.301L136.039 6.54275C138.535 -0.506986 148.932 0.73309 149.716 8.17054C151.622 26.2459 153.728 45.7905 155.269 60.0008C155.989 66.65 164.69 68.5672 168.11 62.82C173.9 53.0922 181.072 40.9087 186.984 30.4505C189.553 25.9082 196.021 25.564 199 29.8482L237 84.5" stroke="#FF6600" stroke-width="3"/></svg>

开放路径顶点的圆角数值为7时的SVG代码

<svg width="239" height="100" viewBox="0 0 239 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 88.5L40.5533 16.0665C44.6817 8.31006 56.089 9.26692 58.8676 17.6028L83.2988 90.8965C86.3082 99.9245 99.0357 100.043 102.212 91.0722L131.556 8.20392C135.122 -1.86714 150.001 -0.091437 151.132 10.5323C152.236 20.8981 153.344 31.2046 154.32 40.2328C155.346 49.7319 167.756 52.4491 172.615 44.2224C176.53 37.5947 180.725 30.4197 184.57 23.6949C188.271 17.224 197.53 16.7343 201.786 22.8545L237 73.5" stroke="#FF6600" stroke-width="3"/></svg>

开放路径顶点的圆角数值为10时的SVG代码

调整开放路径顶点的圆角数值（从上至下）：3；7；10


 VGG: 简化复杂图形的圆角设计

VGG Specs 采用了一种与 SVG 不同的路径描述方式，它通过声明式地定义所有曲线控制点（curve points），简化了路径的表述，减少了用户在理解和实现时的难度。与传统 SVG 中基于命令式的路径描述相比，VGG Specs 的这种方法更为直观和简洁。

VGG Specs 为创建和调整圆角提供了一种高效的解决方案，它针对不同类型的图形元素设计了灵活的圆角设置方法。

对于矩形图形，VGG Specs 引入了一个 radius 字段，允许开发者通过数组为每个顶点单独指定圆角半径。这种设计简化了圆角的设置，并且提升了灵活性，因为可以为每个顶点应用不同大小的圆角。

对于由 <path> 元素定义的复杂图形，VGG Specs 进一步细化了控制，为每个曲线控制点提供了 radius 字段，接受浮点数值以精确定义每个圆角的半径。这样的设计使得开发者能够对路径图形的每个圆角进行精细调整，实现高度精确的视觉效果。此外，VGG Specs 也适用于多边形图形，如三角形或五角形。它不仅提供了 radius 字段以设置统一的圆角半径，还允许通过曲线控制点（curve points）分别为图形中每个顶点的圆角设置不同的半径，从而满足了多样化的设计需求。

通过这些改进，VGG Specs 显著提升了图形设计的效率和质量，同时降低了技术门槛，使得开发者能够更加专注于创意和设计的实现。

例如，若要为 <path> 元素的顶点添加圆角，只需指定一个像素值至 radius 属性，如 radius="10"。这种方法不仅大大简化了圆角的创建过程，而且使得调整圆角大小变得直观而简单——只需更改 radius 属性的数值即可实现。

使用VGG 快速实现的开放路径的圆角顶点图形

使用 VGG 实现的开放路径圆角代码以及为每个曲线控制点提供的 radius 字段

了解 VGG Specs 的具体属性和使用方法，可以访问 VGG Docs (https://docs.verygoodgraphics.com/specs/overview) 获取取详细信息。

此外，VGG 开源了底层引擎 VGG 运行时，具有跨平台渲染和运行能力。我们后续会出一系列内容讨论 SVG 作为矢量图形存在的问题，并展示 VGG 的图形能力以及相比于 SVG 的优点。请持续关注，也欢迎大家一起参与 VGG 开源社区的建设～

👏扫码添加小助手进交流群，欢迎社区小伙伴参与共建

预告：5月份会发布基于 VGG 的商业化产品 Daruma Plugin for Figma。欢迎对 Design as Code 感兴趣的小伙伴报名内测，有机会获得社区大礼包，数量有限，先到先得。(添加小助手回复“内测”即可报名)

🔥 社区活动：
Design as Code｜VGG 社区邀你参加开源之夏 ，赢万元奖金



关于 VGG

VGG（VeryGoodGraphics）是新一代跨平台应用开发解决方案。VGG 倡导 Design-as-Code 的理念，让开发者可直接基于设计稿编程，快速将设计原型交付为可交互的应用。
特性一：无代码完美还原设计稿
VGG 自研的开源图形引擎能渲染出高保真设计稿中的任意细节，可直接将设计稿作为用户界面，省去前端与客户端开发者使用代码去复原设计稿的开发工作，降低他们与设计师之间的沟通摩擦成本。
特性二：原生跨平台、嵌入式支持已有开发框架
VGG 通过完全或者部分嵌入的方式，支持在任意一种已有的 APP 基础上进行增量式开发，主持主流平台与框架。
特性三：脚本与 WebAssembly 支持
VGG 还同时支持平台无关的 JS 脚本与 WebAssembly 模块，在提供快速业务逻辑开发能力的同时支持高性能计算。
特性四：高度的生态兼容性
VGG 提供的 SaaS 服务目前已实现对主流设计生态的兼容（Figma/Sketch/Adobe Illustrator），并提供 Figma 插件帮助设计稿快速同步。将来还计划为开发者提供开发辅助工具，打通从应用 UI 设计到应用研发的完整流程。
  • GitHub：https://github.com/verygoodgraphics
  • 官网：https://verygoodgraphics.com/
  • 博客：https://blog.verygoodgraphics.com/

【声明】内容源于网络
0
0
Very Good Graphics
VeryGoodGraphics 开源社区旨在探索矢量图形能力在 UI 开发上的无限可能，目前已发布国产矢量图形格式（VGG）、矢量图形渲染引擎以及各平台 SDK。
内容 17
粉丝 0
Very Good Graphics VeryGoodGraphics 开源社区旨在探索矢量图形能力在 UI 开发上的无限可能，目前已发布国产矢量图形格式（VGG）、矢量图形渲染引擎以及各平台 SDK。
总阅读4
粉丝0
内容17