SVG 形状元素（rect、circle、ellipse、line、polyline、polygon、path）

最新推荐文章于 2023-07-09 23:55:26 发布
最新推荐文章于 2023-07-09 23:55:26 发布
阅读量1.2w 收藏 14
点赞数 7
分类专栏： SVG 文章标签： svg
转载请注明出处——https://blog.csdn.net/chy555chy
本文链接：https://blog.csdn.net/chy555chy/article/details/53333422
版权

SVG有一些预定义的形状元素

  • 矩形 <rect>
  • 圆形 <circle>
  • 椭圆 <ellipse>
  • 线 <line>
  • 折线 <polyline>
  • 多边形 <polygon>
  • 路径 <path>

非形状元素

  • 组 <g>

矩形 <rect>

  • <rect> 标签用于创建 矩形 和 圆角矩形
  • （x，y）是矩形左上角坐标，默认是（0，0）
  • （width，height）是矩形的宽度和高度
  • （rx，ry）是矩形圆角的水平半径和垂直半径
<svg xmlns="http://www.w3.org/2000/svg">
    <!-- 普通矩形 -->
    <rect x="10" y="20" width="100" height="50" style="fill:red;stroke:black;stroke-width:2;" />
    <!-- 圆角矩形 -->
    <rect x="150" y="20" width="100" height="50" rx="10" ry="10" style="fill:red;stroke:black;stroke-width:2;" />
</svg>

这里写图片描述

矩形中的rx、ry即是椭圆的水平半径和垂直半径

以左上角为例，以（x+rx，y+ry）为圆心，rx、ry分别为椭圆水平和垂直半径画一个椭圆，正好与矩形左上角的圆角边重叠。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="10" y="10" rx="30" ry="10" width="50" height="100" style="fill:blue;stroke:green;stroke-width:5;opacity:0.9;" />
    <ellipse cx="40" cy="20" rx="30" ry="10" style="fill:red;stroke:purple;stroke-width:3;fill-opacity:0.2;stroke-opacity:0.8;" />
</svg>

这里写图片描述

圆形 <circle>

  • <circle> 标签用于创建一个圆
  • （cx，cy）是圆心坐标，默认是（0，0）
  • r 是圆的半径
<svg xmlns="http://www.w3.org/2000/svg">
    <!-- 普通圆形 -->
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    <!-- 两个圆形叠成的圆环 -->
    <circle cx="150" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    <circle cx="150" cy="50" r="30" stroke="black" stroke-width="2" fill="white" />
</svg>

这里写图片描述

椭圆 <ellipse>

  • <ellipse> 标签用于创建一个椭圆
  • （cx，cy）是椭圆中心点的坐标，默认是（0，0）
  • （rx，ry）是水平半径和垂直半径
<svg xmlns="http://www.w3.org/2000/svg">
    <!-- 普通椭圆 -->
    <ellipse cx="100" cy="50" rx="80" ry="40" stroke="black" stroke-width="2" fill="red" />
    <!-- 两个椭圆叠成圆环 -->
    <ellipse cx="300" cy="50" rx="80" ry="40" stroke="black" stroke-width="2" fill="red" />
    <ellipse cx="300" cy="50" rx="70" ry="30" stroke="black" stroke-width="2" fill="white" />
</svg>

这里写图片描述

线 <line>

  • <line> 标签用于创建一个线条
  • （x1，y1）是线条的起始坐标，默认是（0，0）
  • （x2，y2）是线条的终止坐标，默认是（0，0）
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1="30" y1="10"  x2="100" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

这里写图片描述

折线 <polyline>

  • <polyline> 标签用于创建任何只有直线的形状
  • points 属性定义折线每个点的坐标（x，y），用空格分隔每个点。points的定义形式有两种：
    • points=”x1,y1 x2,y2 ……”
    • points=”x1 y1 x2 y2 ……”
  • fill 属性和多边形的fill是一样的，填充的是首尾相连后的形状的内容
<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
            <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
            <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160 160,160" style="fill:yellow;stroke:red;stroke-width:4" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
            <polygon points="0,40 40,40 40,80 80,80 80,120 120,120 120,160 160,160" style="fill:yellow;stroke:red;stroke-width:4" />
        </svg>
    </body>
</html>

这里写图片描述

多边形 <polygon>

  • <polygon> 标签用来创建含有不少于三个边的图形。多边形是由直线组成，其形状是”封闭”的（所有的线条 连接起来）。
  • points 属性定义折线每个点的坐标（x，y），用空格分隔每个点，头尾自动相连。points的定义形式有两种：
    • points=”x1,y1 x2,y2 ……”
    • points=”x1 y1 x2 y2 ……”
  • fill 属性和折线的fill是一样的，填充的是首尾相连后的形状的内容
<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
            <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
            <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
        </svg>
    </body>
</html>

这里写图片描述

