AI 摘要：本文是 Josh W. Comeau 撰写的一篇关于 SVG（可缩放矢量图形）的入门教程，旨在为读者提供 SVG 的基础知识和实用技巧。文章从 SVG 的基本概念入手，介绍了其作为图像格式的独特之处（如基于 XML 的语法和与 DOM 的无缝集成），并深入探讨了 SVG 的基本形状、缩放机制、表现属性以及动画效果。通过详细的代码示例和互动演示，作者展示了如何利用 SVG 创建动态插图，并结合 CSS 和 JavaScript 实现交互效果。文章还提到作者正在开发的动画课程，邀请读者关注后续更新。

Joshwcomeau

A Friendly Introduction to SVG • Josh W. Comeau

SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously…

AI 摘要：本文内容涵盖了前端开发的最新动态、技术技巧和资源分享。文章重点介绍了 CSS 自定义高亮 API、表单控件样式的未来改进、ARIA 辅助技术的使用、TypeScript 的 satisfies 关键字、SVG 滤镜效果等多个技术话题。此外，还分享了有趣的项目、工具以及作者对代码注释和工作恐惧的思考，旨在为读者提供有价值的行业资讯和学习资源。

Stefanjudis

Web Weekly #162

The CSS Custom Highlight API, new ways to style form controls, and things to know about ARIA.

AI 摘要：本文详细介绍了如何使用 Framer Motion 和 React 创建一个带有 Gooey 效果的搜索交互组件。作者受到动态岛动画的启发，将 Gooey 效果应用于搜索栏，打造了一个小型但有趣的交互体验。教程涵盖了 Gooey 效果的实现、SVG 滤镜的应用、Framer Motion 的集成、搜索状态管理、动画效果的优化以及针对 Safari 浏览器的兼容性处理，旨在激发开发者创意并提供实用指导。

1. Gooey 效果的创建：
• 介绍了 Gooey 效果的起源，基于 Lucas Bebber 的文章 The Gooey Effect。
• 通过调整 SVG 滤镜中颜色矩阵的 alpha 通道值，实现自定义的 Gooey 效果。
• 提供了具体的代码示例，展示了如何使用 feGaussianBlur 和 feColorMatrix 创建滤镜效果。

2. 应用 Gooey 效果：
• 在主组件中通过 CSS 将 SVG 滤镜应用到父元素上。
• 提供了简单的代码结构，展示滤镜如何与 DOM 元素结合。

3. Framer Motion 集成：
• 使用 Framer Motion 为搜索栏添加动态动画效果，定义了四种状态（初始状态、搜索激活、搜索结果、加载中）来管理交互逻辑。
• 使用 AnimatePresence 组件实现搜索结果的集体展示和个体动画效果。
• 详细解释了 getResultItemVariants 和 getResultItemTransition 函数，用于控制搜索结果项的动画效果（如缩放、位移、模糊效果）。
• 动画设计注重细节，例如通过索引计算延迟实现顺序动画，并使用弹簧动画（spring）增加流畅性。

4. Safari 兼容性挑战：
• 提到 WebKit 对 SVG 滤镜的限制，作者通过 isUnsupported 布尔值对 Safari 浏览器进行了动画调整。
• 强调了兼容性问题的长期存在，并提供了针对性的解决方案。

AI 摘要：本文涵盖了前端开发的多个热门话题和技术更新，包括 CSS 滚动驱动动画、Web 机器人检测技术、Web 可访问性、Astro 5.10 发布、Firefox 140.0 新功能，以及多种 CSS 技术和工具资源。文章通过教程、工具介绍和行业动态，为前端开发者提供了丰富的学习和实践资源。

