与canvas不同的svg画图

2023年11月3日 200次阅读 来源: Brighten_Sun
svg画图API:
svg 画图适合做什么: 矢量图 图表 性能一般 交互容易
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"                 content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style>
        *{
            margin: 0;padding: 0;
        }
        body{
            background: #000;
        }
        svg{
            background: #fff;
        }
        line{
             stroke-width:10px; stroke:green;
        }
    </style>
    </head>
    <body>
        <svg width="800" height="600">
            <line x1="100" y1="100" x2="300" y2="300"></line>
        </svg>
    </body>
    </html>

svg 属性
width height background
transform=’rotate(30deg)’ 错的 //svg中的图形旋转
transform=’rotate(30,250,100)’ 对的 //svg中的图形旋转 后两位为旋转中心

svg 在JS中如何操作属性和样式
    假设svg的id为#r1;
    var oR = document.querySelector('#r1');

属性:
        oR.setAttribute('属性','属性值')
样式:
        oR.style.样式名='样式值'

创建svg中的标签
    createElementNS （命名空间，标签）
    var oRect = document.createElementNS('http://www.w3.org/2000/svg','rect');

设置oRect的属性插入svg中    
    insertBefore -> 一样
    appendChild -> 一样

svg 标签
line //线
rect //矩形
circle //圆形
ellipse //椭圆
path //链接线

line 属性
x1 y1 x2 y2 四个点
stroke 边框颜色
stroke-width 边框宽度
stroke-opacity 边框透明
stroke-linecap=”round” 线端点圆形一个边框的宽度
butt 默认
square 延伸一个边框的宽度
stroke-linejoin=”bevel” 形状角斜切
miter 默认
round 圆形
stroke-dasharray 创建虚线
fill 填充颜色

rect 属性
x=”100″ y=”100″ 起始位置
width=”200″
height=”100″
rx=”100″ 横向半径
ry=”50″ 纵向半径

circle 属性
cx=”100″ cy=”100″ 起始位置
r=”50″ 半径

ellipse 属性
cx=”300″ cy=”300″ 起始位置
rx=”300″ 横向半径
ry=”100″ 纵向半径

path 属性
d=”M291 299, L572 460, L727 353 Z”
M moveTo
L lineTo
Z 闭合
大写的时候
M 绝对定位 √
小写的时候
m 相对定位
L可以省略但是不要省略

如果Boss需要让咱们兼容IE6+可以使用以下插件:
raphael插件
官网 http://dmitrybaranovskiy.github.io/raphael/
api http://dmitrybaranovskiy.github.io/raphael/reference.html

    原文作者：Brighten_Sun
    原文地址: https://www.jianshu.com/p/c89859d45e74
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