HTML--SVG基础

一 SVG概述

SVG是Scalable Vector Graphics的缩写,即缩放式矢量图形;

优点:
1.使用编辑器即可编辑图形;
2.基于XML,SVG图形可以被很容易的搜索,脚本化和压缩;
3.缩放不影响图形质量;
4.支持随意打印成需要的尺寸;
5.SVG开源标准;

劣势:
1.比正常格式图片体积大;
2.即使小图片也可能很大;

SVG绘制圆形--<circle />

circle:绘制圆形标签;
cx/cy:定义圆形中心点;
r:定义圆形半径;
stroke:定义描边颜色;
stroke-Width:定义描边宽度;
fill:定义内填充颜色;

<svg width="100" height="100">
    <circle cx="50" cy="50" r="45" stroke="orange" stroke-width="10" fill="#ff5" />
</svg>

二 SVG绘制矩形和圆角矩形--<rect />

rect:绘制矩形标签;
x:矩形的左侧位置,定义矩形到<svg>左侧的距离是Xpx;
y:矩形的顶端位置,定义矩形到<svg>顶部的距离是Ypx;
rx/ry:是圆角半径;
style:
fill:填充颜色;
fill-opacity:填充颜色透明度;
stroke:描边颜色;
stroke-Width:描边宽度;
stroke-opacity:描边透明度;

<svg width="500" height="400">
    <rect x="10" y="10" width="300" height="150" style="fill:#ccc; stroke:orange; stroke-width:5px;" />
    <rect x="10" y="210" rx="50" ry="100" width="300" height="150" style="fill:#ccc; stroke:orange; stroke-width:5px; stroke-opacity:.5; fill-opacity:.9;"  />
</svg>

三 绘制椭圆--<ellipse />

ellipse:绘制椭圆标签;
cx:定义椭圆中心的X坐标;
cy:定义椭圆中心的Y坐标;
rx:定义椭圆的水平半径;
ry:定义椭圆的垂直半径;

<svg width="500" height="400">
    <ellipse cx="150" cy="100" rx="90" ry="50" stroke="orange" stroke-width="5" fill="#000" fill-opacity=".5" />
    <text x="110" y="30" font-size="24" font-weight="bold">SVG椭圆</text>
</svg>

四 SVG绘制直线--<line />

line:绘制直线标签;

x1:直线起始点X坐标;

y1:直线起始点Y坐标;

x2:直线终止点X坐标;

y2:直线终止点Y坐标;

<svg width="500" height="400">
    <line x1="5" y1="5" x2="250" y2="200" style="stroke:rgba(255, 0, 0, .5); stroke-width:5px;" />
    <text x="120" y="50" font-size="24" font-weight="bold">SVG直线</text>
</svg>

五 SVG绘制多边形--<polygon />

polygon:绘制多边形标签;
points:定义多边形每个顶点的X坐标和Y坐标;

<svg width="500" height="400">
    <polygon points="150, 75 258, 137.5 258, 262.5 150, 325 42, 262.6 42, 137.5" stroke="orange" stroke-width="5" stroke-opacity=".5" fill="rgba(250, 0, 0, .3)" />
    <text x="95" y="50" font-size="24" font-weight="bold">SVG多边形</text>
</svg>

六 SVG绘制折线--<polyline />

polyline:绘制折线标签;

points:定义折线的各个转折点的X坐标和Y坐标;

<svg width="500" height="400">
    <polyline points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" stroke="orange" stroke-width="5" fill="none"/>
    <text x="103" y="50" font-size="24" font-weight="bold">SVG折线</text>
</svg>

七 SVG绘制路径--<path />

// 路径绘制(Path)是SVG图形绘制中比较强大的元素;

path:绘制路径标签;
相关d属性的说明:
M = Moveto(移动到坐标);
L = Lineto(绘制直线到坐标);
H = Horizontal lineto(绘制水平直线到坐标);
V = vertical lineto(绘制垂直直线到坐标);
C = Curveto(绘制曲线到坐标);
S = Smooth curveto(绘制光滑曲线到坐标);
Q = Quadratic Bezier curve(绘制贝塞尔曲线到坐标);
T = smooth quadratic Bezier curveto(绘制光滑贝塞尔曲线到坐标);
A = elliptical Arc(绘制椭圆弧到坐标);
Z = closepath(闭合路径);

<svg width="500" height="400">
    <path d="M 100 100 L 300 100 L 200 300 z" style="fill:orange; stroke:#666; stroke-width:5px;" />
    <text x="150" y="80" font-size="24" font-weight="bold">SVG路径</text>
</svg>