1. CSS 滚动驱动动画指南 - Saron Yitbarek
• 介绍了如何使用 CSS 的 scroll() 和 view() 函数实现滚动驱动动画，无需 JavaScript。
• 提供了代码示例，展示如何创建进度条或将元素动画效果引入视口。
• 强调了可访问性和运动敏感性考虑。
2. Web 机器人与检测技术简史 - OlegWock
• 概述了 Web 机器人与检测技术之间的“猫鼠游戏”。
• 探讨了机器人演变、IP 声誉、指纹识别、无头浏览器漏洞、代理检测、CAPTCHA 和行为分析等技术。
3. Astro 5.10 发布
• 重点介绍了 Astro 的响应式图片功能已正式上线。
• 新增实验性实时动态内容获取功能，并改进了 CSP 支持。
4. Firefox 140.0 新功能与更新
• 介绍了 Firefox 最新版本新增的垂直标签功能。
• 支持自定义高亮 API 和 SVG fetchpriority 属性等。
5. 简讯（IN BRIEF）
• JSON 模块脚本现已作为 Baseline 新功能可用。
• Mozilla 更新了 Firefox 插件政策，将于 8 月生效。
• 2025 年 CSS 状态调查仅剩一周时间完成。
6. 文章、观点与教程
• CSS 中的 Liquid Glass 设计 - Pup Atlas：实现了 Apple 的 Liquid Glass 设计语言，但兼容性较差，属于有趣的实验。
• Chrome 137 中 CSS if 函数初探 - Sunkanmi Fafowora：探讨了该函数的语法、工作原理及与其他属性的结合应用。
• CSS 层级、BEM 与工具类：特异性控制 - Victor Ayomipo：分析 CSS 特异性问题，避免使用 !important 标记。
• JPEG 如何成为互联网图像标准 - Ernie Smith：回顾 JPEG 格式 30 年来的历史及影响。
• 实现内联文档查看器的经验教训 - Anjali Munasinghe：分享项目实施中的经验。
• 使用 Three.js、GSAP 和 Web Audio API 编码 3D 音频可视化器 - Filip Zrnzevic：技术实现教程。
7. 工具、代码与资源
• Mossaik - Gabriel Perales：基于 Web 的工具，用于创建 SVG 背景，支持多种形状和自定义设置。 #svg #tools
• <syntax-highlight>：自定义元素，利用 CSS 自定义高亮 API 实现语法高亮。
• Browser MCP：连接 AI 应用到浏览器，自动化测试和任务，支持 VS Code、Claude 等工具。
• Contrast Report：WCAG 颜色对比检查工具，支持分享链接和颜色选择功能。
• Text to SVG：将文本转换为 SVG 路径的工具。
• SlimImg：浏览器内图像压缩工具。

WebKit

A guide to Scroll-driven Animations with just CSS

CSS animations have come a long way since Apple first introduced them to the web in 2007.

AI 摘要：本文详细介绍如何使用 React、TypeScript 和 Motion（原 Framer Motion）库创建一个沿着自定义 SVG 路径无限滚动的跑马灯效果。作者从基础的 SVG 路径创建开始，逐步讲解如何通过 CSS 属性 offset-path 和 offset-distance 实现路径跟随动画，并利用 Motion 库增强动画控制和交互性。文章涵盖了多元素动画、悬停和滚动速度控制、Z 轴顺序管理、CSS 属性映射以及响应式设计等高级技术，旨在帮助开发者构建复杂而流畅的网页动画效果。

"它并不完美，但平台也不是。我们依然爱它。" Jhey Tompkins 用他对于 WWDC25 中最受喜爱/最厌恶的事物——液态玻璃的演绎，满足了人们的需求。

AI 摘要：本文主要聚焦于前端开发领域的最新动态和技术更新，尤其关注 WWDC25 带来的 Safari 26 新特性，如 SVG 图标支持、CSS 锚点定位和滚动驱动动画等。同时，文章涵盖了其他前端技术话题，如 contrast-color() 函数、Temporal JS API、响应式图片优化等，并分享了作者对技术趋势和行业现状的个人见解。整体内容旨在为读者提供前沿技术资讯、实用技巧和有趣的资源推荐。

1. Safari 26 新特性（WWDC25 亮点）
• SVG 图标支持：Safari 终于支持 SVG 作为 favicon，标志着“favicon 乱象”的终结，尽管相比其他浏览器晚了数年。
• CSS 锚点定位：介绍 CSS anchor positioning 功能，适用于工具提示和弹出框，Chromium 和 Webkit 已支持，Oddbird 提供了 polyfill。
• 滚动驱动动画：Safari 跟进 Chromium 支持 scroll-driven animations，Firefox 部分支持，作者推荐 Bramus 的免费课程学习相关技术。
• 其他小更新：包括 JS 小幅改进、text-wrap: pretty、contrast-color()、margin-trim 和 progress() 等 CSS 新特性。
• Safari 现状反思：尽管有进步，Safari 在 Web 平台测试中仍有较多失败案例，作者质疑其是否能摆脱“新 IE”的标签。

