Ronnie

Vue3 + TypeScript + SVG 实现酷炫、可配置的产品展示台组件，适用于数据可视化大屏项目。...

Vue3 + TypeScript + SVG 实现酷炫、发光、可灵活配置的大屏数据可视化页头组件。...

VueJS + ThreeJS + TresJS + d3.js + TypeScript 实现精致的3D饼图组件。...

SVG 也支持代码结构化、代码复用等。 本节我们介绍如何使用 `<defs>` `<g>` `<use>` 元素实现代码复用。...

上一篇：view 元素 SVG 的许多元素都支持 transform 属性，用于坐标偏移(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)等...

上一篇：SVG 视口和用户空间 <view> 元素用于显示同一个 svg 图形的不同区域。 1. 基本语法 <view> 内嵌于 <svg> 中； id 用于引用此 <vi...

上一篇：绘制 HTML 本节我们讲解 SVG 视口和用户空间的概念。 1. 什么是 SVG 视口和用户空间？ 上图中： 整个淡黄色的区域是假想的无限大的 SVG 画布，SV...

上一篇：绘制图片 本节我们介绍如何使用 <foreignObject> 在 SVG 里绘制普通的 HTML 内容。 1. <foreignObject> <foreignO...

上一篇：绘制文本 本节我们介绍如何使用 <image> 元素绘制图片。 1. <image> <image> 用于绘制光栅图片或其他 SVG 矢量图。 href 图片的 U...

上一篇：自定义形状（Custom Shapes） 本节我们介绍如何使用 <text> <tspan> <textPath> 元素绘制文本。 1. <text> (x,y) ...

上一篇：基础形状（Basic Shapes） 本节我们讲解 3 种自定义图形： <path> 可以绘制任意的形状和曲线； <polyline> 绘制折线； <polygon...

上一篇：如何使用 SVG ？ 从本节开始，我们正式讲解如何绘制 SVG。 1. 基础和自定义形状 SVG 有2种创建形状（shape）的方式： 一种是使用预定义的基础形状（...