svg基础

最新推荐文章于 2024-07-04 09:49:20 发布

小湾生产队队长

最新推荐文章于 2024-07-04 09:49:20 发布

阅读量760

点赞数 1

分类专栏： svg 文章标签： svg

本文链接：https://blog.csdn.net/happy81997/article/details/123548941

版权

svg 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

因为需要所以开始了，D3.js的学习之路。

在开始学的时候，发现的学习D3.js需要有一些SVG和canvas的知识，这些是我之前都没有接触过的，所以现在从svg开始学习了。

SVG可缩放矢量图，使用XML格式SVG文件必须使用.svg后缀来保存。先来一个例子：

<?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="black"
  stroke-width="2" fill="red" />
</svg>

SVG 代码解析：

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。

standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 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 版本，xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

注释：所有的开启标签必须有关闭标签！

SVG中预定义了七种形状元素：

　　分别为：矩形<rect>、圆形<circle>、椭圆形<ellipse>、线段<line>、折线<polyline>、多边线<polygon>、路径<path>。

　　一、矩形<rect>

　　　　六个参数：

　　　　　　x：矩形左上角的x坐标； y：矩形左上角的y坐标；

　　　　　　width：矩形的宽度；height：矩形的高度；

　　　　　　rx：对于圆角矩形，指定椭圆在x方向的半径；ry：对于圆角矩形，指定椭圆在y方向的半径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" rx="20" ry="40" width="50" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

　　　　　　建议在菜鸟教程中实例操作一下，可以加深印象(自己修改参数的值，看效果)。

　　二、圆形<circle>

　　　　三个参数：

　　　　　　cx：圆心的x坐标；cy：圆心的y坐标；r：圆的半径。

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

　　　　　　菜鸟教程实例操作

　　三、椭圆<ellipse>

　　　　四个参数：

　　　　　　cx：圆心的x坐标； cy：圆心的y坐标；

　　　　　　rx：椭圆的水平半径；ry：椭圆的垂直半径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

　　　　　　菜鸟教程实例操作。

　　四、线段<line>

　　　　四个参数：

　　　　　　x1：起点的x坐标；y1：起点的y坐标；

　　　　　　x2：终点的x坐标；y2：终点的y坐标；

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />  //实例

　　五、折线<polyline>

　　　　属性points："x,y x1,y1 x2,y2";(x,y是坐标，x1,y1是下一个坐标)每一组都用空格分隔。　

<ployline points="100,20 20,90 60,160 140,160 180,90" style="fill:white;stroke:black;stroke-width:3" transform="translate(200,0)" />

　　六、多边形<polygon>

　　　　多边形就是折线的最起始和最后的点连接，得到的图形。

<polygon points="100,20 20,90 60,160 140,160 180,90" 
        style=" fill:LawnGreen; stroke:black; stroke-width:3 "/>

　　七、路径<path>

　　　　M=moveto：将笔画移动到指定坐标。

　　　　L=lineto：画直线到指定坐标。

　　　　H=horizontal lineto：画水平直线到指定坐标。

　　　　V=vertical lineto：画垂直直线到指定坐标。

　　　　C=curveto：画三次贝塞尔曲线经两个指定控制点到达终点坐标。

　　　　S=shorthand/smooth curveto：与前一条三次贝赛尔曲线相连，第一个控制点前一条曲线第二个控制点的对称点，只需输入第二个控制点和终点，即可绘制一个三次贝赛尔曲线。

　　　　Q=quadratic Bezier curveto：画二次贝赛尔曲线一个指定控制点到达终点坐标。

　　　　T=Shortand/smooth quadratic Bezier curveto：与前一条二次贝赛尔曲线相连，第一个控制点前一条曲线第二个控制点的对称点，只需输入第二个控制点和终点，即可绘制一个二次贝赛尔曲线。

　　　　A=elliptical arc：画椭圆曲线到指定坐标。

　　　　Z=closepath：绘制一条直线连接终点和起点，用来封闭图形。

　　　　上述命令都是用大写英文字母，表示坐标系中的绝对坐标(absolute)。也可以用小写英文字母，表示相对坐标(相对当前笔画所在点)。

　　　　弧线：A( rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)

　　　　　　 rx：椭圆x方向半轴大小；ry：椭圆y方向半轴大小；x-axis-rotation：椭圆形的x轴与水平轴顺时针方向的夹角；large-arc-flag：有两个值(1:大角度弧线,0:小角度弧线)；sweep-flag：有两个值(1:顺时针至终点,0:逆时针至终点)；x：终点x坐标；y：终点y坐标。