2. 技术热点与资源
• State of CSS 调查：鼓励读者参与年度 CSS 调查以了解新趋势。
• Import Maps 更新：Shopify 推动了 import maps 规范变更，解决了模块加载和单一 map 限制问题，已在 Chromium 和 Webkit 实现。
• Contrast-color() 函数：Safari 支持该函数，但仅限于黑白对比，作者讨论其局限性并推荐相关阅读。
• Optional Chaining 争议：作者对过度使用可选链 (?.) 提出质疑，认为频繁检查属性存在性可能是代码异味。

3. 有趣项目与工具
• Internet Roadtrip：一个由 Neal 开发的公路旅行，和互联网陌生人共同决定目的地。到目前为止已行驶 3000 多英里
• Temporal JS API：Firefox 率先支持 Temporal，改善了 JavaScript 日期处理体验。
• TypeScript Prettify：介绍一个提高 TypeScript 类型可读性的技巧。
• 响应式图片优化：为响应式图像编写正确的标记是很困难的，推荐一个响应式图片 linter 工具。
• 框架渲染方式：Ryan Carniato 讲解了 React、Vue 等框架的 DOM 渲染方法。
• Text-box 属性：介绍 MDN 上的 text-box 属性，用于未来文本垂直对齐。

4. 实用技巧与工具推荐
• 预加载响应式图片：通过旧的 link 元素预加载图片的技巧。
• 三个开源项目：包括 gron（命令行工具，转换 JSON 使其易于使用 grep 等工具进行搜索）、tweety（浏览器集成终端）和 parrot.live（终端动画）。
• CSS Shape 工具：介绍一个将 SVG 路径转换为 CSS shape() 的在线工具。

Stefanjudis

Web Weekly #160

Preloading responsive images, CSS `contrast-color()` and the long-awaited `Temporal` JS API.

AI 摘要：本文由 Myriam Frisano 撰写，深入探讨了 SVG 中最强大的元素 <path> 的基础知识，重点介绍了直线和角度路径的命令。作者通过简单的示例和可视化工具，帮助读者理解 SVG <path> 元素的语法和规则，旨在让读者能够将 SVG 语义标签转化为 <path> 所能理解的语言。本文是两部分系列文章的第一篇，涵盖了直线命令的基础知识，并为后续的曲线和弧线内容奠定了基础。

1. 引言与背景：
• 介绍了 SVG 的基础知识，指出 <path> 元素虽然复杂，但却是 SVG 中最强大的元素。
• 强调 <path> 在技术绘图和数据可视化中的重要性，并建议初学者先掌握 SVG 基础元素（如 rect、line 等）再深入学习 <path>。

2. 学习前提与文章结构：
• 建议读者熟悉 SVG 的 viewBox 和基础元素语法，推荐先阅读作者之前的入门指南。
• 文章使用 JavaScript 编写代码，注重代码的可读性，通过命名坐标和简化数学计算来降低理解难度。

3. 成功设置：可视化辅助：
• 提供了一个可视化的 viewBox 网格，帮助读者理解坐标和路径命令的关系。
• 强调在 SVG 中添加文本时的可访问性问题，建议在实际项目中优先使用 HTML 渲染文本。

4. 进入 <path> 及其强大的 d 属性：
• 介绍了 <path> 元素的 d 属性，它使用特定的命令语言来定义路径形状。
• 指出非路径元素（如 line、rect）本质上是预定义的路径，而 <path> 需要开发者手动定义形状逻辑。

5. 起点命令：M：
• M 命令用于移动画笔到指定起点，仅设置位置而不绘制任何内容。
• 接受 x 和 y 坐标作为参数，是每个路径的起点。

6. 基础直线命令：M, L, H, V：
• L 命令绘制从当前点到指定点的直线，接受 x 和 y 坐标。
• H 和 V 命令分别绘制水平和垂直线，仅需指定一个坐标（另一个坐标由当前点推导）。
• 通过示例和 CodePen 演示，展示了这些命令的实际效果，并与 <line> 元素进行对比，突出 <path> 的高效性。

