登录注册

SVG

24 引用 • 73 回帖 • 474 浏览

参与讨论

关注

关注分享

变形

2 引用 • 7 回帖
生成

4 引用 • 40 回帖
图标

14 引用 • 63 回帖
设计

115 引用 • 797 回帖 • 1 关注
忍不住

1 引用 • 12 回帖
Painter

14 引用 • 31 回帖
矩形

1 引用 • 2 回帖

默认热议好评优选最近回帖关注者查看所有标签

Twitter 看到的一款 SVG 自定义图标开源项目
项目 [图片] tabler/tabler-icons A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects. - tabler/tabler-icons GitHub - gith ..

317 4 年前
又一款开源图标库 CSS.GG，值得一用
嗨，我是 Martin，也叫老王，今天推荐一款好用的开源图标库。我们平常找图标往往会去 iconfont [图片] 但是今天，我们看了 Martin 的文章之后，就会有一个新的选择——CSS.GG [图片] Github https://github.com/astrit/css.gg star 5751 fork ..

294 4 年前
会说话的数据—— D3.js 折腾小记
原文载于我的博客：https://old-panda.com/2019/02/05/d3js-histogram/ 我一个写后端代码运维服务器的，怎么就去搞前端数据可视化了呢？接触 D3.js 纯属机缘巧合，但既然现在的工作跟数据打交道，数据的可视化总是不可避免的，学了总没什么坏处。由于是前端小白，所以不可避免的会掉 ..

461 5 年前
周六学会做高清 svg 图标之后，就停不下来了
[图片] [图片] 周六学会做高清 svg 图标之后，就停不下来了。之前做的 svg 放到产品上就会变得模糊，原因是作图是没有做好规范，显示的时候没有等比例缩放（显示的时候一般是 16·16px）。现在作图是建一个 1024·1024px 的画布，横竖用参考线分割成 16 个间隔，每隔间隔就是 64px。这样做出来的 ..

542 6 年前
svg 图片为什么没法展示?
symphony 中的 svg 图片为什么没法展示? [图片]

423 7 年前
为什么使用 SVG 可以提升网页性能和体验
前段时间发现 github 不再使用 icon font，用 SVG 取而代之，于是进行了各种猜想：SVG 可以有多颜色？节省请求？避免字体文件没有加载完成时出现方框？虽然 sym 也开始使用了 SVG，但是具体原理还没有研究清楚（怎么替换 icon font？如何批量修改？），只能先在区域的图标上和 logo 上小范 ..

