如何在HTML5中使用SVG

 我来答
huanglenzhi
推荐于2016-02-05 · 知道合伙人数码行家
huanglenzhi
知道合伙人数码行家
采纳数:117538 获赞数:517194
长期从事计算机组装,维护,网络组建及管理。对计算机硬件、操作系统安装、典型网络设备具有详细认知。

向TA提问 私信TA
展开全部
  SVG 即 Scalable Vector Graphics,是一种用来绘制矢量图的 HTML5
标签。你只需定义好XML属性,就能获得一致的图像元素。

  使用SVG之前先将标签加入到HTML
body中。就像其他的HTML标签一样,你可以为SVG标签为之添加ID属性。也可以为之添加css样式,例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。你可以用height="100px"
width="200px" 为其添加高度和宽度。

  现在就将SVG元素加入到我们HTML代码中,SVG提供很多绘图形状,例如线条、圆、多边形等。

  SVG线条:

  SVG线条用标签定义,在此标签内你还可以定义其他的属性。

  该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后,可以为之添加一些样式,在style属性中使用“stroke:Green;”为线条指定颜色。同样你也可以用stroke-width:2为线条设置宽度。
  SVG画圆:

  SVG提供了一种不同的标签来画圆。正如你看到的下面代码,circle有个id为myCircle。为了定义圆的中心以及半径,使用cx="55"
cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D"
stroke-width="2"定义圆周线条颜色和宽度。
  SVG矩形:

  同样的使用标签来画矩形,我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽,使用
fills 属性定义填充颜色。用 strock 定义边框。还有一点需要注意,我用 fill-opacity="0.5" stroke-opacity="0.5"
为 stroke 和 filling 都添加了透明度。
  SVG椭圆:

  我们同样是用标签来绘制椭圆。设置其 id="myEllipse" ,给定起中心坐标 cx="120"cy="60",长轴短轴半径 rx="100"
ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208;stroke:black;stroke-width:3"。
  SVG多边形:

  我们使用特定标签绘制多边形,points属性用来定义多边形的几个顶点,用左边对来定义,形如 points="10,10 75,150 150,60"
,这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样,用
style="fill:#63BCF7;stroke:black;stroke-width:3" 定义多边形填充颜色、边框以及边框宽度。
  
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具,它提供了4种AI制作PPT的方式,包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT,一站式集成多种AI生成PPT的方式,可满足办公用户的不同需求和使用场景。ai生... 点击进入详情页
本回答由博思aippt提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式