7. 使用 Z 命令创建多边形和折线：
• 介绍了 Z 命令，用于闭合路径，类似 <polygon> 元素的效果。
• 通过示例展示了如何使用 <path> 替代 <polyline> 和 <polygon>，并讨论了代码可读性的问题。

8. 相对命令：m, l, h, v：
• 解释了小写命令（如 m, l）表示相对坐标，相对于上一个点的偏移量。
• 通过示例对比绝对和相对命令的优缺点，指出两者各有适用场景。

9. 跳转点：复合路径：
• 介绍了复合路径的概念，利用多个 M 命令实现路径跳转，减少代码冗余。
• 示例展示了如何用单个 <path> 元素绘制网格，替代多个 <line> 元素。

10. 后续内容预告
• 预告了下一篇文章将讨论曲线和弧线命令，进一步扩展 <path> 元素的功能。
• 列举了 Smashing Magazine 上其他相关文章，涵盖 SVG 弧线、无障碍性 SVG 定制和动画等主题。

Smashing Magazine

Decoding The SVG path Element: Line Commands — Smashing Magazine

SVG is easy — until you meet `path`. However, it’s not as confusing as it initially looks. In this first installment of a pair of articles, Myriam Frisano aims to teach you the basics of `` and its sometimes mystifying commands. With simple examples and visualizations…

AI 摘要： 本期 Frontend Focus 第 696 期（2025年6月11日）聚焦于苹果 WWDC 2025 开发者大会的最新动态，特别介绍了 Safari 26 Beta 版本的新功能与改进，同时涵盖了 CSS 领域的最新技术和工具。此外，文章还提供了丰富的教程、工具和资源，内容涉及 CSS 新特性、网页打印优化、UI 组件开发等多个前端开发热点话题，旨在帮助开发者紧跟技术趋势并提升实践能力。

WWDC 2025 更新
• 主题演讲：WWDC 2025 主题演讲时长约一个半小时，内容偏向概述，开发者细节较少，可通过 The Verge 的 10 分钟精剪版快速了解，或观看更深入的 State of the Union 更新。
• Safari 26 Beta 与 WebKit 新功能：Safari 版本号从 18 跳跃至 26，与苹果操作系统版本号一致，带来了 60 多项新功能和 100 多项改进，包括 WebGPU 支持、锚点定位、滚动驱动动画等；同时提供近 40 分钟视频，详细讲解 CSS 新特性及音视频、图像、图标等媒体支持。
• 声明式 Web Push：通过 20 分钟视频讲解声明式 Web Push 的工作原理，如何基于现有标准构建通知功能，并保持向后兼容性。

文章、观点与教程
• 部分关键帧动画技巧：Josh W. Comeau 分享了创建动态、可组合关键帧动画的技巧，讲解清晰且注重可访问性。
• CSS contrast-color() 函数探讨：Daniel Schwarz 分析该函数在 Web 可访问性方面的现状、局限性及未来改进方向。
• Scroll-Driven Letter Grid：Chris Coyier 介绍一种利用可变字体随滚动变化的技术，但受限于浏览器支持，Safari 和 Firefox 暂不支持。
• Jen Simmons 谈新 CSS 特性：WebKit 团队的 Jen Simmons 讨论声明式 Web Push、表单控件样式、排版及 contrast-color() 等新特性。
• SVG path 元素解析：Myriam Frisano 讲解 SVG <path> 元素基础及其复杂命令，附带示例和可视化内容。
• Printing the web: making webpages look good on paper：Declan Chidlow 探讨如何通过 CSS 优化网页打印效果，打造整洁易读的文档。
• 其他教程：包括快速部署个人作品集网站、HTML 弹出通知自动关闭、CSS 与 JavaScript 粘性元素代码片段等内容。

工具、代码与资源
• SF Symbols 7：苹果图标库更新至 Beta 版，新增数百符号，总数接近 7000 个。
• Astro 5.9 发布：新增内容安全策略实验支持及 Markdown 渲染辅助函数。
• Storybook 9 更新：UI 组件工具新增交互、视觉和可访问性测试功能，支持 React、Svelte 等多种框架。
• Spectral.js 颜色混合库：基于 Kubelka-Munk 理论实现更接近颜料混合的颜色过渡效果。 #color
• 其他工具：包括 Smooothy 滑块组件、Fulldev UI 内容驱动网站组件库、SmoothUI 动画组件等。

