zoukankan      html  css  js  c++  java

  • 3. svg学习笔记-基本形状和画笔属性

    svg中可以绘制的基本图形有线段，矩形，多边形，圆，椭圆，分别来看一下这些基本图形：

    线段

    使用<line>元素创建一条线段，格式如下：

    <line x1=" start-x " y1=" start-y " x2=" end-x " y2=" end-y " stroke="black">

    其中start-x和start-y为线段起点的x，y坐标，end-x和end-y为线段结束点的x，y坐标。

    示例如下：

    <!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000000">
        <line x1="10" y1="10" x2="200" y2="200" stroke="black">
        </line>
    </svg>
</body>
</html>

    以上代码在浏览器中显示如下：

    image_thumb[21]

    以上代码中<line>元素除了自身的基本属性之外还有个stroke属性，此属性用来指定基本图形的轮廓颜色，若不指定，默认为none，即在浏览器中无法看到所绘制的图形。除此之外，类似的属性还有stroke-width，stroke-opacity，stroke-dasharray，fill等，此类属性以后本文结尾时会详解，此处只是用来将图形显示出来

    矩形

    使用<rect>元素绘制一个矩形，格式如下：

    <rect x="left-top-point-x" y="left-top-point-y" width="w" height="h"></rect>

    其中x，y属性为矩形左上角顶点的x，y坐标，width和height分别指定矩形的宽高

    示例如下：

    <!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <rect x="30" y="50" width="100" height="60" stroke="black" fill="none">
        </rect>
    </svg>
</body>
</html>

    在浏览器中呈现如下：

    image_thumb[24]

    圆角矩形

    圆角矩形也使用<rect>元素创建，只不过额外指定了两个属性，格式如下：

    <rect x="left-top-point-x" y="left-top-point-y" width="w" height="h" rx="rx" ry="ry">
</rect>

    属性rx和ry分别指定了x方向和y方向的圆角半径，示例如下：

    <!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
<rect x="30" y="50" width="200" height="120" rx="10" ry="60" stroke="black" fill="none">
        </rect>
    </svg>
</body>
</html>

    在浏览器中呈现如下：

    image_thumb[26]

    将以上代码中的svg部分代码改为下面的代码：

    <svg width="300" height="300" style="border:1px solid black">
    <rect x="30" y="50" width="200" height="120" rx="10" ry="10" stroke="black" fill="none">
    </rect>
</svg>

    在浏览器中呈现如下：

    image_thumb[28]

    圆

    在svg中使用<circle>元素创建一个圆，格式如下：

    <circle cx="cx" cy="cy" r="radius" ></circle>

    cx和cy分别指定了圆心坐标的x和y，r元素指定了圆的半径。示例如下：

    <!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <circle cx="100" cy="100" r="60" stroke="black" fill="none"> 
        </circle>
    </svg>
</body>
</html>

    在浏览器中呈现如下：

    image_thumb[30]

    椭圆

    在svg中创建椭圆使用<ellipse>元素，只不过椭圆有两个半径，水平方向上的和垂直方向上的，格式如下：

    <ellipse cx="circle-x" cy="circle-y" rx=" x-radius " ry="y-radius"></ellipse>

    其中cx和cy为椭圆的圆心，rx和ry为水平方向和垂直方向上的半径。示例如下：

    <!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <ellipse cx="100" cy="100" rx="60" ry="90" stroke="black" fill="none"> 
        </ellipse>
    </svg>
</body>
</html>

    在浏览器中呈现如下：

    image_thumb[32]

    多边形

    svg中最有魅力的就是多边形和路径了，CSS3再牛逼也没有办法像svg一样如此简单的创建一个任意的多边形，在svg中通过<polygon>元素创建一个多边形，格式如下：

    <polygon points="x1,y1 x2,y2 x3,y3 x4,y4 …"></polygon>

    通过为points属性指定多个坐标点来创建一个多边形，坐标点之间以空格或者逗号隔开，指定坐标时不需要指定返回起始坐标，图形会自动闭合。

    示例如下：

    <!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <polygon points="10,150 30,40 170,50 10,20" stroke="black" fill="none">        
        </polygon>
    </svg>
</body>
</html>

    在浏览器中下呈现如下：

    image_thumb[34]

    折线

    绘制折线的时候可以通过一系列的<line>元素来创建，但是这样做会加大阅读的难度，不利于代码的维护，所以可以通过另一种方法来创建折线，那就是<polyline>元素，格式如下：

    <polyline points="x1,y1 x2,y2 x3,y3 x4,y4 …"></polyline >

    其中的point元素指定的也是坐标点，点之间以空格或者逗号隔开，示例如下：

    <!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid black">
        <polyline points="23.5,45 58.2,87.63 34,23.4 200,210" stroke="black" fill="none"></polyline>
    </svg>
</body>
</html>

    浏览器中打开如下：

    image_thumb[36]

    画笔属性

    stroke：画笔的颜色，默认为none

    stroke-width：画笔的宽度，默认为1

    stroke-opacity：画笔颜色的透明度，取值为0到1之间的数值，0为完全透明，1为完全不透明，默认为1

    stroke-dasharray：指定一个数值序列来表示虚线的长度和虚线中间空隙的长度

    stroke-linecap：线头尾的形状，值为butt，round或者square

    stroke-linejoin：图形的棱角或者一系列连线的形状，取值为miter（尖的，默认值），round或者bevel（平的）

    stroke-miterlimit：相交处显示宽度与线宽的最大比例，默认值为4

    fill：指定图形的填充颜色，默认值为black

    fill-opacity：填充的透明度，取值范围为0~1之间的数值，0为完全透明，1为完全不透明，默认值为1

    fill-rule：填充的规则，取值为nonzero（默认值）或者evenodd
  • 相关阅读:
    jQuery Validate 验证成功时的提示信息
    MySQL定时任务实现方法
    tp5获取器的用法。
    使用layui异步请求上传图片在tp5.1环境下出现“请对上传接口返回json”的错误的解决方法
    微信小程序底部菜单栏的使用方法
    接口测试中的接口到底是什么?
    【web自动化测试】requests-html 这个解析库，能让你更轻松的获取网页内容
    一个软件测试小白的进阶之路
    Python进阶：@property 动态属性
    百度网盘限速怎么办？
  • 原文地址：https://www.cnblogs.com/ayyl/p/5971112.html
Copyright © 2011-2022 走看看