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

文章/答案/技术大牛

发布

来自专栏阮一峰的网络日志
SVG 图像入门教程
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle" cx="5" cy="5" r= "4"/> <use href="#myCircle" x="10" y="0" fill="blue" /> <use href="#myCircle" x="20" y="0" fill= <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 <svg width="350" height="160"> <g class="layer" transform="translate(60,10)"> <circle r="5" cx= <g class="y axis"> <line x1="0" y1="0" x2="0" y2="120" /> <text x="-40" y="105" dy="5">$10
2.5K10发布于 2018-08-09
来自专栏林德熙的博客
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 ="10" x1="0" y1="32" x2="10" y2="32"/> <line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit ="10" x1="11" y1="11" x2="16" y2="16"/> </g> </svg> 我们开始使用Image，但是没有显示于是网上有一个库Mntone.SvgForXaml，https ""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""0"" y1=""32"" x2=""10"" 参见：http://igrali.com/2015/12/24/how-to-render-svg-in-xaml-windows-10-uwp/ 代码：https://github.com/lindexi
1.6K10发布于 2018-09-18
来自专栏grain先森
前端-SVG 图像入门教程
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle" cx="5" cy="5" r ="4"/> <use href="#myCircle" x="10" y="0" fill="blue" /> <use href="#myCircle" x="20" y="0" Date |Amount -----|------ 2014-01-01 | $10 2014-02-01 | $20 2014-03-01 | $40 2014-04-01 | $80 <svg width="350" height="160"> <g class="layer" transform="translate(60,10)"> <circle r="5" cx class="y axis"> <line x1="0" y1="0" x2="0" y2="120" /> <text x="-40" y="105" dy="5">$10
3K30发布于 2019-03-29
来自专栏HTML5学堂
SVG - 创建SVG图片
SVG - 创建SVG图片 HTML5学堂：之前在绘图中使用到了SVG以及Canvas，因此决定最近将绘图类的知识和大家分享一下。从研究角度来说，SVG比Canvas要难很多。今天先来说说SVG的基本知识以及创建SVG的基本方法。 SVG的支持程度 IE8-以及Android 2.3默认浏览器是不支持SVG的对SVG的基本理解可以把SVG想象成类似于HTML的图形，可以与其他浏览器技术，如JavaScript、CSS、DOM无缝集合创建SVG图片方法1：使用外部引入SVG的方式 SVG是一个以.svg结尾的文本格式的文件，可以将这个文件以普通图片的方式嵌入到DOM当中。 <object data="XXX.svg" type="image/svg+xml" /> SVG文件的编辑 <svg version="1.1" baseProfile="full" xmlns="
5K80发布于 2018-03-12
来自专栏码客
SVG绘图-SVG.js
{ SVG } from '@svgdotjs/svg.js' 简单示例 <! stroke({ width: 1, color: "#f883c9" }); // 矩形 var r2 = draw .rect(100, 60) .radius(10 .stroke({ width: 1, color: "#f883c9" }); // 红心 var p1 = draw .path( "M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" ) .move(0, 320) stroke({ width: 1, color: "#f883c9" }); </script> <style> body { margin: 0; padding: 10px
7.3K71编辑于 2021-12-05
来自专栏HTML5学堂
SVG - 基本的SVG属性
SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。属性定义笔触颜色的透明度（合法的范围是：0 - 1） CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1） rx 和 ry 属性可使矩形产生圆角 demo <rect x="60" y="10 " rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> circle
5.1K170发布于 2018-03-12
来自专栏踏浪的文章
SVG
SVG简介可缩放矢量图形(Scalable Vector Graphics，简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法)。 SVG使用可以直接使用svg 可以使用img标签引用svg 可以在HTML中使用svg 可以作为背景图片使用SVG画图矩形 - rect元素 <rect x="10" y="10" width=" 30" height="30"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> 这个元素有6个控制位置和形状的属性，分别是：直线 - line元素 <line x1="10" x2="50" y1="110" y2="150"/> 直线需要定义起点与终点即可： x1：起点x坐标。 y1：起点y坐标。 x2：终点x坐标。中间的字母的意思： M：moveTo M10 10 L：lineTo L10 10 H：H draws a horizontal line H 90 V：V draws a vertical line
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 " y="10" width="100" height="40" rx="20"/> </g> </svg> SVG中 width/height 是图形的宽/高 viewBox="0 0 300 > 两侧为圆形的矩形 <rect x="10" y="10" width="100" height="40" rx="20" style="fill:#d2fae3;stroke:#82eeb5 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"/> </g> 组相同样式的图形或者需要一起添加事件可以用 <g style="fill:#d2fae3;stroke:#82eeb5;stroke-width:1"> <rect x="10" y="10" width="100" height="40"
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. ': ['svgs/*.svg'], } } } }, In the output file, svg-defs.svg, each icon (whatever paths and "icon shape-codepen"> <use xlink:href="/images/svg-defs.svg#shape-codepen"></use> </svg> This does SVG wins this one.
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初识
优势： SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 SVG 4，一个五角星 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/> </svg> 5，折线 <svg d="M75,20 a1,1 0 0,0 100,0" /> </defs> <text x="10" y="100" style="fill:red;"> <textPath xlink :href="#path1">I love SVG I love SVG</textPath> </text></svg> ?
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 ...> ... 如果想要通过CSS控制SVG，但是又想避免内联SVG的弊端，可以在<object>里面使用SVG。 </svg> 在<object> SVG里使用外部样式可以在SVG文件开头的<svg>标签前面引入： HTML <?
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元素 Opera 32+ svg sprites svg sprites类似于css sprites，将各个svg合并在一起。实践中我们可以把整块的svg放在head头部，因此可以在一处地方更新svg即可，而不是让svg的代码块散落在文档的各个地方。 <head> <meta charset=”utf-8″ /> <title>svg</title> <svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg
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的使用方法是一样的。 ENDY)：映射 A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线 Z = closepath()：关闭路径图片——Image 当需要在SVG 下一篇将持续更新svg.js中引用元素的方法，也即控制画布上的元素进行动画操作的方法，敬请期待！原文链接：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 /svg> Lineto 该执行从画笔的起点到位置绘制一条直线 [3.png] <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100 在adobe ai中生成svg 使用adobe ai 生成svg文件创建一个画板 [9.png] 选择字符 [10.png] [11.png] 添加字体 [12.png] 转曲 [13.png] [14 完美的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 图像入门教程

win10 uwp 显示SVG win2d 使用 svg

前端-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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