　　八、文本<text>

　　　　六个参数：

　　　　　　x：文本位置的x坐标；y：文字位置的y坐标；

　　　　　　dx：相对于当前位置在x方向上平移的距离(值为正则往右，负则往左)。

　　　　　　dy：相当于当前位置在y方向上平移的距离(值为正则往下，负则往上)。

　　　　　　textLength：文字的显示长度(不足则拉长，足则压缩)。

　　　　　　totate：旋转角度(顺时针为正，逆时针为负)。

　　　　　　如果对多个文字中的部分文字单独定义样式可以用<tspan>标签。

<text x="200" y="150" dx="-5" dy="5" rotate="180" textLength="90">
     I am <tspan fill="yellow">programmer</tspan>
</text>

SVG样式：

　　fill：填充色，改变文字<text>的颜色也用它。

　　stroke：轮廓线的颜色。

　　stroke-width：轮廓线的宽度。

　　stroke-linecap：线头端点的样式，圆角，直角等。

　　stroke-dashanray：虚线的样式。(实例) 第一个是虚线长度，第二个是间隔空白长度......

　　opacity：透明度，0.0为完全透明，1.0完全不透明。

　　font-family：字体。

　　font-size：字体大小。

　　font-weight：字体粗细。

　　font-style：字体的样式，斜体等。

　　text-decoration：上画线、下划线等。

SVG标记<marker>：

　　标记(marker)，也就是给线段添加箭头。marker定义一组标记，defs定义可重复利用的图形。

　　marker的一些属性：

　　　　viewBox：坐标系的区域

　　　　refX,refY：在viewBox内的基准点，绘制时此点在直线端点上。

　　　　markerWidth,markerHeight：标识的大小。

　　　　orient：绘制方向，可设定为auto(自动确认方向)和角度值。

　　　　id：标识的id号。

　　给线段添加箭头，首先先定义一个箭头，在调用这个箭头。

<defs>
<marker id="arrow"
    markerUnits="strokeWidth"
    markerWidth="12"
    markerHeight="12"
    viewBox="0 0 12 12"
    refsX="6"
    refsY="6"
    orient="auto">
<path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000" />
</marker>
</defs>

　　这是一条带箭头的曲线：

<path d="M20,70 T80,100 T160,80 T200,90" 
         fill="white" stroke="red" stroke-width="2"
        marker-start="url(#arrow)"
        marker-mid="url(#arrow)"
        marker-end="url(#arrow)" />

　　marker-start：路径起点处。

　　marker-mid：路径中间端点处。(箭头将绘制在路径的节点处，so对直线无效)

　　marker-end：路径终点处。

SVG滤镜<filter>：

　　滤镜可使图形具有艺术效果，对源图形的数学参数不会改变，只是进行了渲染后传给显示器。

　　滤镜filter和标识marker使用方法是一样的。在<defs>中定义，设定一个id定义需要用到的滤镜，在调用。

　　可以通过W3C看一些需要的滤镜效果。

SVG渐变：

　　有线性渐变<linearGradient>、放射性渐变<radialGradient>。

　　渐变也是定义在<defs>标签中，定义一个id号，在调用这个id。例：

<defs>
<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
　　//水平线性渐变
    <stop offset="0%" stop-color="#F00" />
    <stop offset="100%" stop-color="#0FF" />
</linearGradient>
</defs>
//offset定义渐变开始的位置
//stop-color定义此位置的颜色
<rect fill="url(#myGradient)" x="10" y="10" width="300" height="100">
//垂直线性渐变 就将x1、x2、y1、y2分别变成0%、0%、0%、100%

小湾生产队队长

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
svg基础

目录SVG 代码解析：SVG中预定义了七种形状元素：　　一、矩形　　二、圆形　　三、椭圆　　四、线段　　五、折线　　六、多边形　　七、路径　　八、文本SVG样式：SVG标记：SVG滤镜：SVG渐变：因为需要所以开始了，D3.js的学习之路。在开始学的时候，发现的学习D3.js需要有一些SVG和canvas的知识，这些是我之前都没有接触过的，所以现在从svg开始学习了。SVG可缩放矢量图，使用XML格式SVG文件必须使用.svg后缀来保存
复制链接

扫一扫

专栏目录