路径 <path>

  • <path> 标签用于定义一个路径。
  • d用来定义每个关键点的路径数据
  • 以下标记用来修饰路径数据，所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
    • M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
    • L = lineto(L X,Y) ：画直线到指定的坐标位置
    • H = 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 Bézier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
    • T = smooth quadratic Bézier curveto(T ENDX,ENDY)
    • A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
    • Z = closepath(Z)：关闭路径
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
    <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
    <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
    <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
    <!-- Mark relevant points -->
    <g stroke="black" stroke-width="3" fill="black">
        <circle id="pointA" cx="100" cy="350" r="3" />
        <circle id="pointB" cx="250" cy="50" r="3" />
        <circle id="pointC" cx="400" cy="350" r="3" />
    </g>
    <!-- Label the points -->
    <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
        <text x="100" y="350" dx="-30">A</text>
        <text x="250" y="50" dy="-10">B</text>
        <text x="400" y="350" dx="30">C</text>
    </g>
</svg>

这里写图片描述

组<g>

  • <g> 标签是用于把所有相关元素进行组合的容器元素，在<g>
  • id 用来设置该组的名称
  • fill 用来设置该组所有成员的默认填充颜色
  • opacity 用来设置该组所有成员的默认不透明度

共有属性

  • style 用来设置 CSS 属性
  • fill 用来设置矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  • stroke 用来设置矩形边框的颜色
  • stroke-width 用来设置矩形边框的宽度
  • fill-opacity 用来设置填充颜色透明度（范围：0 - 1）
  • stroke-opacity 用来设置笔触（边框）颜色的透明度（范围：0 - 1）
  • opacity 用来设置元素整体（包括”填充”和”边框”）的透明值（范围: 0 到 1）