八 SVG生成文字--<text></text>

text:绘制文字标签;

x:文字的X坐标;

y:文字的Y坐标;

dx:X轴偏移坐标;

dy:Y轴偏移坐标;

rotate:所有文字旋转角度;

textlength:渲染的文字所占据长度(可用来设置文字间距);

lengthAdjust:使用何种方式来渲染文字占据长度;

<svg width="500" height="400">
    <text x="170" y="80" font-size="24" font-weight="bold">SVG文字</text>
    <text x="130" y="120" rotate=" 45" textlength="150" font-size="20" font-weight="bold">文字旋转45度</text>
    <a href="http://www.cnblogs.com/yizihan">
        <text x="30" y="180" fill="orange" textlength="350" font-size="20" font-weight="bold">
            http://www.cnblogs.com/yizihan
        </text>
    </a>
</svg>

九 SVG绘制描边--stroke

g:代表一组;

path:绘制路径;

stroke-width:设置描边粗细;

stroke-linecap:设置描边的末端样式;

stroke-dasharray:设置虚线的格式(虚线段的长度);

<svg width="500" height="400">
    <g>
        <text x="30" y="30" font-size="20" font-weight="bold">stroke例子</text>
        <path stroke="orange" stroke-width="10" d="M 50 50 L 300 50" />
    </g>
    <g>
        <text x="30" y="130" font-size="20" font-weight="bold">stroke linecap</text>
        <path stroke="orange" stroke-linecap="butt" stroke-width="10" d="M 50 150 L 300 150" />
        <path stroke="orange" stroke-linecap="round" stroke-width="10" d="M 50 180 L 300 180" />
        <path stroke="orange" stroke-linecap="square" stroke-width="10" d="M 50 210 L 300 210" />
    </g>
    <g>
        <text x="30" y="280" font-size="20" font-weight="bold">stroke dasharray</text>
        <path stroke="orange" stroke-dasharray="5, 5" stroke-width="10" d="M 50 300 L 300 300" />
        <path stroke="orange" stroke-dasharray="15, 15" stroke-width="10" d="M 50 330 L 300 330" />
        <path stroke="orange" stroke-dasharray="55, 55" stroke-width="10" d="M 50 360 L 300 360" />
    </g>
</svg>

十 SVG生成滤镜效果

// 先定义滤镜
<defs>
    <filter id="myfilter" x="0" y="0" >
    // <filter>标签里的id属性可以为滤镜定义一个唯一的名称;
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        // 滤镜效果是通过<feGaussianBlur>标签进行定义的,--高斯模糊;;fe后缀可用于所有的滤镜;
        // <feGaussianBlur>标签的stdDeviation属性可定义模糊的程度;
        // in="SourceGraphic"这个部分定义了由整个图像创建效果;
    </filter>
</defs>
// 应用滤镜到图形
<rect x="30" y="30" width="200" height="100" stroke="green" stroke-width="10" fill="orange" filter="url(#myfilter)" />
// filter:url属性用来把元素链接到滤镜;当链接滤镜id时,必须使用#字符;

十一 SVG生成图案填充效果

<defs>
    <pattern id="mypattern" patternUnits="userSpaceOnUse" x="10" y="10" width="100" height="100">
    // patternUnits:用来定义图案使用的单位;
        <path d="M 0 0 L 100 0 L 50 100 z" fill="#222" stroke="orange" stroke-width="5"  />
        // 绘制一个倒三角;
    </pattern>
</defs>
// 应用图案到具体图形;
<rect x="10" y="10" width="300" height="200" stroke="green" stroke-width="5" fill="url(#mypattern)" />

十二 SVG生成渐变效果

<svg width="500" height="400">
    // 定义线性渐变
    <defs>
        <linearGradient id="linearGradient">
            <stop offset="0%" stop-color="#f00" />
            <stop offset="100" stop-color="#f60" />
        </linearGradient>
    </defs>
    // 应用线性渐变
    <rect x="10" y="10" width="300" height="100" stroke="orange" stroke-width="5" fill="url(#linearGradient)" />

    // 定义径向渐变
    <defs>
        <radialGradient id="radialGradient">
            <stop offset="0%" stop-color="#f00" />
            <stop offset="100%" stop-color="#f60" />
        </radialGradient>
    </defs>
    // 应用径向渐变
    <rect x="10" y="150" width="100" height="100" stroke="orange" stroke-width="5" fill="url(#radialGradient)" />
</svg>

十三 JavaScript添加互动操作到SVG图形

// 定义矩形
<svg width="500" height="400">
    <rect id="myrect" x="50" y="50" width="200" height="200" fill="orange" onClick="showcolor()" />