3.1K 7 年前
如何使用 SVG 做图标
好吧，不的不说太久没写文章了，都不知道自己在忙些啥，感觉最近又 get 了一些新技能，很想和大家分享一下。感觉很久以前，应该是 2010 年左右，在 svg 和 canvas 之间，我鄙视了一把 svg，可是如今我却不得不去学习它。真是世事难料，就好比有人花了 2K 个比特币买了个 SVG Sprite 背景在 [ ..

2.2K 7 年前
Inkscape 开源 SVG 软件介绍
Inkscape 介绍官方网站：[链接] 翻译原文：[链接] 下载地址：[链接] Inkscape 是什么? Inkscape 是一个可以运行在 Windows、Mac OS X 和 GNU/Linux 系统上的专业的优质的矢量图形软件。它用于世界各地的专业设计人员和业余人员创建插画、图标、商标、图表、地图和网页 ..

996 7 年前
绘画板 12——变形 (上)
github 地址： [链接] DEMO 地址： [链接] 变形既然实现了拖拽效果，就可以在此基础上，实现另一个效果：变形。 HandlerBorder 在实现变形效果之前，先讲解一下 HandlerBorder。这是在 pick 时，选中元素后，在元素周围出现的 4 个黑框。现在将其扩展为 8 个黑框，拖拽黑框， ..

462 8 年前
绘画板 06——铅笔与自定义鼠标图标
github 地址： [链接] DEMO 地址： [链接] 自定义鼠标图标可以通过 css 设置 cursor 的方式指定鼠标图标样式 | default | 默认光标（通常是一个箭头） | | auto | 默认。浏览器设置的光标。 | | crosshair | 光标呈现为十字线。 | | pointer | 光 ..

401 8 年前
绘画板 10——多选元素
github 地址： [链接] DEMO 地址： [链接] 多选元素原理在选择按钮状态下，可以绘制一个曲线矩形，遍历所有元素判断，如果当前元素在矩形的坐标范围内，则元素被选中。矩形四个点的坐标范围为 x,x+width,y,y+height 变更 element click 事件选择元素时，需要触发元素选中事件 ..

291 8 年前
绘画板 09——自定义右键菜单
github 地址： [链接] DEMO 地址： [链接] 自定义右键菜单使用开源的 jquery 插件 [链接] 实现自定义右键菜单的效果。插件内容比较简单，方便进行二次开发和定制。插件的设计思路主要是基于 jquery，监听 contextmenu 事件，并 append 自定义的 div 菜单列表。新增 ..

334 8 年前
绘画板 03——选中元素
github 地址： [链接] DEMO 地址： [链接] 为了针对某个元素进行操作，增加了一个选中操作的按钮。点击此按钮后，鼠标变为手指选择，滑动到元素上方时，元素特殊显示，单击后即为选中状态。首先，增加一个全局的状态位，判断选择按钮是否被选中 SVG.isPicked = function(){ return $ ..

237 8 年前
绘画板 02——抽象并实现图形绘制功能
github 地址： https://github.com/wangyuheng/painter DEMO 地址： http://painter.crick.wang/ 针对上个版本的基础代码进行抽象和封装将所有的图形绘制工具，都“继承”一个 DrawTool 工具类，在此工具类中绑定、解绑事件，代码如下 (func ..

746 8 年前
绘画板 01——实现绘制矩形功能
svgjs 本身提供了绘制图形的函数。为了实现鼠标点击、绘制的功能，需要监听鼠标事件 mousedown 修改绘画状态位，开始画图 mousemove 修改图形大小，绘制图形 mouseup 修改绘画状态位，结束画图拓展了一个函数，获取鼠标点击时相对画布左上角的相对坐标根据 svgjs 提供的函数，将图形的透明度 ..

284 8 年前
绘画板 00——为什么用 svg
提到画图，现在的首选印象可能是 canvas，但在技术选型上，为什么选择了 svg 而弃用 Canvas？ svg 为矢量图，Canvas 基于像素，依赖分辨率 Canvas 发生变化时，整个场景都会重新绘制 svg 以 dom 形式，方便进行数据传递与通信（结构过度复杂可能会导致性能下降） svg 支持事件处理器 ..

286 8 年前
领域和LOGO用的svg图标是怎么生成的
数据还没弄完，忍不住更新了下程序，发现图标都用 svg 了，真会玩。。。

775 8 年前
NetBeans 时事通讯（刊号 # 279 - Apr 08, 2014）
[图片]现在的 netbeans.org 瞬息万变。为了帮助您快速的获得最新消息，一个由志愿者组成的团队会每周收集与 NetBeans 相关的时事通讯，包括文章，教程，重要事件等等。刊号 # 279 - Apr 08, 2014 项目新闻插件：SVG 截图这个插件提供了一个操作来创建一个运行 NetBeans 平 ..

364 10 年前
绘画板 08——删除与清屏
github 地址： [链接] DEMO 地址： [链接] 删除 GlobalStatus 增加 isRecycle()方法，用来判断删除按钮是否被点击 isRecycle: function(){ return $('#tool_delete').hasClass('active'); }, 在 Element 扩展 ..

368 8 年前
绘画板 11——拖拽
github 地址： [链接] DEMO 地址： [链接] 拖拽使用 svgjs 官方推荐的拖拽插件 [链接] 实现元素的拖拽效果暴露了 4 种事件监听 beforedrag dragstart dragmove (you can call preventDefault on this one) dragend 可 ..

326 8 年前
绘画板 07——图层移动
github 地址： [链接] DEMO 地址： [链接] 图层移动 svgjs 提供了图层移动的方法，实现方式如下 , forward: function() { var i = this.position() + 1 , p = this.parent() // move node one step forward ..

236 8 年前
绘画板 13——变形 (下)
github 地址： [链接] DEMO 地址： [链接] 变形变形这部分代码比较多，所以分为上下两部分。在(上)中已经实现了左侧中间点的变形操作。但是一共有 8 个操作点，为了避免混乱，抽离 handle.border.listener.js 提供 8 个点的变形方法。 y 轴移动之前左侧中间点的操作可以视为 x ..

227 8 年前
绘画板 05——设置图形边框颜色与背景色（喷枪）
github 地址： [链接] DEMO 地址： [链接] 边框与背景色首先，使用了开源的 [链接] 作为颜色选择器，之前以 SVG 对象保存全局方法与对象，现在通过新定义一个 GlobalStatus，存在全局属性，并通过按钮状态判断状态 var GlobalStatus = { defaultFontColor ..

301 8 年前
绘画板 04——增加操作框（矩阵变化）
github 地址： [链接] DEMO 地址： [链接] 针对元素进行操作时，如果采用更改边框颜色的形式，会和修改边框冲突。所以采用增加 4 个操作边框的形式，既能表示元素被选中，又能在后续增加拖拽，变形等操作。增加了一个 HandleBorder 类，并扩展其 prototype 属性对象，增加方法 create ..

225 8 年前