福州司马懿
关注
  • 7
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SVG 矩形 – SVG Rectangle (3)
https://shixuebin.gitee.io/hexo-blog/
01-25 137
该代码示例显示您创建了一个 SVG 矩形，其左上角点位于坐标 (60,100)、width=“70” 和 height=“40”。您可以使用颜色填充矩形，使填充透明，并使用 style 属性设置笔划样式（之后系列文章补充style这部分，这一篇主要学 reat）fill:rgb(0,0,255) – 颜色以 RGB 颜色模型(rgb 值)写入。fill:#0000ff – 颜色以 RGB 颜色模型(十六进制 RGB 值)写入。如果没有设置 x 和 y 属性，则矩形的左上角放置在点 (0,0) 处。
shape2path:将 SVG 形状转换为 SVG 路径
07-24
形状2路径 将 SVG转换为 SVG。 看看。 安装 如果您使用 NPM，请npm install shape2path 。 否则，请下载。 支持 AMD、CommonJS 和 vanilla 环境。 在 vanilla 中，导出 shape2path 全局： < script src =" https://unpkg.com/shape2path@3.0.5/build/shape2path.min.js " > </ script > < script > const path = shape2path . circle ( ) . attr ( "r" , 50 ) // Paths can be configured with constants... . attr ( "cx" , d => d . cx ) ; // ...or with functions. //
HTML5(八)——SVG 之 path 详解
前端人的博客
08-09 5188
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果，我们就开始学习 path 如何应用。 一、path 路径详解 1.1、path 命令 path 用于定义一个路径，其中命令就是控制这条路径的，以下命令就是可用于路径数据： 注：以上所有命令大小写都可以，区别是大写命令表示绝对定位
kld-intersections:涵盖所有SVG形状类型的交集算法库
05-02
交叉口 一个相交算法库，涵盖以下SVG形状中的任意两个形状的所有排列： 弧线 二次贝塞尔曲线 立方贝塞尔 圆圈 椭圆 线 路径 多边形 折线 长方形 安装 npm install kld-intersections 输入 以下各节说明如何导入代码以在各种环境中使用。 节点 const { ShapeInfo , Intersection } = require ( "kld-intersections" ) ; 浏览器 < script src =" ./node_modules/kld-intersections/dist/index-umd.js " > </ script > < script > var ShapeInfo = KldIntersections . ShapeInfo ; var Intersection = KldIntersections . Inte
svg-pathdata:解析SVG PathDatas
04-02
svg-pathdata 简单有效地处理SVG路径数据（path [d]属性内容）。 用法 安装模块： npm install --save svg-pathdata 或将添加到HTML中的脚本中。 然后在您JavaScript文件中： const { SVGPathData , SVGPathDataTransformer , SVGPathDataEncoder , SVGPathDataParser } = require ( 'svg-pathdata' ) ; 使用TypeScript / ES6中的导入语法： import { SVGPathData , SVGPathDataTransformer , SVGPathDataEncoder , SVGPathDataParser } from 'svg-pathdata' ; 如果没有模块，则在包中使用全局：
HTML中使用SVG与SVG预定义形状元素介绍
09-28
如果svg代码在html中，我们就更容易写javascript来控制图形的变换，下面为大家介绍一些svg的预定义的形状元素，感兴趣的朋友可以参考下哈，希望对大家有所帮助
把svg的polygon转为path的方法和调整形变的方法
wuweitiandian的专栏
01-27 7485
发现自己很久没有写博客了，所以现在每天都提醒自己，今天有什么收获，今天有什么值得记录一下的。 这篇博客就来说一下最近有个项目有用到svg地图中遇到的一个问题：设计师导出svg之后，是用的polygon，但是ammap里面的地图是用path去表示的，同时，你转成path之后，svg的大小和偏移量并不符合要求。 根据上面的问题，找到了两个方法： 演示地址：http://codepen.i
IDL 对象图形法 二维图形类（一）：线对象 IDLgrPolyline用例解析
Luxuff的博客
10-31 1135
一、基础线段构成 先画一条最基本的线段： pro Grpolyline oWindow=Obj_new('IDLgrWindow',dimension=[800,600]) ;初始化窗口，800*600大小 oView=IDLgrView() oModel=IDLgrModel() oView.Add,oModel x=[-1,1] ;使用归一化坐标系 y=[1,-...
SVG 路径(path)
weixin_30509393的博客
06-11 296
本文转自：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths <path>元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。 另外，path只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然polyline元素也能实现类似的效果，但是必须设置大量的点 ...
简单了解svg基本形状
tengzixiao的博客
02-22 1681
一.svg基本形状 矩形 ：react 圆形 ：circle 椭圆 ：ellipse 线 : line 折线 : polyline 多边形 : polygon 路径 : path 代码如下： <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect...
svg
weixin_34247299的博客
06-06 89
1.svg的 polyline 和 path 的区别： polyline：（直线，多条直线可以构建曲线） &lt;polyline&gt; 元素是用于创建任何只有直线的形状 实例： &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt; &lt;polyline points="20,20 40,25 60,40 80,120...
解决SVG画线line-polyline、矩形rect等线条的stroke-width=1px属性，显示结果变宽成为2px的问题，以及文字模糊的问题
04-03
解决SVG画线line-polyline、矩形rect等线条的stroke-width=1px属性，显示结果变宽成为2px的问题，以及文字模糊的问题
convertPath:将svg形状元素转换为路径svg元素的节点库
04-29
将svg形状元素转换为路径svg元素的节点库。 安装 npm install convertpath 它能做什么 convertpath具有基于插件的体系结构，因此几乎每个优化都是一个单独的插件。 今天我们有： 插入 描述 将defs和symbol元素...
【 SVG 】三、SVG 图形元素
镜花水月
07-09 320
svg 元素、图形元素：circle、ellipse、image、line、path、polyline、polygon、rect、text、marker 元素的使用。
SVG 形状学习（二）
qq_43434300的博客
08-24 352
SVG 有一些预定义的形状元素，可被开发者使用和操作。 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 一.<rect> 标签 <rect> 标签可用来创建矩形，以及矩形的变种。 要理解它的工作原理，请把这些代码拷贝到记事本，然后保存为 "rect1.svg" 文件。把
【SVG】SVG快速入门
'Ablaze 的专栏
01-08 700
前言 SVG 指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。SVG 中预定了七种形状元素，分别是： 矩形 圆形 椭圆形 线段 折线 多边形 路径 1、矩形和圆角矩形 矩形的参数共有六个： x：矩形左上角的 x 坐标 y：矩形左上角的 y 坐标 width：矩形的宽度 height：矩形的高度 rx：对于圆角矩形，指定椭圆在 x 方向的半径 ry：对于圆角矩形，指定
【HTML5】svg 绘制图形
qq_45677671的博客
06-30 3013
SVG 绘制图形教程
d3 svg path添加文本_SVG动画自我学习之路(一)
weixin_39597318的博客
11-23 680
可缩放矢量图形，即SVG，是W3C XML的分支语言之一，用于标记可缩放的矢量图形。目前SVG在Firefox、Opera、Webkit浏览器(如chrome、最新版的火狐)、IE等浏览器中已经部分实现。SVG的来头HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。一个简单的SVG文档由根元素和基本的形状元素构成...
svg基本知识
ab31ab的博客
11-19 473
写这篇文章的缘由是因为做dashboard的项目，图形是svg的项目,参考的项目使用div写的，然后为了改样式一直在套样式，结果套不出来，也是醉了，整理了一下svg的基本格式，从w3c上整理的，详细的列子参考https://www.w3school.com.cn/svg/svg_rect.asp 目录 svg形状 矩形 圆形 椭圆 线 多边形 折线 标签 SVG ...
svg polyline
最新发布
12-23
以下是两个关于SVG polyline的例子： 1. 创建一个只包含直线的形状： ```xml <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height=...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值