AI 摘要：本文详细探讨了如何通过 CSS 和 SVG 技术解决渐变背景中常见的 banding（色带）问题。作者回顾了过去复杂的解决方案，并提出了一种更优的方法，即使用 SVG 滤镜和位移映射（displacement map）技术来创建颗粒状渐变效果，同时避免改变原始渐变的颜色属性。文章还讨论了当前方法的局限性以及未来改进的可能性，例如使用 filter() 函数直接对渐变背景应用滤镜，并通过多个示例展示了颗粒效果在不同场景中的应用。

1. 引言与问题背景：文章首先介绍了渐变背景或渐变蒙版中常见的 banding 效应，通过示例图片直观展示了这一问题，强调了解决此问题的必要性。
以往解决方案的不足：
• 增加渐变停止点（Easing）：通过添加更多颜色停止点来缓解 banding，但作者认为此方法不够理想。
• 叠加噪声层：早期方法通过伪元素叠加渐变层和噪声层并混合，但这种方法复杂且效果不佳。
• 改进后的叠加方式：后续尝试通过透明渐变末端显示噪声层，但仍存在复杂性和颜色失真的问题。
• SVG 滤镜初步尝试：作者在第二段视频中提出使用 SVG 滤镜生成噪声并叠加到渐变上，但仍不满意此方案。
• 叠加噪声与渐变的核心问题：所有叠加方法都会改变原始渐变的亮度、饱和度等属性，降低噪声透明度则会减少颗粒效果，影响解决 banding 的效率。

2. 更优解决方案：位移映射
• 原理说明：使用噪声层作为位移映射，通过 RGBA 通道值决定渐变像素在 x 和 y 轴上的偏移，避免直接叠加噪声改变颜色。
• 代码实现：通过 SVG 滤镜（feTurbulence 和 feDisplacementMap）生成噪声并应用位移效果，详细解释了滤镜参数和 CSS 布局处理。
• 问题修复：解决滤镜应用后边界内透明像素和边界外不透明像素的问题，使用 feBlend 和滤镜区域限制（或 clip-path）来优化结果。

3. 当前方案的问题与临时解决方案：
• 滤镜影响整个元素：滤镜会影响元素的所有内容（如文本、阴影），导致不希望看到的效果。
• 解决方法：通过伪元素分离渐变背景并应用滤镜，避免影响其他内容，提供了具体的 CSS 代码实现。

4. 未来改进方向：
• 使用 filter() 函数：提出直接对背景渐变应用滤镜的理想方法，简化代码，但目前仅 Safari 支持，呼吁其他浏览器实现此功能。
• 应用场景扩展：特别提到在蒙版渐变（如径向渐变蒙版）中应用颗粒滤镜的潜力，并讨论了跨浏览器兼容性问题和临时替代方案。

5. 更多示例：
• 颗粒状图像阴影：展示如何通过复杂滤镜创建颗粒状阴影效果，解决阴影边缘的 banding 问题。
• 颗粒状图像渐变淡出：通过位移半透明边缘像素实现颗粒状淡出效果。
• 噪声渐变圆盘：利用 SVG 径向渐变和滤镜创建独特的颗粒效果。
• 动画渐变发光边框：在流行的渐变发光边框中应用颗粒效果，提升视觉效果。
• 颗粒状 CSS 背景：通过多层线性渐变模拟网格渐变，并应用颗粒滤镜解决 banding。
• 颗粒状 SVG 背景：通过叠加不同形状和渐变填充的 SVG 元素，模糊并应用颗粒滤镜，创造抽象背景效果。

Josh Dillon continues an electrifying exploration of glitch animation in UI with this set of radio buttons. Make sure to visit Josh's collections for more.

Mike Bespalov (@bbssppllvv):
It’s 3AM and I just recreated @Apple Liquid Metal right in the browser. No JavaScript. No WebGL. Just raw HTML + CSS.

Let me know if you want the code

AI 摘要：本文详细介绍了如何在 Next.js 应用中导入和使用 SVG 文件，探讨了多种方法及其优缺点，旨在帮助开发者在 2025 年的技术环境中更高效地处理 SVG 资源。文章从基础导入方式到高级优化技术，提供了全面的指南，特别指出了使用 next/image 组件的局限性，例如无法直接设置 SVG 的填充颜色等问题，并给出了相应的解决方案。

