SVG中的常用标签

最新推荐文章于 2023-05-22 22:41:03 发布
最新推荐文章于 2023-05-22 22:41:03 发布
阅读量1.2k 收藏
点赞数
分类专栏： linux应用程序之-web前端（html js css）


以下六个标签是最常用的，相对简单一些的：

 

1）line ： 直线

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>


代码解释：
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

 

 

2）polyline ： 折线

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

 

3）rect ： 矩形

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>

</svg>

 

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色

x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）

CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）

rx 和 ry 属性可使矩形产生圆角。

 

4）circle ： 圆形

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

 

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

r 属性定义圆的半径。

 

5）ellipse ： 椭圆形

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

</svg>

 

cx 属性定义圆点的 x 坐标
cy 属性定义圆点的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

6）polygon ： 多边形

 

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

</svg>

 

points 属性定义多边形每个角的 x 和 y 坐标

 

 

 

 

 

 

 

 

 

 

 

 

 

---------------------------------------------------------------------------

一天一天过去了，第三天我想通了 ... ...  

bingqingsuimeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 SVG彩色金字塔动画特效
04-25
HTML5 SVG彩色金字塔动画特效是一款echarts基于canvas制作的圆形酷炫的旭日图表标签分类统计实例。
基于SVG的矢量图形库Kity.zip
07-17
Kity 是一个基于 SVG 的矢量图形库，帮助你快速在页面上创建和使用矢量元素。 面向对象的接口风格在 Kity 里，所有图形，以及交换的数据，都是以强类型的对象出现的，可以非常方便地使用和拓展它们。 丰富的图形Kity 内置了的图形，包括矩形、圆形、椭圆、多边形、自动曲线、直线、正多边形、星形、饼、环、旋转形等等，还有最强大的 Path 工具，可以绘制任意矢量图形 强大的填充能力Kity 对颜色加强了支持，不仅能随意使用 RGB 或 HSL 进行颜色的配置，还支持调色板的定义和使用。Kity 同时支持渐变和纹理的使用，可以让矢量元素更加生动丰富。 完善的坐标变换能力在 Kity 中，对图形进行平移、旋转、缩放等变换是非常简单的。而且，这些变换的综合结果还可以获取，用于图形学的一些计算。 灵活的动画支持Kity 内置了一个灵活的动画引擎，你可以使用该引擎方便灵活地创建和使用动画。动画创建的时间线还可以进一步控制：暂停、停止、循环等。同时提供最底层的动画接口，让你有完全的动画能力。 必不可少的事件处理对于需要创建交互的应用来说，事件是必不可少的。Kity 允许你在图形上绑定各种各样的事件，并且可以帮你精确的计算事件发生的坐标（你还可以指定坐标系）。这个是非常重要的，不是吗？ 文本支持Kity 在文本的支持上下了苦工，你可以方便地定位文本和设置文本的样式。你还可以使用路径文本，让一个文本沿着指定的路径排列。 滤镜支持Kity 支持最常用的 SVG 滤镜，而且为您预留了接口，可以快速拓展。 强大的图形学支持这个在图形应用当中也是非常重要的。在 Kity 中，你可以轻松获取图形在指定坐标系下的区域，支持区域的合并、变换操作。Kity 同时对贝塞尔曲线和路径提供了很多有用的工具，比如切割、求字段、求补间等。 开始使用 要开始使用 kity，你需要先在页面中引用 kity.min.js： // 引用本地的 kity 库 [removed][removed] // 使用 git 的 CDN 服务引用 [removed] [removed] 然后，你就可以在任何的元素上创建 kity 的画布： [removed]     var paper = new kity.Paper('kity_paper');     var rect = paper.put(new kity.Rect());     var text = paper.put(new kity.Text());     text.setContent('hello kity!');     text.fill('white');     text.setX(100);     text.setY(200);     rect.setBox(text.getBoundaryBox().expand(-15, -10, 15, 10));     rect.setRadius(5);     rect.fill('blue');[removed] 更详细的使用方法请参考 wiki。 标签：Kity
芯码云标-云标签-标签打印软件
最新发布
01-11
云标签是一套企业级的条码标签协同应用SaaS云平台，为企业构建统一的赋码、打标、用码的工具集；包含PC、Web、APP、小程序等多种使用端口，实现一个账号，多端登录使用，同时支持企业/团队多用户共享设计打印。云标签封装自主研发的LaaS标签即服务引擎，通过开放API标准接口，可实现从第三方ERP或平台接入打印数据，云端、桌面、移动任意打印，为企业客户或第三方软件提供PaaS调用服务。 一、软件特点 1、在线设计：云端交互式设计，所见即所得的效果 1）标签设计器：统一的标签模板设计器，图形界面布局，5分钟快速上手；可在流览器、PC端、小程序、APP四种运行环境，共享协同设计； 2）丰富的组件库：提供文本、线条、形状、表格、图片、一维码、二维码等全套组件元素 各组件可任意搭配、叠放、拖拽位置、尺寸缩放、旋转角度； 3）公共图标库：预置了多达近千种的免费图标，采用SVG格式，无损缩放、高清打印 涉及认证标志、安全警示、物流仓储、服装水洗等近20类常用标识。
基于Svg的图表组件库KCharts.zip
07-18
KCharts是基于Svg的图表组件库，兼容IE6 等主流浏览器。基于淘宝js框架KISSY的图表组件库，包含折线图、曲线图、柱状图、散点图、饼图、地图等常用图表。采用kissy的模块加载器，实现按需加载，支持cdn动态合并。KCharts 基于RaphelJs开发，大量的html css实现了基础grid，流畅的动画，丰富的demo，还有实用的图表在线生成器（Chart Generator），方便初学者实用。 标签：KCharts
(7)SVG中所用到的形状简介------线条
webcenterol
07-06 98
&lt;line&gt; 标签 &lt;line&gt; 标签用来创建线条。 请把下面的代码拷贝到记事本，然后把文件保存为 "line1.svg"。把此文件放入您的 web 目录： &lt;?xml version="1.0" standalone="no"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
SVG基本用法
qq_40858865的博客
09-26 378
SVG svg是一种语言，这种语言用来描述二维图形和绘图使用。svg是存粹的XML。（什么是XML） 一个简单的 SVG 文件的例子 &lt;?xml version="1.0" standalone="no"?&gt; //对xml声明，standalone该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。 //standalone="no" 意味着 SVG 文档会引用一个外部...
svg学习笔记
S_B_Girl的博客
12-28 357
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="b
学习笔记——SVG-line标签及其外观轮廓属性
qq_41339126的博客
04-27 919
学习SVG标签及其属性
SVG基础用法
͏⁠͏͏⁠͏ ͏⁠͏
05-16 7819
SVG基础用法
js时钟带文本标签月份和星期
04-25
js时钟带文本标签月份和星期是一款基于css3 animation属性和SVG制作点击按钮圆形进度条加载动画特效。
【SVG】svg入门
qq_45801837的博客
11-22 2714
svg图和其他png图的区别： svg图片上的每一个小的组成元素都是一个标签，由一个大的svg标签包裹作为一个整体 普通的png图片，就是作为一个整体，只能修改宽高大小等样式，不能修改细节 一、标签属性 1、SVG：可缩放矢量图（Scalable Vector Graphics） 2、可直接插入网页，成为DOM元素，通过js和css描绘图形，也可以使用src和url导入 3、svg标签属性 1、width、height：如果不指定这两个属性，默认是宽：300px，高：150px 2、viewBox(左上
SVG 形状元素（rect、circle、ellipse、line、polyline、polygon、path）
司马懿的西山居
11-25 1万+
SVG有一些预定义的形状元素 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 矩形 <rect> <rect> 用于创建 矩形 和 圆角矩形 （x，y）是矩形左上角坐标，默认是（0，0） （width，height）是矩形的宽度和高度 （rx，ry）是矩形圆角的水平半径和垂直半径 <s
SVG文档语法结构
热门推荐
calm_agan的专栏
04-25 1万+
<br />SVG 语法结构说明<br />文档说明<br />版本<br />日期<br />作者<br />说明<br />1.0<br />2006.1.29<br />很少想起你<br />第 1 页 共 23 页<br />SVG 语法结构说明<br />SVG语法结构<br />一、SVG文档结构格式（为了方便说明，在文中加入标号和冒号；为了方便阅读，加了超链接）：<br />1: <?xml version=“1.0” encoding=“UTF-8” standalone=“no”?><br
SVG中line标签的使用以及其外观属性的运用
百度一下 猎人社区
04-28 1432
Scalable Vector Graphics (SVG)是一种基于XML的标记语言，用于描述二维矢量图形。与像素图（例如JPEG或PNG）不同，矢量图形不会失真或变得模糊，无论它们被放大或缩小到多大的尺寸，都能保持清晰。SVG允许我们在网站上优雅地显示可伸缩的矢量图形，这是一种非常有用的技术，可以使网站看起来更美观，并且可以改善每个用户的体验。line标签是SVG提供的一种基本图形元素，它用于在SVG文档中创建线段。通过定义x1、y1、x2和y2属性，我们可以指定线段的起点和终点。
SVG绘制图形常用标签
qq_43569821的博客
04-14 301
矩形 圆形 椭圆 线 折线 多边形 路径
HTML 页面插入 SVG的三种方式
xiting_tick的专栏
02-03 3090
SVG 文件可通过以下标签嵌入 HTML 文档： 、 或者 。 三种把 SVG 文件嵌入 HTML 页面的不同方法。 使用 标签 标签被所有主流的浏览器支持，并允许使用脚本。 注释：当在 HTML 页面中嵌入 SVG 时使用 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 。任何 HTML 规范中都没有 标
SVG在前端中的常见应用
Fulling的博客
05-22 3943
SVG在前端中的常见应用 一、svg标签 1. svg 2. g 二、描边属性 三、模糊和阴影效果 1. 模糊 2. 阴影效果 四、线性渐变和径向渐变 1. 线性渐变 2. 径向渐变 五、绘制 1. 内置形状元素 2. 绘制矩形 3. 绘制圆形 4. 绘制椭圆 5. 绘制线条 6. 绘制多边形 7. 绘制多线条 8. 绘制文本 9. 绘制路径
SVG 详解（二）基本概念
青岑的博客
04-02 4157
SVG 实例 // 一个 SVG 文件 &lt;?xml version="1.0" standalone="no"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt; &lt;svg width="1
vue3 svg加载不显示
01-05
然后在模板中使用`<svg-icon>`标签来显示SVG图像。 以下是使用`vue-svg-icon`插件的示例代码： 首先，安装`vue-svg-icon`插件： ``` npm install vue-svg-icon ``` 然后，在Vue应用中注册该插件： ```js import...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值