</svg>
<script>
// 针对SVG图形定义JS方法;
function showcolor(){
    var color = document.getElementById(‘myrect‘).getAttributeNS(null,‘fill‘);
    // getAttributeNS():通过命名空间URI和名称来获取属性值;
    alert(‘矩形填充色为:‘ + color);
}
</script>

十四 SVG图形中添加超链接

语法:

<a

xlink:show ="new" | "replace"

xlink:actuate = "onRequest"

xlink:href="<IRI>"

target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>">

</a>

<svg width="500" height="400">
    <a xlink:href="http://www.cnblogs.com/yizihan/" >
        <rect x="10" y="10" width="200" height="200" style="fill:orange; stroke-width:5; stroke:rgb(222, 0, 0)" />
    </a>
</svg>
时间： 2024-10-04 09:44:17

HTML--SVG基础的相关文章

SVG 基础图形

SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse>元素创建 直线,使用<line>元素创建 折线,使用<polyline>元素创建 多边形,使用<polygon>元素创建 理论上,这些基础图形元素都能用<path>元素来构建的相同的图形.并且所有可用于<path>元素的属性都可以应用在这些基础图

SVG基础图形与参数

SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义WEB上使用的矢量图 SVG 使用 XML 格式定义图形 SVG 图像在缩放时其图形质量不会有所损失 SVG 是W3C推荐的 SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体 SVG的优势 SVG 可被非常多的工具读取和修改(比如记事本) SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强. SVG 是可缩放的 SVG 图像可在任何的分辨率下被高质量地打印

SVG 基础

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>svg</title>. <script type="text/javascript" src="d3.js"></script> <style type="text/css&quo

学习SVG系列（1）：SVG基础

什么是SVG? 1.指可伸缩矢量图形 2.用来定义用于网络的基于矢量的图形 3.使用XML格式定义图形 4.图像在放大或改变尺寸的情况下其图形不会有所损失 5.万维网联盟的标准, 用于描述二维矢量图形的一种图形格式 SVG的优势 1.可被非常多的工具读取和修改(比如记事本) 2.与JPEG和GIF图像比起来,尺寸更小,且压缩性强 3.可伸缩 4.图像可在任何的分辨率下被高质量打印 5.可以在图像质量不下降的情况下放大或者缩小 6.图像中的文本是可选的,同时也是可以搜索的(比较适合制作地图) 7.

SVG基础图形和D3.js

使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circle cx="25" cy="25" r="25" fill="purple" /> </svg> D3.js来创建这些图形可以看做这一过程为两步: 创建SVG容器(SVG坐标空间) 画圆形 //创建一个SVG容

SVG相关学习(一)SVG基础

SVG 相关学习 SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG viewBox <svg width="500" height="300"></svg>viewport svg 实际大小 viewBox="x, y, width, height" // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度 视区盒子:以视区盒子大小选中元素然后缩放至vie

svg基础知识梳理

1 基本图形和属性 <rect><circle><ellipse><line><polyline><polygon>矩形---圆形————椭圆———直线——折线—————多边形PS:<path> 用来绘制任意的曲线<rect> x y width height rx ry x y 表示左上角的位置 <circle> cx cy r cx cy表示圆心的位置 <ellipse> cx cy

SVG系列 - 基础

标题为SVG基础,但是过于基础的东西就不再熬述啦,可以参考几个学习网址: SVG参考手册:http://www.runoob.com/svg/svg-reference.html MDN SVG:https://developer.mozilla.org/zh-CN/docs/Web/SVG svg的n种用法:            1.直接在浏览器打开svg格式的文件                        2.iframe引用:<iframe src="first.svg&quo

【Web动画】SVG 线条动画入门

CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画. 举个栗子 SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画.尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条: 把里面的进度条单独拿出来,也就是需要实现这样一个效果: 脑洞大开一下,使用 CSS3 如何实现这样一个进度条呢. CS

SVG交互动画制作

前面我们已经说过了要怎样制作CSS3动画,但是SVG动画一直都没有时间研究过,正好趁现在有一点时间静下心来研究一下. 一般来说,常见前端动画实现方案分为三种,CSS3动画,HTML动画(SVG动画),JS动画或者我们可以称之为Canvas动画 这里主要我们是要讲解的是SVG动画的实现方法. SVG动画的类型 常见的SVG动画有三种实现方式 第一种,通过原生的SVG来实现,但是这种方法的实现效率较低,而且很多较为精确的动作比较难实现 第二种,通过常见的SVG动画库来实现,比如svg.js,snap