SVG
2017-02-20 10:14:36 60 举报AI智能生成
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 width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
SVG预定义形状
矩形<rect>
width/height
x：矩形到浏览器窗口 左侧 距离
y：矩形到浏览器窗口 顶端 距离
rx/ry：可使矩形产生圆角
style
fill: 填充颜色（rgb值、颜色名或16进制值）
stroke：定义矩形边框颜色
stroke-width：边框宽度
fill-opacity：填充颜色透明度（0-1）
stroke-opacity：笔触颜色透明度（0-1）
opacity：定义整个元素的透明值（0-1）
圆形<circle>
椭圆<ellipse>
线<line>
折线<polyline>
多边形<polygon>
路径<path>
浏览器支持
Opera
Chrome
Safari
Firefox
IE9
WHAT
Scalable Vector Graphics 可伸缩矢量图形
用于定义用于网络的基于矢量的图形
使用XML格式定义图形
图像在放大或改变尺寸的情况下其图形质量不会有损失
是万维网的标准
优势
可通过文本编辑器来创建和修改
可被搜索、索引、脚本化或压缩
图像可在任何的分辨率下被高质量地打印
可在图像质量不下降的情况下被放大
是可伸缩的
HTML页面中的SVG
<embed>
<embed> 标签被所有主流的浏览器支持，并允许使用脚本。
<object>
<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。
<iframe>
<iframe> 标签可工作在大部分的浏览器中。
0 条评论
下一页
