AI
推荐
模板社区
专题
登录
免费注册
首页
思维导图
详情
SVG
2017-02-20 10:14:36
65
举报
分享方式
免费使用
AI智能生成
svg整理
svg
javascript
模版推荐
作者其他创作
大纲/内容
简单的例子
<?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> 标签可工作在大部分的浏览器中。
收藏
立即使用
SVG
收藏
立即使用
JS正则表达式
LandLan
职业:coder
去主页
Collect
Get Started
前端进击
Collect
Get Started
SVG
Collect
Get Started
搜索仓库元素
Collect
Get Started
SVG图显示仓库
评论
0
条评论
下一页
图形选择
思维导图
主题
补充说明
AI生成
修改AI描述
去编辑
重新生成
提示
关闭后当前内容将不会保存,是否继续?
取消
确定
Document