搜索 - 腾讯云开发者社区-腾讯云

文章/答案/技术大牛

发布

来自专栏阮一峰的网络日志
SVG 图像入门教程
<svg width="300" height="180"> <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width :5" /> </svg> 上面代码中，<line>标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式。 animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> </rect> </svg> 上面代码中 ="60" /> <circle r="5" cx="270" cy="0" /> <g class="y axis"> <line x1="0" y1="0" x2= "0" y2="120" /> <text x="-40" y="105" dy="5">$10</text> <text x="-40" y="0" dy="5">$80<
2.5K10发布于 2018-08-09
来自专栏grain先森
前端-SVG 图像入门教程
<svg width="300" height="180"> <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width :5" /> </svg> 上面代码中，<line>标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式。 1、M：移动到（moveto） 2、L：画直线到（lineto） 3、Z：闭合路径 2.9 <text>标签 <text>标签用于绘制文本。 <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> </rect> </svg> text> </g> </g> </svg> 五、参考书籍 1、Jon McPartland, An introduction to SVG animation 2、Alexander
3K30发布于 2019-03-29
来自专栏林德熙的博客
win10 uwp 显示SVG win2d 使用 svg
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg ="2" stroke-miterlimit="10" x1="11" y1="11" x2="16" y2="16"/> </g> </svg> 我们开始使用Image，但是没有显示于是网上有一个库安装Mntone.SvgForXaml，安装win2d 1.11.0 我们上面那个代码就是svg，我们使用ViewModel绑定，绑定内容是SvgDocument 自然我们需要写一个字符串去转换 x2=""16"" y2=""16""/> </g> </svg> "; Svg=SvgDocument.Parse(str); } 然后我们在我们的界面 /UWP/tree/master/uwp/src/ScalableVectorGraphic win2d 使用 svg 现在 win2d 支持 svg 1.1 ，直接在 win2d 使用svg请看下面代码
1.6K10发布于 2018-09-18
来自专栏HTML5学堂
SVG - 创建SVG图片
SVG - 创建SVG图片 HTML5学堂：之前在绘图中使用到了SVG以及Canvas，因此决定最近将绘图类的知识和大家分享一下。从研究角度来说，SVG比Canvas要难很多。今天先来说说SVG的基本知识以及创建SVG的基本方法。 2、与像素无关，可以放大或者缩小，甚至打印成任意大小，图片质量不会改变。创建SVG图片方法1：使用外部引入SVG的方式 SVG是一个以.svg结尾的文本格式的文件，可以将这个文件以普通图片的方式嵌入到DOM当中。 > 方法2 在HTML中直接使用SVG SVG - 示例demo <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <g
5K80发布于 2018-03-12
来自专栏码客
SVG绘图-SVG.js
前言本文是在SVG.js 3.0的前提上，和2.x的API不一致。 { SVG } from '@svgdotjs/svg.js' 简单示例 <! () // 创建使用该方法 var draw = SVG() var draw = SVG().addTo('#drawing') // 这个方法只能获取不能创建 var rect = SVG('#myRectId move(0, 70) .fill("#ffe7f4") .stroke({ width: 1, color: "#f883c9" }); // 矩形 var r2 // 线 var line = draw .line(0, 0, 100, 60) .move(0, 410) .stroke({ width: 2,
7.3K71编辑于 2021-12-05
来自专栏HTML5学堂
SVG - 基本的SVG属性
SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。 line - 直线拥有四中基本属性 x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束 demo <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" stroke = "black" stroke-width = "3"/> polyline - 折线 points
5.1K170发布于 2018-03-12
来自专栏踏浪的文章
SVG
直线 - line元素 <line x1="10" x2="50" y1="110" y2="150"/> 直线需要定义起点与终点即可： x1：起点x坐标。 y1：起点y坐标。 x2：终点x坐标。 y2：终点y坐标。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成：”0 0, 1 1, 2 2”。每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成：”0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。
6.9K40发布于 2019-07-31
Svg批量转ico软件离线操作转换使用教程
Svg批量转ico软件是应广大用户要求研发一款可以离线将多个Svg矢量图转换成ico图标格式，先看截图使用方法如下：（1）将含有svg格式文件的文件夹拖拽到列表，软件自动识别导入列表（2）设置分辨率
31910编辑于 2025-07-18
【教程】svg文字动画效果 - 路径加载+加粗渐显
转出来的svg，使用vscode打开，path标签的路径，从上到下和illustrator相反，所以需要挨个进行删除并预览，进行排序。代码内容介绍 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 120"> xmlns指定了 SVG 的命名空间，确保浏览器能够正确解析 SVG 元素。 viewBox定义了 SVG 的视口范围，这里是从(0, 0)到(750, 120)，决定了 SVG 内部图形的显示区域和比例。
44910编辑于 2025-07-03
来自专栏Czy‘s Blog
SVG基础
SVG基础 SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML，用于描述二维矢量图形的一种图形格式。 DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg standalone="no"意味着SVG文档会引用一个外部文件，此处是DTD文件。第2和第3行引用了这个外部的SVG DTD。该DTD位于http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd，该DTD位于W3C，含有所有允许的svg元素。 svg代码以<svg>元素开始，包括开启标签<svg>和关闭标签</svg>，这是根元素，可以通过width和height属性可设置此SVG文档的宽度和高度，version属性可定义所使用的SVG版本，
3.3K20发布于 2020-08-27
来自专栏码客
SVG绘图
前言图形 SVG <svg id="test_1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width :1"> <rect x="10" y="10" width="100" height="40" rx="20"/> </g> </svg> SVG中 width/height 是图形的宽内部元素的定位也是相对于svg的。 > <body> <svg xmlns="http://www.w3.org/2000/svg" id="m_svg" xml:space="preserve = document.getElementById("m_svg"); m_svg.setAttributeNS(null, "onmousemove", "moveElement(evt
2.8K30编辑于 2021-12-05
来自专栏杰的记事本
SVG字体比IconFont更好用(SVG Sprite)
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg Just call it svg-defs.svg or something. -- all the paths and shapes and whatnot for this icon --> <g> <g id="shape-icon-2"> <! You’d think you could do: svg.shape-version-2 .targetting-a-path { fill: red; } But that doesn’t work Ideally you’d use the “hat” selector to break that: svg.shape-version-2 ^ .targetting-a-path { fill
3.7K60发布于 2019-09-04
来自专栏Zkeq
Vue | 使用 SVG sprite loader 来引入 svg
但是我们现在在用的是 Vue 官方的代码是这样的 // webpack >= 2 { test: /\.svg$/, loader: 'svg-sprite-loader', options : { ... } } // webpack >= 2 multiple loaders { test: /\.svg$/, use: [ { loader: 'svg-sprite-loader ('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录 // config.module // .rule('svg-sprite (svg)(\?.*)? 而且每次都要写 <svg><use /></svg> 好麻烦，我们可不可以把它封装成一个组件呢？引入整个 svg 目录？
4K20编辑于 2022-09-20
来自专栏王金龙的专栏
svg.js教程及使用手册详解（一）
　　　做毕设的时候，因为要使用到画图和自定义动画，所以接触到了SVG。网上关于SVG和Canvas的对比很多，具体的辨析这里就不赘言。网上关于SVG的所谓教程基本上都是SVG本身，但是却没有一个针对svg.js这样的集成的SVG库进行具体讲解的教程，做这件事的，本文应该是第一篇，也是给那些需要动态的使用SVG的兄弟们一点帮助。简介： SVG.js是一个轻量级的JavaScript库，允许你轻松操作SVG和定义动画。如下： var draw = SVG('canvas').size('100%', '100%') 检测浏览器对SVG的支持度在使用svg.js之前，可以先用以下的代码来检测浏览器对svg.js这个库的支持情况 ) ]]> </script> </svg> 今天说了svg.js的简介，检测支持度，创建svg，viewbox等内容，下面将持续更新svg.js的其他方法的用法，敬请关注！
9.3K20发布于 2019-02-25
来自专栏知道一点点
SVG初识
://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0 );stroke-width:2" /> </svg> 2，一个圆 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx ="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> ? 50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg> ? invite_code=3o2gu4wiqq68k
2K20发布于 2018-09-12
来自专栏子曰五溪
Using SVG
保存的时候，可以在duihua对话框里面选择SVG选项。完整的参考可以看SVG 介绍。这里选SVG 1.1就可以了。 ? 当点击'OK'或者'SVG Code...' 使用内联(inline)SVG 在保存SVG的时候可以获取SVG的代码（也可以直接在文本编辑器里面打开SVG文件），直接把SVG的代码复制到HTML里面： HTML <body> <! 比如在SVG代码里面可以加上一个滤镜： SVG <svg ...> ... </svg> 在<object> SVG里使用外部样式可以在SVG文件开头的<svg>标签前面引入： HTML <? -- base64 --> data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL... <!
3K20发布于 2019-06-24
来自专栏柠檬先生
SVG 使用
SVG 在html 中常用的方法 1.使用元素来嵌入SVG图像 <img src=”http://www.w3school.com.cn/svg/rect1.svg” width=”300″ /> 2.将SVG图像作为背景图像嵌入 background: url(‘http://www.w3school.com.cn/svg/rect1.svg’) no-repeat; 3.使用svg元素线<line> <line x1=”0″ y1=”0″ x2=”300″ y2=”300″ style=”stroke:rgb(99,99,99);stroke-width:2″/> 解释：(x1,y1 )为线条的开始坐标；(x2,y2)为线条的结束坐标。 curveto C三次贝塞尔曲线 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) S光滑三次贝塞尔曲线 S x2 y2, x y (or s dx2
3.1K90发布于 2018-01-22
来自专栏企鹅号快讯
SVG之旅：SVG的图层和渲染顺序
其实在SVG中，他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。 SVG渲染顺序从上面的代码中可以看出，在文本编辑器里编写SVG代码就可以绘制出所需要的图形。那么SVG中绘制过程有自己的基本原则：解析顺序和绘制顺序一致，都要遵守XML中元素的位置排列。绘制处理过程可以用下图简单的来描述：不过在绘制SVG时，有一些细节需要注意：解析SVG文档时，忽略DTD验证：虽然是 DTD 是 XML 解析的标准验证方式，但是很多工具制作的 SVG，DTD 会缺失这种 SVG 的存在，一般是设计师通过 Photoshop 编辑图片后，再导入 Sketch 中生成的 SVG。如果你对这个系列的教程感兴趣的话，欢迎持续关注后续的更新。下一节，我们将学习SVG中的坐标系统。SVG的坐标系统相关的知识重要哟。
8.1K60发布于 2018-02-28
来自专栏王金龙的专栏
svg.js教程及使用手册详解（二）
上篇简要介绍了svg.js的基本信息和基本用法，这篇开始详细讲解svg.js的用法。 SVG元素 SVG元素主要包括各种形状、线条、文本、路径。路径——Path var path = draw.path('M10,20L30,40') 实际上svg.js中Path的使用方法跟SVG的Path的使用方法是一样的。 = horizontal lineto(H X)：画水平线到指定的X坐标位置 V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置 C = curveto(C X1,Y1,X2, Y2,ENDX,ENDY)：三次贝赛曲线 S = smooth curveto(S X2,Y2,ENDX,ENDY) Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY 原文链接：http://www.jinlongtalk.com/2017/02/21/svg-js2/
7K51发布于 2018-08-24
来自专栏mySoul
SVG基础知识 Adobe Illustrator绘制SVG
如下 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <polygon points="0,10 5,2 5,7 10,0 ="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <polyline points="0,10 5,2 5,7 10,0" fill="none " stroke="black"/> </svg> 效果如下 [2.png] 其中填充为非零绕数原则路径 path类似于笔的路径其拥有一个属性d，该属性d由下方的单词的首字母组成。 path d="M1,3 A2,2 0,0,1 5,3 A2,2 0,0,1 9,3 Q9,6 5,9 Q1,6 1,3 Z "/> </svg> 没看懂。完美的ai和html的一次结合一个svg.js框架 http://svgjs.com/ 使用该svg.js框架可以快速的操纵svg
3.3K50发布于 2018-10-13

第 2 页第 3 页第 4 页第 5 页第 6 页第 7 页第 8 页第 9 页第 10 页第 11 页

点击加载更多

SVG 图像入门教程

前端-SVG 图像入门教程

win10 uwp 显示SVG win2d 使用 svg

SVG - 创建SVG图片

SVG绘图-SVG.js

SVG - 基本的SVG属性

SVG

Svg批量转ico软件离线操作转换使用教程

【教程】svg文字动画效果 - 路径加载+加粗渐显

SVG基础

SVG绘图

SVG字体比IconFont更好用(SVG Sprite)

Vue | 使用 SVG sprite loader 来引入 svg

svg.js教程及使用手册详解（一）

SVG初识

Using SVG

SVG 使用

SVG之旅：SVG的图层和渲染顺序

svg.js教程及使用手册详解（二）

SVG基础知识 Adobe Illustrator绘制SVG

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