SVG介绍

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SVG介绍相关的知识,希望对你有一定的参考价值。

SVG

1.SVG简介

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

矢量图与位图

位图:基于颜色的描述,如BMP、PNG、JPG
矢量图:基于数学的描述,如SVG、AI

基本图形和属性

1.基本图形
<rect>
技术图片
<circle>
技术图片
<ellipse>
技术图片
<line>
技术图片
<polyline>
技术图片
<polygon>
技术图片
2.基本属性
fill、stroke、stroke-width、transform
示例如下:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect 
        x="10" 
        y="10" 
        rx="5" 
        ry="5" 
        width="150" 
        height="100" 
        stroke="red" 
        fill="none">
    </rect>

    <circle 
        cx="250" 
        cy="60" 
        r="50" 
        stroke="red" 
        fill="none">
    </circle>

    <ellipse 
        cx="400" 
        cy="60" 
        rx="70" 
        ry="50" 
        stroke="red" 
        fill="none">
    </ellipse>

    <line 
        x1="10" 
        y1="120" 
        x2="160" 
        y2="220" 
        stroke="red">
    </line>

    <polyline 
        points="250 120 
                300 220
                200 220"
        stroke="red"
        fill="none">
    </polyline>

    <polygon 
        points="250 120 
                300 220
                200 220"
        stroke="red"
        stroke-width="5"
        fill="yellow"
        transform="translate(150 0)">
    </polygon>
</svg>

3.基本操作API

  • 创建图形
    document.createElementNS(ns,tagName);
  • 添加图形
    element.appendChild(childElement);
  • 获取/设置属性
    element.setAttribute(name,value);
    element.getAttribute(name);




















以上是关于SVG介绍的主要内容,如果未能解决你的问题,请参考以下文章

text 使用SVG的片段

css 快速片段将svg与中心对齐并缩放到视口大小。

通过 webapp 提供时,SVG 片段标识符在 Safari 中被交换

可从 HTML 拖放到 SVG 上

在PaddlePaddle中的Notebook代码片段

使SVG linearGradient遵循路径