LogRocket Blog

How to import SVGs into your Next.js apps: A 2025 guide - LogRocket Blog

This article explores the different methods you can use to import and use SVGs in a Next.js application.

AI 摘要：本文探讨了在现代化网页设计中重新审视图像映射（Image Maps）技术的可行性。作者通过为艾美奖作曲家 Mike Worth 设计复古风格网站的项目，对比了传统图像映射与 SVG 结合现代 CSS/HTML 技术的优劣，最终提出了一种更灵活、可访问且响应式的替代方案。

1. 项目背景与设计挑战
• 为作曲家 Mike Worth 设计具有 90 年代复古风格的网站，需兼顾现代技术标准（可访问性、响应式等）。
• 目标：避免简单模仿，而是通过现代代码实现复古的“表达性设计”（expressive design）。

2. 90 年代网页设计回顾
• 典型案例：华纳兄弟《空中大灌篮》（1996）网站，任天堂、Cheestrings 等品牌的主页设计。
• 特点：图形化导航、品牌与内容融合，但依赖表格切片或图像映射技术。

3. 图像映射技术分析
• 基础语法：通过 <map> 和 <area> 定义图像可点击区域，支持圆形、矩形、多边形坐标。
• 优点：轻量、无需 JavaScript、语义化（配合 ARIA）、跨浏览器兼容。
• 缺点：绝对坐标难以响应式适配，缺乏视觉反馈，维护成本高。

4. 实际应用尝试
• 为 Mike 的网站设计交互式地图，初期尝试图像映射：
• 使用工具生成坐标（如 PathToPoints 转换 SVG 路径）。
• 通过 JavaScript 动态缩放坐标以实现响应式。
• 局限性：无法实现不规则形状悬停效果，代码冗余。

5. 现代替代方案：SVG 内联锚点
• 在 SVG 中创建透明路径作为可点击区域。
• 内嵌 <a> 标签包裹路径，支持悬停动画和丰富内容（如图片、文字预览）。
• 优势：原生响应式（基于 viewBox）、视觉反馈灵活、易于维护。

6. 设计哲学总结
• 图像映射虽曾重要，但现代项目需权衡工具适用性。
• 核心目标：用当代技术（SVG/CSS）复现 90 年代设计的表达力，同时保障性能与可访问性。

CSS-Tricks

Revisiting Image Maps | CSS-Tricks

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

AI 摘要：本文探讨了如何使用 CSS 和 SVG Filter ( feGaussianBlur ) 创建带有圆角的三角形框，并分享了作者在优化 CSS 选择器性能过程中的经验与教训。

AI 摘要：本文介绍了一种使用 CSS 和 SVG 滤镜为任意形状添加圆角的技巧，通过结合 clip-path 和 SVG 滤镜实现复杂形状的平滑圆角效果，并讨论了该技术的应用场景与浏览器兼容性问题。

AI 摘要：文章揭示了CSS直接控制SVG圆形半径的可行性，解决了多文件同步维护的痛点，但指出相关浏览器支持文档的缺失，呼吁更清晰的标准化信息。

1. SVG圆形半径（r）可通过CSS设置
• 作者发现可以通过CSS的r属性直接设置SVG圆形的半径，且在现代浏览器（Firefox、Chrome、Edge、Safari）中均有效，但未找到明确的官方文档支持。
• 此功能可能源自SVG2草案，但浏览器支持情况未在常见资源（如MDN、CanIUse）中提及。

2. 应用场景：动态进度条动画
• 作者通过CSS变量（如--radius）计算圆的周长（--circumference），结合stroke-dasharray和stroke-dashoffset实现圆形进度条的动画效果。
• 关键代码逻辑：
• 通过半径计算周长（circumference = 2πr）。
• 根据百分比动态调整stroke-dashoffset，控制进度条显示比例。
• 旋转圆形使动画从顶部开始（默认从右侧开始）。

3. 开发痛点与解决方案
• 问题：原本需在SVG代码和CSS中分别定义半径，存在维护风险（如修改遗漏导致不一致）。
• 发现：通过CSS直接设置r属性可统一管理半径值，减少代码冗余。

4. 未解决的问题
• 浏览器对SVG2特性的支持范围尚不明确，缺乏权威文档参考，需依赖实际测试验证。