乐趣区

关于svg:svg01svg简介及简单使用

一、SVG 意为可缩放矢量图形(Scalable Vector Graphics)

svg 是应用 XML 形容的 矢量 文件。

矢量图与位图有什么区别呢?
  • 位图是基于像素点对色彩的形容,所以在放大之后会含糊
  • 矢量图是基于数学的形容,比方圆形,怎么放大都是个圆

二、应用 svg 的形式

  • img 引入
  • css 背景应用
  • 间接在 html 中引入
  • 间接在浏览器关上
间接上代码:

1、首先筹备一个 rect.svg 的文件

<!-- xmlns 是 svg 的命名空间 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- 矩形标签及属性,在下一篇文章中有具体介绍 -->
    <rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" />
</svg>

2、在 test.html 中

<!-- 1、img 引入 -->
<img src="./rect.svg" alt="">

<!-- 2、背景应用(款式在上面 css 中有定义)-->
<div class="rect"></div>

<!-- 3、间接在 html 中应用 -->
<div>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9" />
    </svg>
</div>

<!-- 4、间接在浏览器中关上 svg 文件(那就间接关上下面的 rect.svg 咯)-->
.rect {
    width: 200px;
    height: 200px;
    background-image: url('./rect.svg');
}

间接在浏览器关上的成果:

退出移动版